What configuration is required for Figma access?

You must have a Figma MCP server configured in your plugin settings and a valid Figma personal access token set in your environment variables.

Can it generate user flows and interactions?

Yes, it parses interaction patterns and step-by-step flows from the specification to create annotated flow diagrams and interactive component states within Figma.

How does it handle updates to existing mockups?

The skill checks Wrangler metadata for existing approval status and provides options to iterate on current designs, start fresh, or skip the process if mockups are already approved.

Does this skill require an existing design system?

Yes, it requires a master design system file to be identified via the design-system-setup skill or existing metadata before it can generate feature-specific frames.

Figma Design Workflow

Name: Figma Design Workflow
Author: samjhecht

bysamjhecht

•

Design Tools

Generates production-ready Figma mockups from specification issues using hierarchical design systems and approval tracking.

About

The Figma Design Workflow skill bridges the gap between technical specifications and visual implementation by automating the creation of high-fidelity mockups. It intelligently parses UI requirements, components, and user flows from Wrangler MCP issues to generate organized Figma frames. By maintaining a hierarchical structure between master design systems and feature-specific files, it ensures visual consistency across projects while providing automated approval tracking to establish clear baselines for frontend developers.

Key Features

Visual annotation of user flows and component interactions
Automatic library linking and design token application
1 GitHub stars
Integrated approval status tracking within Wrangler metadata
Hierarchical Figma file architecture (Master DS + Child Feature files)
Automated parsing of UI requirements from Wrangler specifications

Use Cases

Rapidly prototyping UI screens before starting frontend development
Ensuring design system consistency across distributed feature teams
Establishing visual verification baselines for implementation reviews

About

Key Features

Visual annotation of user flows and component interactions
Automatic library linking and design token application
1 GitHub stars
Integrated approval status tracking within Wrangler metadata
Hierarchical Figma file architecture (Master DS + Child Feature files)
Automated parsing of UI requirements from Wrangler specifications

Use Cases

Rapidly prototyping UI screens before starting frontend development
Ensuring design system consistency across distributed feature teams
Establishing visual verification baselines for implementation reviews