Which frontend frameworks are supported?

It provides workflow patterns for React (TypeScript + CSS Modules/Tailwind), Angular (Standalone), Vue (Composition API), and Svelte.

Does this skill fetch Figma files directly?

No, this skill assumes a Figma MCP server is configured and active to provide the design data; it does not handle direct API fetching.

Can it handle Figma Auto Layout?

Yes, it includes specific mapping rules to convert Figma Auto Layout properties directly into CSS Flexbox, Grid, or Tailwind classes.

Does it support Atomic Design?

Yes, it encourages organizing generated components into Atoms, Molecules, and Organisms to maintain a scalable project structure.

What credentials are required?

You need a Figma Personal Access Token set as an environment variable and access to the Figma MCP server (Local or Remote).

Figma to Code Workflow

Name: Figma to Code Workflow
Author: anton-abyzov

byanton-abyzov

设计工具

Converts Figma designs into production-ready code components and design tokens using standardized workflow patterns.

关于

This skill bridges the gap between design and development by automating the conversion of Figma designs into clean, accessible code. It utilizes Figma MCP data to extract design tokens, scaffold UI components following Atomic Design principles, and generate unit tests for major frameworks like React, Vue, Svelte, and Angular. By mapping Figma's Auto Layout to CSS Flexbox and constraints to responsive media queries, it ensures high-fidelity implementation while maintaining design system consistency through integrated SpecWeave documentation.

主要功能

Component scaffolding following Atomic Design principles
Automated design token extraction for colors, typography, and spacing
Framework support for React, Angular, Vue, and Svelte
Intelligent mapping of Figma Auto Layout to CSS Flexbox/Grid
0 GitHub stars
Automatic generation of unit tests and SpecWeave living documentation

使用场景

Converting complex UI frames into responsive, production-ready components
Synchronizing design changes to codebases via CSS Modules or Tailwind
Building and maintaining a design system from Figma variables

关于

主要功能

Component scaffolding following Atomic Design principles
Automated design token extraction for colors, typography, and spacing
Framework support for React, Angular, Vue, and Svelte
Intelligent mapping of Figma Auto Layout to CSS Flexbox/Grid
0 GitHub stars
Automatic generation of unit tests and SpecWeave living documentation

使用场景

Converting complex UI frames into responsive, production-ready components
Synchronizing design changes to codebases via CSS Modules or Tailwind
Building and maintaining a design system from Figma variables