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

0•

Design Tools

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.

Key Features

01Component scaffolding following Atomic Design principles

02Automated design token extraction for colors, typography, and spacing

03Framework support for React, Angular, Vue, and Svelte

04Intelligent mapping of Figma Auto Layout to CSS Flexbox/Grid

050 GitHub stars

06Automatic generation of unit tests and SpecWeave living documentation

Use Cases

01Converting complex UI frames into responsive, production-ready components

02Synchronizing design changes to codebases via CSS Modules or Tailwind

03Building and maintaining a design system from Figma variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anton-abyzov/sw-soccer-manager figma-to-code

For use in Claude.ai and ChatGPT

Download Skill