Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
zh_description
用于将 Figma 设计转化为可实现的前端界面和组件。
version
1.0.0
author
seaworld008
source
in-house
source_url
tags
["agent", "ai", "design", "figma", "implement"]
created_at
2026-03-04
updated_at
2026-03-20
quality
5
complexity
intermediate
Implement Design
When to Use
Use this skill when the user wants to:
implement a Figma frame or component in code
translate a Figma node into production-ready UI
match an existing design with high visual fidelity
bridge design tokens and project conventions during implementation
Usage
Recommended flow:
identify target node
-> fetch design context and screenshot
-> gather assets
-> translate into project conventions
-> validate against Figma
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 0: Set up Figma MCP (if not already configured)
If any MCP call fails because Figma MCP is not connected, pause and set it up:
Set [features].rmcp_client = true in config.tomlor run codex --enable rmcp_client
Log in with OAuth:
codex mcp login figma
After successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.
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.
Run get_metadata(fileKey="<fileKey>", nodeId="<nodeId>") 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.
