figma-generate-library
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.
Security Assessment
About figma-generate-library
figma-generate-library is an Open Design catalogue entry describing a skill that builds or updates a professional-grade design system library in Figma directly from a codebase. Its core value proposition is keeping the Figma source of truth in sync with the components that have actually shipped, addressing the common drift between designers' Figma libraries and the components living in production code. By generating or refreshing the library from code, it aims to reduce manual reconciliation work.
As presented here, the entry is a thin advertisement rather than a full implementation. The SKILL.md summarizes the capability, lists trigger phrases such as "figma library", "design system library", "figma from codebase", and "sync figma", and points to the upstream source at Figma's official skills repository. The full workflow, including original assets, scripts, and references needed to parse a codebase and write to Figma, must be installed from github.com/figma/skills into the active agent's skills directory. The catalogue entry contains no executable code itself.
The intended users are design-system maintainers, front-end engineers, and design engineers who want their Figma libraries generated from code rather than hand-maintained. Typical use cases include periodic synchronization runs after component releases and bootstrapping a Figma library for an existing component codebase, once the upstream bundle is installed.
FAQ
What problem does this skill address?
It builds or updates a design system library in Figma from a codebase so the Figma source of truth stays in sync with shipped components.
Does the catalogue entry include the working code?
No. It is a discovery entry within Open Design. The original assets, scripts, and references are in the upstream Figma repository and must be installed separately.
Where do I get the full workflow?
From github.com/figma/skills; install the upstream bundle into your active agent's skills directory to run it.
What phrases trigger this skill?
"figma library", "design system library", "figma from codebase", or "sync figma", or you can invoke it by name.
Install figma-generate-library
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
nexu-io/open-design