Figma Implement Design
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
|
About
The figma implement design skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "figma to code"; "implement figma"; "figma fidelity"; "1:1 figma". Reference commands include open https://github.com/figma/skills. Use when developers or agents need structured guidance for figma implement design tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "figma to code" "implement figma" "figma fidelity" "1:1 figma" Upstream: https://github.com/figma/skills Category: `figma` |
- "figma to code"
- "implement figma"
- "figma fidelity"
- "1:1 figma"
- Upstream: https://github.com/figma/skills
Figma Implement Design by the numbers
- 1,808 all-time installs (skills.sh)
- +130 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #147 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
figma-implement-design capabilities & compatibility
- Capabilities
- "figma to code" · "implement figma" · "figma fidelity" · "1:1 figma" · upstream: https://github.com/figma/skills
- Use cases
- planning
What figma-implement-design says it does
"figma to code"
npx skills add https://github.com/nexu-io/open-design --skill figma-implement-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
How do I handle figma implement design tasks with agent guidance?
|
Who is it for?
Teams needing documented figma implement design workflows.
Skip if: Generic advice without reading bundled docs.
When should I use this skill?
|
What you get
Structured workflow from figma implement design documentation applied to the user request.
- production-ready frontend code
- design-faithful UI components
By the numbers
- Targets 1:1 visual fidelity between Figma frames and generated code
- Lists 4 trigger phrases including figma to code and 1:1 figma
Files
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/skillsThen 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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick figma-implement-design when pixel-accurate Figma handoff matters; use generic frontend skills when design source files are unavailable.
FAQ
What does figma implement design do?
|
When should I invoke figma implement design?
|
What are key capabilities?
"figma to code"
Is Figma Implement Design safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.