Figma Implement Design

What This Skill Does

This skill translates Figma designs into production-ready code, ensuring pixel-perfect accuracy. It integrates with the Figma MCP server and uses design tokens to achieve 1:1 visual parity with the original designs. It is best suited for developers needing to convert Figma components or frames into code.

When to Use

• Implement a button component from a Figma design.
• Convert a Figma frame into a React component.
• Generate code for a modal designed in Figma.
• Translate a Figma icon into an SVG.
• Implement a navigation bar designed in Figma.
• Create code for a form based on a Figma design.

Key Features

• Parses Figma URLs to extract file key and node ID.
• Supports Figma MCP server integration.
• Ensures pixel-perfect accuracy in code implementation.
• Uses design tokens for consistency.
• Supports both URL-based and Figma desktop selection.
• Provides a structured workflow for code generation.

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:

• :file Key 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:

Extract:

File key: :file Key (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), file Key is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only node Id is needed.

Example:

URL: File key: kL9x Qn2VwM8p YrTb4Zc HjF 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(file Key=":file Key", node Id="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:

Run get_metadata(file Key=":file Key", node Id="1-2") to get the high-level node map Identify the specific child nodes needed from the metadata Fetch individual child nodes with get_design_context(file Key=":file Key", node Id=":child Node Id")

Step 3: Capture Visual Reference

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

get_screenshot(file Key=":file Key", node Id="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

Code Quality

Avoid hardcoded values - extract to constants or design tokens Keep components composable and reusable Add Type Script types for component props Include JSDoc comments for exported components

Examples

Example 1: Implementing a Button Component

User says: "Implement this Figma button component:

Actions:

Parse URL to extract file Key=kL9x Qn2VwM8p YrTb4Zc HjF and node Id=42-15 Run get_design_context(file Key="kL9x Qn2VwM8p YrTb4Zc HjF", node Id="42-15") Run get_screenshot(file Key="kL9x Qn2VwM8p YrTb4Zc HjF", node Id="42-15") for visual reference Download any button icons from the assets endpoint Check if project has existing button component If yes, extend it with new variant; if no, create new component using project conventions Map Figma colors to project design tokens (e.g., primary-500, primary-hover) Validate against screenshot for padding, border radius, typography

Result: Button component matching Figma design, integ