Figma Implement Design
Hand Figma frames to a frontend agent and get production-ready UI with 1:1 visual fidelity from the design file.
Overview
figma-implement-design is an agent skill for the Build phase that translates Figma designs into production-ready code with 1:1 visual fidelity for frontend handoff.
Install
npx skills add https://github.com/nexu-io/open-design --skill figma-implement-designWhat is this skill?
- Targets 1:1 visual fidelity from Figma frames to code
- Curated from Figma’s official MCP server skills upstream
- Open Design catalog entry with triggers: figma to code, implement figma, figma fidelity
- Designed for direct handoff from design frames to a frontend coding agent
- Install upstream github.com/figma/skills bundle for full assets and references
- 1:1 visual fidelity target stated in skill definition
Adoption & trust: 808 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have approved Figma frames but waste time re-describing layout, spacing, and components to a coding agent.
Who is it for?
Solo builders with Figma as source of truth who want agent-driven implementation aligned to frames and design-system mode.
Skip if: Projects with no Figma file, backend-only work, or teams that need full upstream MCP setup but will not install the Figma skills bundle.
When should I use this skill?
Triggers include “figma to code”, “implement figma”, “figma fidelity”, and “1:1 figma”.
What do I get? / Deliverables
Your agent follows the Figma implement-design workflow so implemented UI matches the design file before you move on to testing and ship.
- Production-ready frontend code matching Figma frames
- Implemented UI components or pages from design handoff
Recommended Skills
Journey fit
Build is where design handoff becomes implemented UI; this skill sits on the frontend shelf rather than launch or grow. frontend is the right subphase because the skill’s job is translating Figma frames into production-ready interface code.
How it compares
Open Design discovery entry plus upstream Figma skill package—not a replacement for the Figma MCP server or design exploration tools.
Common Questions / FAQ
Who is figma-implement-design for?
It is for solo and indie frontend builders who use Figma and want their coding agent to implement screens with fidelity to the design.
When should I use figma-implement-design?
Use it during Build when moving from validated mocks to code, when you say “figma to code” or “1:1 figma,” or when planning a UI slice that must match a specific frame.
Is figma-implement-design safe to install?
It is a curated pointer to upstream Figma skills; review the Security Audits panel on this page and inspect github.com/figma/skills before installing bundles that use network, browser, or MCP access.
SKILL.md
READMESKILL.md - Figma Implement Design
# figma-implement-design > Curated from Figma's MCP server guide. ## What it does Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/figma/skills ``` Then ask the agent to invoke this skill by name (`figma-implement-design`) or with one of the trigger phrases listed in this skill's frontmatter.