figma-implement-design
nexu-io/open-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
What is figma-implement-design?
Converts Figma design frames directly into production-ready code while maintaining visual accuracy. Use this skill 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 or frames
- Figma MCP server integration
How to use figma-implement-design
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill figma-implement-design
- 2.Invoke the skill by name (figma-implement-design) or use trigger phrases like 'figma to code' or 'implement figma'
- 3.Provide the agent with Figma frame references or design URLs
- 4.The agent will generate production-ready code matching the design
Use cases
- Converting a Figma component library into React components
- Implementing a complete UI design from Figma into HTML/CSS/JavaScript
- Automating the design-to-code handoff process in a design system
- Translating Figma prototypes into functional frontend code
- Frontend developers
- Design system maintainers
- Product teams using Figma for design handoff
- Agents automating 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.
Yes, the skill maintains 1:1 visual fidelity, which includes design tokens and styling from the original Figma design.
The skill is designed for design-to-code translation; complex interactions may require additional frontend agent configuration.
Inspect the upstream README at https://github.com/figma/skills for complete paths, assets, and references.
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 OpenDesign 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-style editorial charts with staggered reveal animation and professional typography.
frame-flowchart-sticky
SVG curve connectors and sticky-note nodes for whiteboard-style flowchart frames.
frame-glitch-title
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk aesthetics.
frame-light-leak-cinema
Film light leaks, grain, and letterbox framing for cinematic video openings and chapter cards.