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, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and
Security Assessment
Detected risks:
About figma-generate-library
The figma-generate-library skill enables you to build or update professional-grade design systems in Figma that accurately reflect your codebase. It orchestrates complex, multi-phase workflows spanning 20–100+ Figma Plugin API calls to create variables, tokens, component libraries, theming systems, and comprehensive documentation. This skill addresses the challenge of maintaining consistency between code and design by providing structured workflows that mirror real-world design systems like Material 3, Polaris, and Figma UI3.
The skill operates through a mandatory phased approach: Discovery (codebase analysis and planning), Foundations (variables and tokens), File Structure (page organization and documentation), and Components (individual component creation with variants and bindings). Each phase includes built-in checkpoints to ensure quality and prevent expensive rework. It handles everything from primitive color tokens to complex component variant sets, mode-aware theming (light/dark), proper variable scoping, code syntax mapping, and auto-layout configurations.
This skill is designed for teams building or maintaining design systems, product designers syncing Figma with frontend code, design system engineers establishing single sources of truth, and developers who need to generate production-quality Figma components from their codebase. It enforces best practices learned from enterprise design systems, preventing common pitfalls like creating components before tokens, skipping variable scopes, or attempting to build everything in one operation. The skill must be used alongside the figma-use skill, which provides the underlying Plugin API syntax and execution rules.
FAQ
Can I create a single component with this skill?
Yes, but even single components require proper foundations. The skill will guide you through creating necessary variables and tokens first, then building the component with correct variant states and variable bindings to ensure production quality.
What's the difference between figma-generate-library and figma-use?
figma-generate-library provides design system domain knowledge and workflow orchestration (what to build and in what order), while figma-use provides Plugin API syntax rules (how to call the API). Both must be loaded together for any design system work.
How many Figma API calls does a typical design system require?
A complete design system typically requires 20–100+ use_figma calls across multiple phases with user checkpoints. This is intentional — breaking operations into small validated units prevents expensive mistakes and ensures quality at each step.
Can I skip the Discovery phase to save time?
No. Skipping or reordering phases causes structural failures. Discovery ensures you extract correct tokens from code, inspect existing Figma assets, resolve conflicts, and lock scope before any creation. This prevents rework and ensures code-Figma consistency.
Does this work with existing Figma files or only new ones?
Both. The skill includes inspection capabilities to analyze existing Figma files, search subscribed libraries for reusable assets, and reconcile gaps between code and Figma. It can update or extend existing design systems while preserving working patterns.
All Files
17 filesInstall figma-generate-library
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
figma/mcp-server-guide