domains / families / design / figma-implement-design

figma-implement-design

combined

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. 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`.

When to use

• Translate Figma designs into production-ready code
• Implement designs or components that must match Figma specs
• Achieve 1:1 visual parity with Figma designs
• Fetch design context, screenshots, and assets from Figma
• Translate Figma output into project conventions

When not to use

• Tasks not involving Figma URLs or node IDs
• Tasks not requiring implementation of designs matching Figma specs

Skill page

Conflict

The two copies share the same core Figma-to-code workflow (parse node ID, fetch design context, capture screenshot, download assets, translate to project conventions, achieve parity, validate). They diverge on material setup and boundary steps: the openai/skills copy defines explicit skill boundaries and routing to sibling Figma skills, while the Vibe-Skills copy adds a concrete Step 0 for configuring the Figma MCP server in Codex (add MCP, enable rmcp_client, OAuth login, restart). Neither copy is a strict superset of the other, so crowning one would hide a real alternative.