skills.rest
metric-space-ai
metric-space-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma

Fetch Figma MCP design data and generate React + Tailwind components.

2|Updated Apr 12, 2026
Search Tags:#ui#react#figma#mcp#tailwind#design-to-code
One-click install
npx skills add https://github.com/metric-space-ai/ctox --skill figma-metric-space-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/metric-space-ai/ctox/tree/main/skills/packs/design/figma
Command: npx skills add https://github.com/metric-space-ai/ctox --skill figma-metric-space-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables teams to fetch design context, metadata, and assets from Figma MCP and translate frames into production-ready UI code.

Core Features & Use Cases

  • Fetch structured design data and assets from Figma MCP.
  • Translate Figma nodes into React components that align with the project's design system and tokens (colors, typography, spacing).
  • Support debugging and troubleshooting workflows for Figma MCP setup and configurations.

Quick Start

Provide a Figma frame URL to begin the get_design_context flow and generate React components styled with Tailwind using the project tokens.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I convert Figma designs to React code?▼

To convert Figma designs to React code, the Skill fetches structured design data via Figma MCP and translates exact node frames into React components styled with Tailwind. It ensures 1:1 visual parity by applying the project's design tokens for colors, typography, and spacing.

Can I use Figma MCP to generate Tailwind components?▼

Yes, you can use Figma MCP to generate Tailwind components by retrieving structured design context and mapping visual properties to your project's design tokens. This allows the generated React code to align perfectly with your existing style system.

What is the best way to handle large Figma node graphs for code generation?▼

The best way to handle large Figma node graphs is to use the get_metadata fallback via Figma MCP. This prevents retrieval failures by fetching essential structural information first before attempting full design context extraction for complex frames.

Does Figma to React conversion maintain visual parity with the source design?▼

Yes, Figma to React conversion maintains strict 1:1 visual parity with the source design during validation. It reuses existing components, tokens, and routing to satisfy integration requirements and accurately reflect the original Figma frame.

How do I troubleshoot Figma MCP setup for asset retrieval?▼

To troubleshoot Figma MCP setup for asset retrieval, use the Skill's debugging workflows to check MCP configurations and verify node frame access. It supports troubleshooting integration issues to ensure assets and style tokens are correctly fetched.

Do I need a Figma URL to start generating UI code from a design?▼

Yes, you need to provide a Figma frame URL or a specific node ID to start the get_design_context flow. This input is required to fetch the structured design data needed to generate the React and Tailwind UI components.

Related Skills

Explore More Design & Creative Skills→
HellKaiser45HellKaiser45

figma

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

Community
Advanced
bzellmanbzellman

figma

Translate Figma frames into React and Tailwind UI code.

Community
Advanced
MatheusrlrMatheusrlr
1

figma

Translate Figma designs into React and Tailwind CSS code via node IDs or URLs.

Community
Intermediate
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced