# Figma Generate Library

Build or update a professional-grade design system in Figma from a codebase.

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-generate-library -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-generate-library -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-generate-library -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-generate-library -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design System Builder, Figma MCP Skill

Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20, 100+ `use_figma` calls, enforcing quality patterns from real-world design systems (Material 3, Polaris, Figma UI3, Simple DS).

**Prerequisites**: 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 design system domain knowledge and workflow orchestration.

**Always include `figma-generate-library` in the comma-separated `skillNames` parameter when calling `use_figma` as part of this skill. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-generate-library`).** This is a logging parameter, it does not affect execution.

---

## 1. The One Rule That Matters Most

For every phase, follow this communication contract.

Before starting a phase:
- Post a user-facing checklist titled `Phase N Checklist`.
- Include every task/subtask that will be attempted in that phase.
- Include the phase exit criteria.
- Do not begin mutating work for the phase until this checklist has been posted.

During execution:
- Before each major subsection, post a short update naming the exact section being worked on, using this format:
  `Working on Phase N.X: <section name>`
- Keep updates concise, but make the current work visible.
- When a subsection completes, mark it as completed in the running checklist if the interface supports checklist/status updates; otherwise mention completion in the next progress update.

At the end of each phase:
- Post a `Phase N Summary` with:
  - Completed tasks
  - Created or changed Figma objects
  - Validations performed
  - Decisions or conflicts resolved
  - Remaining risks or follow-ups
- Then show the required phase artifact for that phase and continue automatically.

### Stable Task IDs

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-generate-library/SKILL.md