figma-generate-library
by figmafigma-generate-library helps you build or update a Figma design system from a codebase with an ordered workflow for tokens, component libraries, documentation, and light/dark theming. Use the figma-generate-library skill when you need a practical guide for Design Systems, not a one-off mockup. It complements figma-use for Plugin API calls.
This skill scores 88/100, which means it is a solid directory listing for users building or updating Figma design systems from code. The repo gives enough workflow structure, references, and scripts for an agent to trigger and execute the skill with much less guesswork than a generic prompt, though users should still expect a multi-step process rather than a one-shot install-and-run experience.
- Strong operational framing: the skill explicitly targets multi-phase design system builds from code, with prerequisites and ordering guidance.
- High workflow leverage: 9 scripts plus 7 reference docs cover discovery, tokens, components, documentation, error recovery, and Code Connect.
- Good triggerability and clarity: frontmatter is valid, the description states when to use it, and the body emphasizes phase-based execution and user checkpoints.
- No install command in SKILL.md, so users may need manual setup or companion-skill loading guidance.
- Heavy workflow scope (20–100+ use_figma calls) means adoption is best for large design-system tasks, not quick ad hoc edits.
Overview of figma-generate-library skill
What figma-generate-library does
figma-generate-library helps you build or update a Figma design system from a codebase with less guesswork. It is best for teams that need variables, semantic tokens, component libraries, documentation pages, and light/dark theming that reflect the source code closely. Unlike a generic prompt, the figma-generate-library skill gives you an ordered workflow for design systems for Design Systems, so you are deciding what to create first, what to defer, and how to keep the file consistent.
Who should use it
Use this skill if you are translating a product codebase into a maintainable Figma library, especially when you need reusable foundations rather than one-off mockups. It fits design systems leads, product designers, design engineers, and agents working on token parity, component publication, or library cleanup. If you only need a single screen or a quick visual concept, this skill is usually too heavy.
Why it is different
The main value of figma-generate-library is orchestration: it assumes multi-step work, checks dependencies, and keeps the build ordered across variables, components, and docs. It is designed to work with figma-use, which handles Plugin API calls, while this skill decides what should be built and in what sequence. That makes the figma-generate-library skill more useful than a plain “create a design system” prompt because it reduces structural mistakes, not just output variance.
How to Use figma-generate-library skill
Install and load the right skills
For figma-generate-library install, add the skill and also load figma-use before any Figma write step. The repository expects the skill context to be present during execution, and the instructions are meant to drive many smaller use_figma calls, not one large pass. In practice, you should treat this as a workflow skill, not a single-command generator.
Start with discovery, not creation
Read SKILL.md first, then inspect references/discovery-phase.md, references/token-creation.md, references/component-creation.md, and references/documentation-creation.md. If you expect failures or an interrupted run, also read references/error-recovery.md. The support scripts are a strong signal that the workflow depends on file inspection, state rehydration, validation, and cleanup rather than blind generation.
Turn a rough goal into a usable prompt
A strong figma-generate-library usage prompt includes the codebase, target framework, what needs to be generated, and what already exists in Figma. Example: “Build tokens and core components for our React app from src/styles/tokens.css and src/components, preserve existing page names, and prioritize Button, Input, and Badge before documentation pages.” That is better than “make a design system” because the skill can map your real constraints into a sequence and avoid overbuilding.
Practical workflow that improves output
Use this figma-generate-library guide pattern: 1) discover token sources and naming conventions, 2) create variables and semantic aliases, 3) build components in dependency order, 4) add documentation, 5) validate and clean up. Preview scripts/inspectFileStructure.js, scripts/createVariableCollection.js, scripts/createComponentWithVariants.js, and scripts/validateCreation.js if you want to understand how the skill thinks about structure and verification. For better output, give the skill the actual token source, existing page names, and any component inventory before asking it to write.
figma-generate-library skill FAQ
Is figma-generate-library only for design systems?
Yes, primarily. The figma-generate-library skill is built for design systems in Figma, especially when you need reusable foundations, component variants, and code-to-design alignment. It is not the best fit for ad hoc layout generation or a single presentation file.
How does it compare with a normal prompt?
A normal prompt may produce a plausible Figma plan, but figma-generate-library adds enforced sequencing, dependency awareness, and recovery logic. That matters when the task spans many nodes, multiple collections, or repeated edits. If you care about consistency across a library, the skill is a better starting point than prompting from scratch.
Do beginners need to know the whole repository?
No. Beginners can use the skill if they can identify the codebase and the desired Figma output. The main beginner risk is under-specifying scope, which leads to partial libraries or mismatched naming. If you are new, start with a small set of tokens and one or two core components before attempting a full library.
When should I not use this skill?
Do not use figma-generate-library if you only need quick visual exploration, a throwaway prototype, or a task that does not depend on code parity. It is also a poor fit when you cannot supply a reliable source of truth for tokens, component names, or theming rules.
How to Improve figma-generate-library skill
Give the skill the highest-value inputs first
The best figma-generate-library results come from concrete source material: token files, theme variables, component directories, and an existing Figma file structure. If you can, provide the exact paths and note which source should win when code and Figma disagree. This reduces ambiguity in naming, mode mapping, and component prioritization.
Specify what matters most to your library
Users usually care most about three things: token fidelity, component consistency, and whether the library is publishable. State your priority up front, such as “match code tokens exactly,” “preserve existing component names,” or “optimize for a clean public asset panel.” Those priorities change how the skill should resolve tradeoffs, especially when the source is incomplete.
Avoid the common failure modes
The most common problems are trying to build too much at once, skipping discovery, and mixing incompatible naming conventions. Another frequent issue is asking for components before the underlying variables exist. If the figma-generate-library skill output feels off, check whether you gave it a token source, a component inventory, and a clear file-state snapshot.
Iterate after the first pass
Treat the first result as a draft library plan, not the final file. Review what was created, then refine by asking for the missing token tiers, the next dependency layer, or cleanup of orphaned nodes. If the initial output is close but not complete, the best follow-up is usually narrower: “Add semantic color modes,” “build Button variants from the existing atom set,” or “document only the foundations already created.”