figma-generate-library
nexu-io/open-design
Build and sync professional design system libraries in Figma from your codebase.
What is figma-generate-library?
Generates or updates a design system library in Figma directly from your codebase components, keeping your Figma source of truth synchronized with shipped code. Use this when you need to maintain consistency between your design system and live components.
- Generate Figma library components from codebase source
- Update existing Figma libraries with code changes
- Maintain design-to-code synchronization
- Create professional-grade design system documentation in Figma
- Keep Figma as the single 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 design file
- Codebase with component definitions
- Figma API credentials or authentication
How to use figma-generate-library
- 1.Install the skill using the provided npm command
- 2.Authenticate with your Figma workspace
- 3.Point the skill to your codebase component directory
- 4.Configure mapping between code components and Figma library structure
- 5.Run the skill to generate or update your Figma library
- 6.Review generated components in Figma and adjust as needed
Use cases
- Sync React component library to Figma design tokens and components
- Update design system library when shipping new component versions
- Generate Figma documentation from TypeScript component definitions
- Maintain design consistency across multiple product teams
- Automate design library updates in CI/CD workflows
- Design system maintainers
- Product designers working with component libraries
- Frontend engineers managing design-to-code workflows
- Design ops teams
- Cross-functional teams maintaining shared design systems
figma-generate-library FAQ
The skill works with component-based codebases. Refer to the upstream GitHub repository for specific language and framework support details.
The skill updates existing libraries; review the upstream documentation for options to create new libraries or preserve manual edits.
Run it whenever you ship new components or make breaking changes to existing ones, or integrate it into your CI/CD pipeline for automated syncing.
Configuration options are available in the upstream bundle. Check the GitHub repository for customization guides and examples.
The skill handles standard component properties; consult the upstream documentation for handling advanced cases or custom metadata.
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 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-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-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.