figma-generate-library
nexu-io/open-design
Build or update a professional-grade design system library in Figma from a codebase.
What is figma-generate-library?
This skill generates or updates a Figma design system library directly from your codebase, keeping your Figma source of truth synchronized with shipped components. Use it when you need to maintain consistency between code and design assets.
- Generate design system components in Figma from codebase definitions
- Update existing Figma libraries with code-driven changes
- Sync shipped components with Figma design tokens and styles
- Maintain a professional-grade design system library
- Keep Figma as the source of truth for design systems
How to install figma-generate-library
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-library- Access to Figma workspace and API credentials
- Codebase with component definitions
- Active agent with skills directory configured
How to use figma-generate-library
- 1.Install the upstream bundle from https://github.com/figma/skills into your agent's skills directory
- 2.Configure your Figma API credentials and workspace access
- 3.Ask the agent to invoke the skill by name (figma-generate-library) or use trigger phrases like 'figma library' or 'sync figma'
- 4.Provide your codebase location and target Figma file details
- 5.Review and publish the generated or updated library in Figma
Use cases
- Automatically populate a Figma library when launching a new design system
- Update component documentation in Figma after shipping code changes
- Sync design tokens and component variants from code to Figma
- Maintain consistency between shipped components and design assets
- Generate Figma components from component library source code
- Design system maintainers
- Product engineers managing component libraries
- Design teams coordinating with engineering
- Teams using Figma as design source of truth
figma-generate-library FAQ
The skill works with component definitions from your codebase. Refer to the upstream repository at https://github.com/figma/skills for specific supported formats and examples.
The skill can update existing libraries. Review the upstream documentation and test in a non-production Figma file first to understand the merge behavior.
Run it whenever you ship significant component changes or want to sync design tokens. Many teams integrate it into their release workflow.
Yes, you need Figma API credentials and appropriate workspace permissions to generate or update libraries.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: figma-generate-library description: | Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components. triggers:
- "figma library"
- "design system library"
- "figma from codebase"
- "sync figma" od: mode: design-system category: figma upstream: "https://github.com/figma/skills"
figma-generate-library
Curated from Figma's MCP server guide.
What it does
Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
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-generate-library) 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-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-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.