← Back to skills

Integration

Figma to Code

Translate Figma designs into production-ready code with visual fidelity using Figma MCP, project components, and design tokens.

Last reviewed Mar 2, 2026

Install

Create this file in your project:

.claude/skills/figma-implement-design/SKILL.md
--- name: figma-implement-design description: Use this skill when implementing UI from a Figma design, translating a mockup to code, or when given a Figma link to build from. --- # Figma to Code ## When to Use - Given a Figma link or design file to implement - Building a new page or component from a design mockup - Updating existing UI to match a revised design - Checking implementation against the original design for visual fidelity ## Process 1. **Read the design** -- Use Figma MCP tools to fetch the design context, metadata, and screenshot for the target frame or component. 2. **Inventory existing components** -- Before writing any new components, review the project's existing component library. Identify which design elements map to existing components. 3. **Extract design tokens** -- Note spacing, typography, colors, border radii, and shadows from the design. Map them to existing project tokens/variables where possible. 4. **Build structure first** -- Implement the layout and component hierarchy without styling details. Get the structure right. 5. **Apply styling** -- Add typography, spacing, colors, and visual details. Use project design tokens, not hardcoded values. 6. **Verify fidelity** -- Compare the implementation to the Figma design screenshot. Check alignment, spacing, typography, and responsive behavior. ## Rules - Always check for existing project components before creating new ones. Reuse first. - Use project design tokens (CSS variables, theme values) for colors, spacing, and typography. Never hardcode hex values that exist as tokens. - Do not generate entire component libraries from scratch. Adapt the design to the project's existing component system. - Respect the design's spacing and alignment precisely. "Close enough" is not acceptable for spacing. - If the design conflicts with existing project patterns, flag the conflict rather than silently deviating. - Handle responsive behavior even if the design only shows one breakpoint. Apply sensible defaults. - Use the Figma MCP tools to fetch design context. Do not guess from screenshots alone.

What this skill does

Figma to Code bridges the gap between design and implementation by providing a structured process for translating Figma designs into production code. The key insight is that good design implementation is not about generating code from pixels -- it's about mapping a design onto an existing project's component system and design tokens.

The skill's "inventory first" approach prevents the common mistake of building new components for every design element when the project already has a button, card, or input component that matches. This keeps the codebase consistent and avoids component proliferation.

Design token usage is enforced throughout. Instead of hardcoding #3B82F6 because that's what Figma shows, the skill requires mapping to the project's existing --color-primary or blue-500 token. This ensures that design changes propagate correctly through the theme system.

Example workflow

You share a Figma link for a new dashboard page. The agent will:

  1. Use Figma MCP to read the frame: identify a header, stat cards, a data table, and a chart.
  2. Check the project: find existing Card, Table, and PageHeader components.
  3. Extract tokens: note the 24px grid spacing, the specific heading font sizes, and the chart color palette.
  4. Build the page structure using existing components, creating only a new StatCard variant of the existing Card.
  5. Apply styling using project tokens: gap-6 for the grid, text-2xl font-semibold for stat values.
  6. Compare the result against the Figma screenshot and adjust alignment details.

Tips

  • Always start by inventorying existing components -- this is where most time savings come from
  • If the Figma design uses colors or spacing not in the project's token system, ask the designer before adding new tokens
  • For pixel-perfect work, overlay the Figma screenshot on top of the implementation to spot differences
  • Responsive behavior often needs to be inferred from the design -- discuss breakpoint behavior with the designer when unclear

Best with tools

    Related MCP servers

    • No linked MCP servers yet.

    Related skills

    Claude Developer Platform

    Build applications with the Claude API and Anthropic SDK covering tool use, streaming, system prompts, and the Agent SDK.