skills.rest
vinhnxv
vinhnxvCOMMUNITY
Explore all skills by this author →
𝕏@vinhnxvGitHub

figma-to-react

Converts Figma designs into React components with Tailwind CSS.

6|3|Updated Feb 11, 2026
Search Tags:#frontend#react#figma#tailwind#design-to-code#code-generation
One-click install
npx skills add https://github.com/vinhnxv/rune-plugin --skill figma-to-react-vinhnxv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-react
Source: https://github.com/vinhnxv/rune-plugin/tree/main/plugins/rune/skills/figma-to-react
Command: npx skills add https://github.com/vinhnxv/rune-plugin --skill figma-to-react-vinhnxv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This MCP skill translates Figma designs into production-ready React components with Tailwind CSS support, speeding up frontend delivery and ensuring design-consistent UI across projects.

Core Features & Use Cases

  • End-to-end design-to-code: generate React components from Figma URLs with Tailwind styling.
  • Design inspection and mapping: use figma_inspect_node to understand node properties and auto-layout for accurate UI reproduction.
  • Component discovery and reuse: identify components and duplicate instances via figma_list_components to promote reuse across screens.

Quick Start

Provide a Figma URL and run the figma_to_react tool to generate a React component.

Frequently Asked Questions about figma-to-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to React components?▼

To convert Figma designs to React, provide a Figma URL and run the figma_to_react tool. It generates production-ready React components with Tailwind CSS styling, streamlining frontend development workflows and ensuring consistent UI.

What is needed to generate React code from Figma designs?▼

Generating React code from Figma requires a FIGMA_TOKEN for authentication. You also use MCP tools like figma_fetch_design and figma_inspect_node to fetch and analyze node properties for accurate UI reproduction.

Can I inspect Figma auto-layout properties before converting to React?▼

Yes, you can inspect Figma auto-layout properties before converting to React. The figma_inspect_node tool analyzes node properties and auto-layout configurations to ensure accurate UI reproduction in the generated React components.

Does the Figma to React conversion support Tailwind CSS?▼

Yes, Figma to React conversion fully supports Tailwind CSS. It translates design properties into production-ready React components styled with Tailwind CSS, ensuring consistent UI across different frontend projects.

How do I identify reusable components in Figma for React code generation?▼

To identify reusable components in Figma, use the figma_list_components tool. It discovers existing components and duplicate instances within the design, promoting component reuse across different screens during React code generation.

What is the best way to handle design-to-code handoffs for React?▼

The best way to handle design-to-code handoffs for React is using automated conversion tools. They fetch Figma designs, inspect auto-layout properties, and generate production-ready React components with Tailwind CSS to ensure consistent UI.

Related Skills

Explore More Software Engineering Skills→
HellKaiser45HellKaiser45

figma

Translate Figma design frames into production-ready UI code via MCP.

Community
Advanced
huivrotikihuivrotiki

artifacts-builder

Scaffold React, Tailwind, and shadcn/ui projects and bundle them into a single HTML artifact.

Community
Advanced
GuitarAlchemistGuitarAlchemist

federation-discover

List tools and capabilities across GuitarAlchemist repositories with domain and keyword searches.

Official
Intermediate
cano721cano721

figma

Translate Figma designs into React and Tailwind UI components.

Community
Advanced