figma-implement-design
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.
Target: Figma. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Implement Design
- Overview
- Prerequisites
- Required Workflow
- Step 0: Set up Figma MCP (if not already configured)
- Step 1: Get Node ID
- Option A: Parse from Figma URL
- Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)
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. 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) Follow these steps in order. Do not skip steps. If any MCP call fails because Figma MCP is not connected, pause and set it up: 1. Add the Figma MCP: codex mcp add figma --url https://mcp.figma.com/mcp 2. Enable remote MCP client: Set [features].rmcpclient = true in config.toml or run codex --enable rmcpclient 3. 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.
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- davila7/claude-code-templates
- Source file
- cli-tool/components/skills/creative-design/figma-implement-design/SKILL.md
- Fixed revision
- 21be197f100a12b8d0dd9a211cc244c8179f84d3
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: davila7/claude-code-templates · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:43.795Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.