Figma Implement Design
Turn Figma frames into repo UI code with design tokens and pixel-accurate fidelity via the Figma MCP workflow.
Overview
Figma Implement Design is an agent skill for the Build phase that translates Figma designs into production application code with 1:1 visual fidelity using the Figma MCP workflow.
Install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-implement-designWhat is this skill?
- Structured workflow for Figma MCP → production code with 1:1 visual fidelity
- Design-token usage and integration boundaries with other Figma skills (use, generate, Code Connect, rules)
- Triggered by Figma URLs, implement design, generate code, and component-build requests
- Deliverable is code in the user's repository—not canvas edits inside Figma
- Prerequisite gate: Figma MCP connected before running the flow
Adoption & trust: 4k installs on skills.sh; 1.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have Figma URLs and MCP access but no consistent agent steps to land token-aware, faithful UI code in your repository.
Who is it for?
Implementing UI from shared Figma links into React/Vue/etc. codebases when Figma MCP is already wired in your agent.
Skip if: Editing nodes inside the Figma canvas, generating marketing pages only inside Figma, or mapping components without writing app code—use the sibling figma-* skills instead.
When should I use this skill?
Implementing UI from Figma files; user says implement design, generate code, implement component; provides Figma URLs; or asks for components matching Figma specs.
What do I get? / Deliverables
You get production-ready components or screens in your repo aligned to Figma specs and tokens, with clear handoffs to sibling skills when the task is canvas-only or Code Connect-only.
- Production-ready UI code in the user repository
- Components aligned to Figma layout and design tokens
Recommended Skills
Journey fit
How it compares
Repo implementation workflow via Figma MCP—not the same as figma-use for in-Figma edits or a generic screenshot-to-code guess.
Common Questions / FAQ
Who is figma-implement-design for?
Solo frontend builders and full-stack indies using Claude Code, Cursor, or similar agents with Figma MCP who need faithful code from design files.
When should I use figma-implement-design?
Use it in Build when you have a Figma URL and want components or pages implemented in your codebase with design tokens and visual parity.
Is figma-implement-design safe to install?
It orchestrates MCP calls to Figma and writes to your repo; review the Security Audits panel on this page and scope MCP tokens to least privilege.
SKILL.md
READMESKILL.md - Figma Implement Design
# 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](../figma-use/SKILL.md). - If the user asks to build or update a full-page screen in Figma from code or a description, switch to [figma-generate-design](../figma-generate-design/SKILL.md). - If the user asks only for Code Connect mappings, switch to [figma-code-connect](../figma-code-connect/SKILL.md). - If the user asks to author reusable agent rules (`CLAUDE.md`/`AGENTS.md`), switch to [figma-create-design-system-rules](../figma-create-design-system-rules/SKILL.md). ## 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", nod