skills.rest
bzellman
bzellmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma

Translate Figma frames into React and Tailwind UI code.

Updated Apr 7, 2026
Search Tags:#react#figma#mcp#tailwind#tokens#design-to-code#ui-translation
One-click install
npx skills add https://github.com/bzellman/earp-kit --skill figma-bzellman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/bzellman/earp-kit/tree/main/skills/system/figma
Command: npx skills add https://github.com/bzellman/earp-kit --skill figma-bzellman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables design-to-code automation by translating Figma design data into production-ready UI implementations, synchronizing design intent with code.

Core Features & Use Cases

  • Get design context from a Figma frame via MCP to produce a structured representation for downstream tasks.
  • Retrieve metadata for large nodes to prevent truncation and to allow selective re-fetching.
  • Capture screenshots for visual verification and reference during implementation.
  • Reuse tokens, components, and typography, while producing React + Tailwind code aligned with project conventions.
  • Validate visual parity and behavior against the original Figma design before delivery.

Quick Start

Run get_design_context for the target Figma frame URL, then fetch get_screenshot and assets before translating the design to production UI.

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, this skill extracts design context, metadata, and screenshots from Figma frames via an MCP server to drive production-ready UI generation. It produces React components styled with Tailwind, ensuring 1:1 visual parity with the original design.

What is the best way to translate Figma frames into production UI?▼

The best way to translate Figma frames into production UI is by extracting structured design context and screenshots through an MCP server. This approach enables asset handling, UI token reuse, and visual validation before generating the final code.

Can I use Tailwind tokens when translating Figma designs to code?▼

Yes, you can use Tailwind tokens when translating Figma designs to code. The skill explicitly supports UI token reuse and component synchronization, producing React + Tailwind code that aligns with your existing project conventions.

How does the MCP server handle large Figma nodes during design-to-code translation?▼

The MCP server handles large Figma nodes by retrieving specific metadata to prevent data truncation. This allows selective re-fetching of design context, ensuring no structural information is lost during the UI translation process.

Why does my Figma design translation fail to achieve visual parity?▼

Figma design translation may fail to achieve visual parity if assets and screenshots are not fetched before code generation. Validating visual parity and behavior against the original Figma design is a required step before final delivery.

Related Skills

Explore More Design & Creative Skills→
marcius-llmusmarcius-llmus
1

figma

Fetch structured Figma design context, screenshots, variables, and assets.

Community
Intermediate
udecodeudecode
240

figma-design-sync

Compare Figma designs with live web components and fix CSS/Tailwind discrepancies.

Official
Advanced
xvawlxvawl
1

ui-design-system

Establish scalable UI design systems with tokens and shadcn/ui for React/TypeScript projects.

Community
Advanced
MercurykzMercurykz

figma

Extract Figma design data via MCP and generate code from nodes.

Community
Intermediate