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 reconci

Installs: 4.5K; on skills.sh
Stars: 2.1K; on GitHub
Files: 15; besides SKILL.md
Updated: Oct 2026; last repo commit

Install figma-generate-library

Claude Code

Copy this prompt.

Install the figma-generate-library skill in Claude Code. Run this command:

npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-library

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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 design token bindings to be production-quality. 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.

Sections in SKILL.md

1. Scope and Completion Contract
Definition of done
Scope changes
2. Scoped Workflow
Tokens / foundations
Single component or family
Full library / design system
Reconciliation / update
3. Critical Rules
4. State Management (Required for Long Workflows)
5. Library Discovery and search_design_system — Reuse Decision Matrix
6. Decision Forks
7. Naming Conventions
8. Token Architecture
9. Anti-Patterns
10. Reference Docs

Information

updated Nov 2, 2026

Repository: figma/mcp-server-guide
Folder: skills/figma-generate-library

figma/mcp-server-guide skills.sh