skills.rest
rockcookies
rockcookiesCOMMUNITY
Explore all skills by this author →
GitHub

figma-to-react

Convert Figma MCP output into pixel-accurate React and Next.js components with TypeScript and Tailwind CSS.

1|Updated Feb 2, 2026
Search Tags:#typescript#react#figma#tailwind css#nextjs#design-to-code#figma mcp
One-click install
npx skills add https://github.com/rockcookies/skills --skill figma-to-react-rockcookies
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-react
Source: https://github.com/rockcookies/skills/tree/main/skills/majiayu-spellbook/figma-to-react
Command: npx skills add https://github.com/rockcookies/skills --skill figma-to-react-rockcookies

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Translating Figma designs into React code by hand loses positioning, font, and spacing details, and naive use of Figma MCP output produces broken layouts due to nested absolute contents wrappers, fixed text heights, and font rendering mismatches. ## Core Features & Use Cases - Lossless Figma MCP transformation: Preserves every className from get_design_context, flattens absolute contents structures with correct position math, and extracts page dimensions from metadata instead of hardcoding. - Font and asset handling: Maps Figma font names to Tailwind classes, loads Google Fonts via CDN with optical-size axes, inlines SVG assets, and replaces simple line images with CSS. - Table pattern conversion: Detects absolute-positioned table layouts in Figma output and rebuilds them as reusable row components without breaking column alignment. - Use Case: Given a Figma node URL for a 1920x1080 financial report page, extract metadata, design context, and a screenshot via Figma MCP, cache them in .figma-mcp/, then generate a Next.js page that matches the screenshot pixel-for-pixel. ## Quick Start Convert the Figma frame at this URL into a production-ready Next.js component with TypeScript and Tailwind, preserving all positions and fonts exactly.

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 with Tailwind CSS?▼

Call Figma MCP tools (get_metadata, get_design_context, get_screenshot) for the target node, cache the output, then flatten absolute contents wrappers, map font names to Tailwind classes, and replace images with CSS or inline SVG. Verify the result against the screenshot.

Why are elements positioned wrong after using Figma MCP output?▼

Figma MCP nests children inside `absolute contents` wrappers whose children already carry absolute positions, so adding parent offsets double-counts. Remove the contents wrapper and keep child top/left values as-is; only add offsets when the parent is absolute without contents.

Should I use next/font/google or Google Fonts CDN for Figma accuracy?▼

Use the Google Fonts CDN link directly in the layout head. next/font/google self-hosts fonts and can render different character widths and optical sizes, causing text wrapping differences from the Figma reference.

Should Figma table designs become HTML table elements?▼

Generally no. Figma builds tables with absolute positioning, and converting to HTML tables requires manual column-width calculation and breaks right-alignment patterns. Keep the absolute positioning and build a reusable row component instead.

Why does converted text overflow or wrap differently than in Figma?▼

Figma MCP emits fixed heights on text blocks, but browser font metrics differ from Figma's rendering. Remove h-[Xpx] from multi-line paragraphs, keep only top positioning, and let text flow naturally inside a fixed-width container.

Related Skills

Explore More Software Engineering Skills→
guichefferguicheffer
3

figma-researcher

Extract design specifications and implementation details from Figma designs via MCP.

Community
Intermediate
vishaltailor01vishaltailor01

DevOps & CI/CD Skill

Manage CI/CD pipelines, Docker containerization, and infrastructure as code for Next.js applications.

Community
Advanced
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
Samuelca6399Samuelca6399

figma-to-code

Convert Figma auto layout, tokens, and variants into HTML, CSS, and React components.

Community
Intermediate