Figma Design to Code

Implement Design

Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Skill Boundaries

• Use this skill when the deliverable is code in the user's repository.
• If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use.
• If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design.
• If the user asks only for Code Connect mappings, switch to figma-code-connect-components.
• If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.

Prerequisites

• Figma MCP server must be connected and accessible
• User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
  • :fileKey is the file key
  • 1-2 is the node ID (the specific component or frame to implement)
• OR when using figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)
• Project should have an established design system or component library (preferred)

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Get Node ID

Option A: Parse from Figma URL

When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.

URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2

Extract:

• File key: :fileKey (the segment after /design/)
• Node ID: 1-2 (the value of the node-id query parameter)

Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.

Example:

• URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
• File key: kL9xQn2VwM8pYrTb4ZcHjF
• Node ID: 42-15

Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)

When using the figma-desktop MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.

Note: Selection-based prompting only works with the figma-desktop MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.

Step 2: Fetch Design Context

Run get_design_context with the extracted file key and node ID.

get_design_context(fileKey=":fileKey", nodeId="1-2")

This provides the structured data including:

• Layout properties (Auto Layout, constraints, sizing)
• Typography specifications
• Color values and design tokens
• Component structure and variants
• Spacing and padding values

If the response is too large or truncated:

1. Run get_metadata(fileKey=":fileKey", nodeId="1-2") to get the high-level node map
2. Identify the specific child nodes needed from the metadata
3. Fetch individual child nodes with get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

Step 3: Capture Visual Reference

Run get_screenshot with the same file key and node ID for a visual reference.

get_screenshot(fileKey=":fileKey", nodeId="1-2")

This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.

Step 4: Download Required Assets

Download any assets (images, icons, SVGs) returned by the Figma MCP server.

IMPORTANT: Follow these asset rules:

• If the Figma MCP server returns a localhost source for an image or SVG, use that source directly
• DO NOT import or add new icon packages - all assets should come from the Figma payload
• DO NOT use or create placeholders if a localhost source is provided
• Assets are served through the Figma MCP server's built-in assets endpoint

Step 5: Translate to Project Conventions

Translate the Figma output into this project's framework, styles, and conventions.

Key principles:

• Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
• Replace Tailwind utility classes with the project's preferred utilities or design system tokens
• Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
• Use the project's color system, typography scale, and spacing tokens consistently
• Respect existing routing, state management, and data-fetch patterns

Step 6: Achieve 1:1 Visual Parity

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

• Prioritize Figma fidelity to match designs exactly
• Avoid hardcoded values - use design tokens from Figma where available
• When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
• Follow WCAG requirements for accessibility
• Add component documentation as needed

Step 7: Validate Against Figma

Before marking complete, validate the final UI against the Figma screenshot.

Validation checklist:

• Layout matches (spacing, alignment, sizing)
• Typography matches (font, size, weight, line height)
• Colors match exactly
• Interactive states work as designed (hover, active, disabled)
• Responsive behavior follows Figma constraints
• Assets render correctly
• Accessibility standards met

Implementation Rules

Component Organization

• Place UI components in the project's designated design system directory
• Follow the project's component naming conventions
• Avoid inline styles unless truly necessary for dynamic values

Design System Integration

• ALWAYS use components from the project's design system when possible
• Map Figma design tokens to project design tokens
• When a matching component exists, extend it rather than creating a new one
• Document any new components added to the design system