Agent skill · software engineering · openai
figma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
Why this skill is useful
Adds a structured workflow and specific commands for translating Figma designs into production-ready code, which the AI wouldn't reliably generate on its own.
What it needs
Requires figma account access. About 6k tokens when loaded. Last updated 2026-07-14. 24,594 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. Skill Boundaries Use this skill when the deliverable is code in the user's repository. If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use. If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design. If the user asks only for Code Connect mappings, switch to figma-code-connect-components. If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules. 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 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 openai/figma-implement-design