figma-implement-design
nexu-io/open-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
What is figma-implement-design?
This skill converts Figma design frames directly into production-ready code while maintaining exact visual fidelity. Use it when handing off Figma designs to a frontend agent for implementation.
- Translates Figma frames to production-ready code
- Maintains 1:1 visual fidelity with original designs
- Enables direct handoff from design to frontend development
- Integrates with Figma's design system workflows
How to install figma-implement-design
npx skills add https://github.com/nexu-io/open-design --skill figma-implement-design- Access to Figma designs/frames
- Active agent with skills directory configured
How to use figma-implement-design
- 1.Install the upstream bundle from https://github.com/figma/skills into your agent's skills directory
- 2.Invoke the skill by name (figma-implement-design) or use trigger phrases like 'figma to code' or 'implement figma'
- 3.Provide the Figma frame or design reference to the agent
- 4.The agent will generate production-ready code matching the design
Use cases
- Converting a Figma component library into frontend code
- Implementing a complete UI design from Figma frames
- Automating design-to-code handoff in design systems
- Translating responsive layouts from Figma to code
- Frontend developers
- Design system teams
- Product teams using Figma for design handoff
- Agents handling design implementation
figma-implement-design FAQ
The skill generates production-ready code; refer to the upstream Figma skills repository for specific language and framework support.
The skill is designed for Figma frames and design system components. Check the upstream repository for detailed compatibility information.
The skill maintains 1:1 visual fidelity with the original Figma designs.
Yes, it can translate responsive layouts from Figma to code.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-implement-design description: | Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent. triggers:
- "figma to code"
- "implement figma"
- "figma fidelity"
- "1:1 figma" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
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:
# 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.
Related skills
More from nexu-io/open-design and the wider catalog.
figma-use
Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.
flutter-animating-apps
Implement animated effects, transitions, and motion in Flutter apps for native iOS/Android.
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
frame-flowchart-sticky
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
frame-glitch-title
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
frame-light-leak-cinema
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.