figma-generate-library
Builds or updates design libraries in Figma from code. Keeps the design in sync with developed components.
What it does
This tool helps create or update a design system component library in Figma using the code you already have. It's useful for ensuring the design in Figma always matches what has been delivered in your project.
When to use it
- ✓When you want to create a new component library in Figma from code.
- ✓When you need to synchronize your code components with Figma.
- ✓To keep 'Figma as the source of truth' updated with released components.
Example of what to ask your AI
“Create a Figma library from my code components.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool analyzes your component code and transforms it into visual elements within Figma. It ensures that what's in Figma accurately reflects what's in the code.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill figma-generate-libraryOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/figma-generate-library/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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.
FAQ
What is a design system library in Figma?
It's an organized collection of visual components (buttons, text fields, etc.) that can be reused across projects to maintain visual consistency.
Why is it important to sync Figma with code?
It ensures designers and developers are working with the same component versions, preventing errors and rework.
Do I need to know how to code to use this?
No, the tool is designed for design system managers, even if they don't code. You just need to have the component code available.
Details
Original description by the author
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.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #709
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC