skills.rest
majiayu000
majiayu000COMMUNITY
Explore all skills by this author →
GitHub

figma-to-react

Convert Figma MCP outputs into React components with TypeScript and Tailwind.

258|26|Updated Dec 9, 2025
Search Tags:#react#figma#mcp#component#nextjs#tailwind#design-to-code
One-click install
npx skills add https://github.com/majiayu000/spellbook --skill figma-to-react-majiayu000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-react
Source: https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-react
Command: npx skills add https://github.com/majiayu000/spellbook --skill figma-to-react-majiayu000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps developers translate pixel-perfect Figma MCP outputs into production-ready React components, preserving layout, typography, and structure with minimal manual edits.

Core Features & Use Cases

  • Flatten absolute contents to maintain precise positioning without wrapper-induced shifts.
  • Map Figma MCP font patterns to web fonts (e.g., Source Serif 4, Kaisei Tokumin) and apply consistent typography rules.
  • Generate React/Next.js components using TypeScript and Tailwind CSS, with inline SVGs and CSS-based lines for pixel-perfect visuals.
  • Use the Extended Reference guidelines (reference/extended.md) for complex table-like patterns, nested frames, and font-name mappings.
  • Reuse generated components across projects by preserving classNames and structure.

Quick Start

Convert the current Figma MCP page into a reusable React component using TypeScript and Tailwind.

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 Figma designs to React components?▼

This skill converts Figma MCP outputs into production-ready React components using TypeScript and Tailwind CSS, preserving layout, typography, and structure with minimal manual edits.

How do I flatten absolute positioning in Figma MCP outputs without layout shifts?▼

This skill flattens absolute contents from Figma MCP outputs to maintain precise positioning without wrapper-induced shifts when generating the final React components.

Can I use Figma MCP with Next.js and Tailwind CSS?▼

Yes, this skill supports converting Figma MCP designs into Next.js components using TypeScript and Tailwind CSS, applying consistent typography rules and inlining SVGs for pixel-perfect visuals.

How do I map Figma fonts to web fonts in React components?▼

This skill maps Figma MCP font patterns to web fonts like Source Serif 4 and Kaisei Tokumin, applying consistent typography rules automatically during the React component generation process.

What is the best way to handle complex table-like patterns from Figma in React?▼

This skill uses Extended Reference guidelines to handle complex table-like patterns, nested frames, and font-name mappings from Figma MCP outputs, ensuring accurate translation into structured React components.

Does converting Figma designs to React preserve classNames and structure?▼

Yes, this skill preserves classNames and component structure during the Figma MCP to React conversion, enabling you to reuse the generated UI modules across multiple projects without losing design fidelity.

Related Skills

Explore More Design & Creative Skills→
Moliboy5000Moliboy5000

figma

Generates Tailwind-CSS-based React components from Figma designs and user stories.

Community
Intermediate
lsst-sqrelsst-sqre
2

migrate-styled-components-to-css-modules

Migrate React components from styled-components to CSS Modules with design tokens.

Official
Intermediate
theGobindSinghtheGobindSingh
1

tailwind-design-system

Implement design tokens, component variants, and responsive patterns with Tailwind CSS.

Community
Advanced
majiayu000majiayu000
258

figma-to-code

Convert Figma MCP design data into React/Next.js components with TypeScript and Tailwind CSS.

Community
Advanced