figma-generate-library
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Security Assessment
About figma-generate-library
The figma-generate-library skill orchestrates building or updating a professional-grade design system in Figma that matches a codebase, using the Figma Plugin API through use_figma calls. It solves a hard, multi-phase problem: creating variables/tokens, component libraries, light/dark theming, and foundation documentation in the correct order, while reconciling gaps between code and Figma. It is explicitly the WHAT-and-in-WHAT-ORDER companion to the figma-use skill (which supplies the HOW of Plugin API syntax), and both must be loaded together.
The skill enforces that this is never a one-shot task, requiring 20-100+ use_figma calls broken into the smallest useful units with validation and user checkpoints between phases. Its mandatory workflow runs Discovery (analyze codebase and Figma file, search subscribed libraries, lock v1 scope, resolve conflicts), Foundations (variable collections and modes, primitive then semantic variables, scopes, code syntax, effect and text styles), File Structure (page skeleton and foundations docs), Components (one at a time, building base components with auto-layout and variable bindings, variants, component properties, documentation, and validation via metadata and screenshots), and Integration + QA (Code Connect mappings, accessibility, naming, and unresolved-binding audits). Bundled references and scripts support token creation, semantic tokens, component variants, variable binding, documentation pages, orphan cleanup, state rehydration, validation, and Code Connect setup, including three MCP tools for mapping Figma nodes to code implementations.
Target users are design engineers and design-system maintainers who want to generate or reconcile a Figma design system grounded in real code, following patterns from systems like Material 3, Polaris, and Figma UI3, with mandatory human sign-off at each stage.
FAQ
Do I need another skill alongside this one?
Yes. The figma-use skill must also be loaded for every use_figma call; it provides Plugin API syntax rules (return pattern, page reset, ID return, font loading, color range). This skill provides the design-system domain knowledge and workflow orchestration.
Can a design system be built in a single call?
No. The skill is emphatic that this is never a one-shot task; it requires 20-100+ use_figma calls across phases with mandatory user checkpoints. Attempting everything in one call produces broken or unrecoverable results.
What order do the phases follow?
Discovery first (no writes), then Foundations (tokens before components), then File Structure, then Components one at a time in dependency order, then Integration and QA. Skipping or reordering phases causes structural failures that are expensive to undo.
What is Code Connect and how is it used?
Code Connect links a Figma component node to its code implementation so Dev Mode and MCP return real code snippets. The skill documents three MCP tools: add_code_connect_map for single mappings, get_code_connect_map for verification, and send_code_connect_mappings for bulk application, with simple component_browser and template figmadoc mapping tiers.
How is quality enforced?
Through per-phase exit criteria and user checkpoints, plus a final QA pass covering Code Connect finalization, accessibility (contrast, touch targets, focus), naming audits, unresolved-binding audits, and review screenshots of every page.
All Files
22 filesInstall figma-generate-library
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
openai/skills