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.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
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.
https://figma.com/design/:fileKey/:fileName?node-id=1-2
:fileKey is the file key1-2 is the node ID (the specific component or frame to implement)figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)Follow these steps in order. Do not skip steps.
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:
:fileKey (the segment after /design/)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:
https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15kL9xQn2VwM8pYrTb4ZcHjF42-15When 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.
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:
If the response is too large or truncated:
get_metadata(fileKey=":fileKey", nodeId="1-2") to get the high-level node mapget_design_context(fileKey=":fileKey", nodeId=":childNodeId")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.
Download any assets (images, icons, SVGs) returned by the Figma MCP server.
IMPORTANT: Follow these asset rules:
localhost source for an image or SVG, use that source directlylocalhost source is providedTranslate the Figma output into this project's framework, styles, and conventions.
Key principles:
Strive for pixel-perfect visual parity with the Figma design.
Guidelines:
Before marking complete, validate the final UI against the Figma screenshot.
Validation checklist:
User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"
Actions:
kL9xQn2VwM8pYrTb4ZcHjF and nodeId=42-15get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") for visual referenceprimary-500, primary-hover)Result: Button component matching Figma design, integrated with project design system.
User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"
Actions:
pR8mNv5KqXzGwY2JtCfL4D and nodeId=10-5get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") to understand the page structureget_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") for each major sectionget_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") for the full pageResult: Complete dashboard matching Figma design with responsive layout.
Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.
Validate frequently during implementation, not just at the end. This catches issues early.
If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.
Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.
When in doubt, prefer the project's design system patterns over literal Figma translation.
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.
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.
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.
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.
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.