Figma Generate Library
Generate or refresh a Figma component library from your repo so design files match what you actually ship.
Overview
figma-generate-library is an agent skill most often used in Build (also Operate) that builds or updates a Figma design system library from your codebase to keep design files in sync with shipped components.
Install
npx skills add https://github.com/nexu-io/open-design --skill figma-generate-libraryWhat is this skill?
- Build or update a professional-grade Figma design system library from a codebase
- Keeps Figma as the visual source of truth aligned with shipped components
- Curated upstream workflow from Figma’s official skills/MCP guide
- Trigger phrases: figma library, design system library, sync figma, figma from codebase
- Install the upstream Figma skills bundle for full scripts and references
Adoption & trust: 786 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Figma library lags behind the repo, so specs and handoffs reference components that no longer exist in production.
Who is it for?
Solo builders shipping component-based SaaS or apps who already use Figma and want automated library generation from code.
Skip if: Teams with no Figma workflow, pure marketing-only sites without a shared component library, or projects that only need one-off mocks with no sync expectation.
When should I use this skill?
User mentions figma library, design system library, figma from codebase, or sync figma.
What do I get? / Deliverables
You get an updated Figma library structure mapped from the codebase so agents and designers work from the same component truth as engineering.
- Updated or new Figma design system library structure aligned to codebase components
- Documented handoff path via upstream Figma skills assets
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the workflow turns codebase components into a Figma design-system source of truth. Frontend is where UI components and design tokens live—the skill bridges shipped UI to Figma libraries.
Where it fits
After extracting a shared button and card package, invoke the skill to materialize matching Figma components before the next sprint’s UI work.
Pre-release, run a sync pass so launch screenshots and marketing assets reference library components that match the tagged build.
Post-refactor, refresh the Figma library so support and future agents do not spec deleted patterns.
How it compares
Use for codebase-to-Figma library sync, not as a substitute for Figma MCP live editing or generic UI mockup chat.
Common Questions / FAQ
Who is figma-generate-library for?
Indie and solo builders (and small teams) who maintain a Figma design system tied to a real frontend codebase and need the library to reflect shipped UI.
When should I use figma-generate-library?
During Build when standing up or extending a design system from components; before Ship when you want design specs aligned for review; and during Operate/iterate when syncing after refactors—trigger with phrases like “figma library” or “sync figma.”
Is figma-generate-library safe to install?
Treat it like any third-party skill: review the Security Audits panel on this Prism page and inspect the upstream Figma skills repo before granting filesystem or network access to your agent.
SKILL.md
READMESKILL.md - Figma Generate Library
# 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: ```bash # 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.