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.

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

01Visual annotation of user flows and component interactions

02Automatic library linking and design token application

031 GitHub stars

04Integrated approval status tracking within Wrangler metadata

05Hierarchical Figma file architecture (Master DS + Child Feature files)

06Automated parsing of UI requirements from Wrangler specifications

Use Cases

01Rapidly prototyping UI screens before starting frontend development

02Ensuring design system consistency across distributed feature teams

03Establishing visual verification baselines for implementation reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samjhecht/wrangler figma-design-workflow

For use in Claude.ai and ChatGPT

Download Skill