Agent skill · software engineering · davila7
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.
Why this skill is useful
Adds a comprehensive workflow with executable commands for translating Figma designs into production-ready code, ensuring pixel-perfect accuracy and integration with Figma MCP.
What it needs
Requires codex installed locally. Requires figma account access. About 6k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
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 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: 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. 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. URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2 Extract: File key: :fileKey (the segment after /design/) 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/figma-implement-design