How does it manage CSS variables and design tokens?

It extracts design tokens into a dedicated CSS variables file (figma-tokens.css), ensuring that colors, spacing, and typography remain consistent with the source design.

Does this skill handle images and icons automatically?

Yes, it automatically downloads assets from Figma, saves them to your local project directory, and replaces Figma URLs with local paths in the generated code.

How does the visual validation work?

The skill renders your new component in a local dev server and uses a browser tool to take a screenshot, comparing it to the original Figma design to fix any layout or styling bugs.

What are the prerequisites for using this skill?

You need the Figma MCP server configured, and your project should be using React and Tailwind CSS for the best results.

Can I use it with Figma Desktop to avoid API limits?

Yes, the skill is compatible with the figma-desktop MCP server, which allows you to process designs directly from your open desktop application.

Figma to React

Name: Figma to React
Author: gbasin

bygbasin

0•

Design Tools

Converts Figma screen flows into pixel-perfect, production-ready React components with Tailwind CSS and automated visual validation.

The Figma to React skill streamlines the handoff between design and development by automating the conversion of Figma designs into clean, functional React code. It extracts design tokens into CSS variables, downloads and optimizes assets with content-hash deduplication, and utilizes sub-agents to process individual screens in isolation. A standout feature is its visual validation workflow, which uses a developer browser to compare rendered components against original Figma screenshots, ensuring pixel-perfect accuracy while automatically correcting common AI generation artifacts in layout and positioning.

Key Features

01Support for Figma Desktop MCP to bypass API rate limits

02Sub-agent orchestration for processing complex screen flows

030 GitHub stars

04Content-hashed asset downloading with AI-powered renaming

05Visual validation using dev-browser for pixel-perfect accuracy

06Automated design token extraction and CSS variable mapping

Use Cases

01Migrating complex design system components to React and Tailwind CSS

02Rapidly scaffolding production UI from high-fidelity Figma designs

03Automating the extraction and organization of project-specific assets and tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gbasin/figma-to-react figma-to-react

For use in Claude.ai and ChatGPT

Download Skill