Design to Component

Convert a Figma design into a typed, production-ready React component by extracting specs directly from the Figma MCP — no manual measurements or guesswork.

When to Apply

Use this skill when:

• A user shares a Figma URL or node ID and says "implement this", "build this component", or "convert this design"
• Creating a new component and a Figma design exists as the source of truth
• Validating that an existing component matches its Figma spec
• Extracting design tokens (colors, spacing, typography) from a design into code

Workflow

Follow these steps in order. Use the Figma MCP tools at each stage.

Step 0 — Discover Project Conventions

Before touching any Figma tool, read CLAUDE.md, README.md, and any design system rules files (e.g. .cursor/rules/, AGENTS.md) to determine: