Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
metadata
{"mcp-server":"figma, figma-desktop"}
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.
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.
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.
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.
Parse URL to extract fileKey=pR8mNv5KqXzGwY2JtCfL4D and nodeId=10-5
Run get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") to understand the page structure
Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs
Run get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") for each major section
Run get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") for the full page
Download all assets (logos, icons, charts)
Build layout using project's layout primitives
Implement each section using existing components where possible
Validate responsive behavior against Figma constraints
Result: Complete dashboard matching Figma design with responsive layout.
Best Practices
Always Start with Context
Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.
Incremental Validation
Validate frequently during implementation, not just at the end. This catches issues early.
Document Deviations
If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.
Reuse Over Recreation
Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.
Design System First
When in doubt, prefer the project's design system patterns over literal Figma translation.
Common Issues and Solutions
Issue: Figma output is truncated
Cause: The design is too complex or has too many nested layers to return in a single response.
Solution: Use get_metadata to get the node structure, then fetch specific nodes individually with get_design_context.
Issue: Design doesn't match after implementation
Cause: Visual discrepancies between the implemented code and the original Figma design.
Solution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.
Issue: Assets not loading
Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified.
Solution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at localhost URLs. Use these directly without modification.
Issue: Design token values differ from Figma
Cause: The project's design system tokens have different values than those specified in the Figma design.
Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.
Understanding Design Implementation
The Figma implementation workflow establishes a reliable process for translating designs to code:
For designers: Confidence that implementations will match their designs with pixel-perfect accuracy.
For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions.
For teams: Consistent, high-quality implementations that maintain design system integrity.
By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.
