{"slug":"figma-implement-design-2","title":"figma-implement-design","summary":"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","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-05T21:53:02.221426Z","repo":{"url":"https://github.com/VoDaiLocz/kilo-kit-mcp","stars":27,"forks":3,"license":"Apache-2.0","updatedAt":"2026-09-13T09:11:19Z"},"bodyHtml":"
\n

name: \"figma-implement-design\"\ndescription: \"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.\"

\n

Implement Design

\n

Overview

\n

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.

\n

Prerequisites

\n\n

Required Workflow

\n

Follow these steps in order. Do not skip steps.

\n

Step 0: Set up Figma MCP (if not already configured)

\n

If any MCP call fails because Figma MCP is not connected, pause and set it up:

\n
    \n
  1. Add the Figma MCP:\n\n
    2. \n
  2. Enable remote MCP client:\n\n
    3. \n
  3. Log in with OAuth:\n\n
    4. \n
\n

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.

\n

Step 1: Get Node ID

\n

Option A: Parse from Figma URL

\n

When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.

\n

URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2

\n

Extract:

\n\n

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.

\n

Example:

\n\n

Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)

\n

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.

\n

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.

\n

Step 2: Fetch Design Context

\n

Run get_design_context with the extracted file key and node ID.

\n
get_design_context(fileKey=\":fileKey\", nodeId=\"1-2\")\n
\n

This provides the structured data including:

\n\n

If the response is too large or truncated:

\n
    \n
  1. Run get_metadata(fileKey=\":fileKey\", nodeId=\"1-2\") to get the high-level node map
    2. \n
  2. Identify the specific child nodes needed from the metadata
    3. \n
  3. Fetch individual child nodes with get_design_context(fileKey=\":fileKey\", nodeId=\":childNodeId\")
    4. \n
\n

Step 3: Capture Visual Reference

\n

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

\n
get_screenshot(fileKey=\":fileKey\", nodeId=\"1-2\")\n
\n

This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.

\n

Step 4: Download Required Assets

\n

Download any assets (images, icons, SVGs) returned by the Figma MCP server.

\n

IMPORTANT: Follow these asset rules:

\n\n

Step 5: Translate to Project Conventions

\n

Translate the Figma output into this project's framework, styles, and conventions.

\n

Key principles:

\n\n

Step 6: Achieve 1:1 Visual Parity

\n

Strive for pixel-perfect visual parity with the Figma design.

\n

Guidelines:

\n\n

Step 7: Validate Against Figma

\n

Before marking complete, validate the final UI against the Figma screenshot.

\n

Validation checklist:

\n\n

Implementation Rules

\n

Component Organization

\n\n

Design System Integration

\n\n

Code Quality

\n\n

Examples

\n

Example 1: Implementing a Button Component

\n

User says: \"Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15\"

\n

Actions:

\n
    \n
  1. Parse URL to extract fileKey=kL9xQn2VwM8pYrTb4ZcHjF and nodeId=42-15
    2. \n
  2. Run get_design_context(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\")
    3. \n
  3. Run get_screenshot(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\") for visual reference
    4. \n
  4. Download any button icons from the assets endpoint
    5. \n
  5. Check if project has existing button component
    6. \n
  6. If yes, extend it with new variant; if no, create new component using project conventions
    7. \n
  7. Map Figma colors to project design tokens (e.g., primary-500, primary-hover)
    8. \n
  8. Validate against screenshot for padding, border radius, typography
    9. \n
\n

Result: Button component matching Figma design, integrated with project design system.

\n

Example 2: Building a Dashboard Layout

\n

User says: \"Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5\"

\n

Actions:

\n
    \n
  1. Parse URL to extract fileKey=pR8mNv5KqXzGwY2JtCfL4D and nodeId=10-5
    2. \n
  2. Run get_metadata(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\") to understand the page structure
    3. \n
  3. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs
    4. \n
  4. Run get_design_context(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\":childNodeId\") for each major section
    5. \n
  5. Run get_screenshot(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\") for the full page
    6. \n
  6. Download all assets (logos, icons, charts)
    7. \n
  7. Build layout using project's layout primitives
    8. \n
  8. Implement each section using existing components where possible
    9. \n
  9. Validate responsive behavior against Figma constraints
    10. \n
\n

Result: Complete dashboard matching Figma design with responsive layout.

\n

Best Practices

\n

Always Start with Context

\n

Never implement based on assumptions. Always fetch get_design_context and get_screenshot first.

\n

Incremental Validation

\n

Validate frequently during implementation, not just at the end. This catches issues early.

\n

Document Deviations

\n

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

\n

Reuse Over Recreation

\n

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

\n

Design System First

\n

When in doubt, prefer the project's design system patterns over literal Figma translation.

\n

Common Issues and Solutions

\n

Issue: Figma output is truncated

\n

Cause: The design is too complex or has too many nested layers to return in a single response.\nSolution: Use get_metadata to get the node structure, then fetch specific nodes individually with get_design_context.

\n

Issue: Design doesn't match after implementation

\n

Cause: Visual discrepancies between the implemented code and the original Figma design.\nSolution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.

\n

Issue: Assets not loading

\n

Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified.\nSolution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at localhost URLs. Use these directly without modification.

\n

Issue: Design token values differ from Figma

\n

Cause: The project's design system tokens have different values than those specified in the Figma design.\nSolution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.

\n

Understanding Design Implementation

\n

The Figma implementation workflow establishes a reliable process for translating designs to code:

\n

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy.\nFor developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions.\nFor teams: Consistent, high-quality implementations that maintain design system integrity.

\n

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.

\n

Additional Resources

\n\n","files":[{"path":"agents/openai.yaml","sizeBytes":488,"isText":true},{"path":"assets/figma.png","sizeBytes":1612,"isText":false},{"path":"assets/figma-small.svg","sizeBytes":818,"isText":false},{"path":"assets/icon.svg","sizeBytes":964,"isText":false},{"path":"LICENSE.txt","sizeBytes":11358,"isText":true},{"path":"SKILL.md","sizeBytes":11513,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-05T22:00:01.738007Z","sha256":"8A2FD938A2D4A35457B6ECEE0459715867E1020BE164DFDD94861A37396EACC3","sizeBytes":11667},"review":null,"source":{"repositoryUrl":"https://github.com/VoDaiLocz/kilo-kit-mcp","path":"skills/design/figma-implement-design","license":"Apache-2.0","commit":"0448e6c050b84e0c0be0030593bd51cabbce3c81","subtreeSha":"68A623B16D3B8F3FA42E9BE312845B1922B4ECB58250DA78D42DCE0CE4B836E4","lastSyncedAt":"2026-10-05T21:52:59.855581Z"},"reviewedAt":"2026-10-05T22:15:37.785841Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/VoDaiLocz/kilo-kit-mcp/tree/main/skills/design/figma-implement-design"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install vodailocz-kilo-kit-mcp@llmmart"},{"target":"git","command":"git clone https://github.com/VoDaiLocz/kilo-kit-mcp.git"}]}