figma-implement-design
A structured workflow to translate Figma designs into production-ready code using the Figma MCP server.
Install
npx skills add https://github.com/openai/skills --skill figma-implement-designStats
| Total installs | 1,133 |
| Weekly installs | 1.1K |
| GitHub stars | 15.5K |
| First seen | Feb 1, 2026 |
| Source | @openai/skills |
Summary
- Structured seven-step workflow: extract node IDs from Figma URLs, fetch design context and screenshots, download assets, translate to project conventions, and validate against Figma specs
- Integrates with Figma MCP server (remote or desktop) to access layout properties, typography, colors, design tokens, and component structure
- Emphasizes design system reuse, design token mapping, and 1:1 visual parity; includes troubleshooting for truncated responses, asset loading, and token mismatches
- Requires Figma MCP connection and project design system; supports both URL-based and desktop app selection workflows
Tags
Related skills
| Skill | Installs | vs figma-implement-design |
|---|---|---|
| flutter-performance | 1,169 | +36 |
| ux-designer | 1,198 | +65 |
| astro-framework | 1,075 | -58 |
| migrate-oxlint | 1,218 | +85 |
| react-hook-form-zod | 1,231 | +98 |
FAQ
- How many installs does figma-implement-design have?
- figma-implement-design has 1,133 total installs and 1.1K installs this week.
- Where is figma-implement-design hosted?
- figma-implement-design is published by @openai/skills at https://github.com/openai/skills.
- How many GitHub stars does figma-implement-design have?
- figma-implement-design has 15.5K GitHub stars.
- When was figma-implement-design first indexed?
- OrangeBot.AI first indexed figma-implement-design on Feb 1, 2026.
- How do I install figma-implement-design?
- Run: npx skills add https://github.com/openai/skills --skill figma-implement-design