figma-generate-design
nexu-io/open-design
Build or update Figma screens from code or descriptions using design system components.
What is figma-generate-design?
Generate or update Figma design screens directly from code snippets or natural language descriptions. Uses design system components and tokens to translate app pages into visual designs. Useful when you need to quickly prototype UI layouts or keep design files synchronized with code changes.
- Generate Figma screens from code descriptions or snippets
- Update existing Figma designs using design system components
- Translate app pages into Figma using design tokens
- Build screens that align with your design system
- Create visual prototypes from code-based specifications
How to install figma-generate-design
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-design- Access to a Figma workspace
- Design system components set up in Figma
- Figma API credentials or authentication
How to use figma-generate-design
- 1.Install the skill using the provided npm command
- 2.Authenticate with your Figma workspace
- 3.Describe the screen you want to create or provide code snippets
- 4.Invoke the skill with a trigger phrase like 'figma generate design' or 'code to figma'
- 5.Review the generated or updated design in Figma
Use cases
- Convert a React component structure into a Figma mockup
- Generate UI screens from API response schemas or data models
- Update design files when code structure changes
- Prototype new features by describing them and generating Figma layouts
- Maintain design-code consistency by syncing descriptions to visual designs
- Product designers working with developers
- Design system maintainers
- Frontend developers prototyping UI layouts
- Teams practicing design-to-code workflows
figma-generate-design FAQ
It works with any Figma design system that uses design tokens and components. You'll need your design system components already set up in Figma.
It can both build new screens and update existing ones in Figma.
No. The skill handles the API integration. You just describe what you want or provide code, and the skill generates the Figma design.
It accepts code descriptions and snippets. Check the upstream repository for specific language and format support.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-generate-design description: | Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens. triggers:
- "figma generate design"
- "code to figma"
- "screen generation"
- "figma from code" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
figma-generate-design
Curated from Figma's MCP server guide.
What it does
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
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-generate-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-generate-library
Build and sync professional design system libraries in Figma from your codebase.
figma-implement-design
Translate Figma designs into production-ready code with 1:1 visual fidelity.
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.