Agent skill · design visual · openai
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.
Why this skill is useful
Provides structured workflows and domain-specific knowledge for building design systems in Figma that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-07-14. 24,594 stars on the source repository.
What this skill does
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+ usefigma 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 usefigma 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 pass skillNames: "figma-generate-library" when calling usefigma as part of this skill. This is a logging parameter — it does not affect execution. --- 1. The One Rule That Matters Most This is NEVER a one-shot task. Building a design system requires 20–100+ usefigma calls across multiple phases, with mandatory user checkpoints between them. Any attempt to create everything in one call WILL produce broken, incomplete, or unrecoverable results. Break every operation to the smallest useful unit, validate, get feedback, proceed. --- 2. Mandatory Workflow Every design system build follows this phase order. Skipping or reordering phases causes structural failures that are expensive to undo. --- 3. Critical Rules Plugin API basics (from usefigma skill — enforced here too): Use return to send data back (auto-serialized). Do NOT wrap in IIFE or call closePlugin. Return ALL created/mutated node IDs in every return value Page context resets each call — always await figma.setCurrentPageAsync(page) at start figma.notify() throws — never use it Colors are 0–1 range, not 0–255 Font MUST be loaded before any text write: await figma.loadFontAsync({family, style}) Design system rules: 1. Variables BEFORE components — components bind to variables. No token = no component. 2. Inspect before creating — run read-only usefigma to discover existing conventions. Match them. 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills openai/figma-generate-library