Name: figma-generate-library
Author: figma

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

Design System Builder — Figma MCP Skill Build professional grade design system assets in Figma that match code. Scale the workflow to the requested deliverable: a token set, one component, a complete library, or a targeted reconciliation. Run the selected path in coherent, safely retryable construction phases with evidence based validation. 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. Scope and Completion Contract Before the first mutation, choose one primary scope from the user's request and record its included deliverables and acceptance checks. Do not silently promote a narrower request into a full library project. Requested scope Required work Excluded unless requested or necessary Tokens / foundations only Requested variables, modes, scopes, code syntax, styles, and any requested specimen sheet Components, component pages, Code Connect, full library navigation Single component or family Inspect and reuse compatible foundations; create only missing tokens the component requires; build requested variants/properties/bindings; validate the component Unrelated foundations, other components, full file skeleton, broad documentation or audits Full library / design system Discovery, foundations, file structure, requested component inventory, documentation, integration, and final QA Work outside the agreed v1 inventory Reconciliation / update Diff code and Figma, then update only affected tokens, styles, components, docs, and dependents Rebuilding valid assets or expanding the library Communicate proportionally: post one concise scope and acceptance checklist before mutations, give updates at meaningful boundaries, and finish with one summary of created or changed objects, validation evidence, and unresolved limitations. Do not repeat unchanged checklists or narrate every API call. Batch related operations when the resulting script stays safe to retry. Split at page context boundaries, hard to recover mutations, or for a targeted retry after an actual failure; never split a working operation only to create a validation checkpoint. Keep mutations sequential. Use structural evidence returned by writes (IDs plus relevant counts, names, and bounds), and run a separate audit only when evidence is missing or a later mutation made it stale. Take one visual review per coherent composition phase and one post fix screenshot only after a targeted visual fix; the latest passing screenshot is final. Definition of done Stop when all conditions for the chosen scope are true: The final deliverable covers the locked inventory and is materially faithful to the applicable source of truth, including requested variant/state coverage, required assets, and in scope review examples. For component tasks, keep main components and construction assets outside the final review frame, and show the requested states as instances in one compact frame. Before stopping, inspect that frame at normal scale and repair clipped, truncated, low contrast, empty, misplaced, or detached content. Required variable scopes, aliases, code syntax, component properties, variants, and bindings are verified. The requested artifact passes applicable structural and visual validation. Confirm requested content is fully visible unless clipping or truncation is intentional; repair defects and recheck only the affected output. Replace placeholders when the source provides the required asset; remove temporary instances, test frames, captures, abandoned artifacts, and unrelated stray nodes. No known defect or unresolved decision prevents the agreed acceptance checks from passing. Report limitations outside the scope without starting extra work. Additional documentation, components, Code Connect mappings, accessibility sweeps, or speculative audits are follow up work unless the chosen scope requires them. Once the definition of done passes, stop. Scope changes If the user changes the deliverable, update the scope and acceptance checklist. Preserve verified work, run only newly applicable steps, and do not retroactively add work from an unselected path. 2. Scoped Workflow Every scope begins with focused discovery: analyze the relevant code, inspect the target Figma assets and conventions, call get libraries before search design system , and resolve code/Figma conflicts before mutation. Batch independent searches and reuse their results. Lock the requested inventory, then run only its path below. Tokens / foundations 1. Create or update the requested collections, modes, primitives, semantic aliases, scopes, and code syntax. 2. Create requested text and effect styles. 3. Create a specimen or documentation page only when requested. 4. Validate counts, mode values, aliases, scopes, syntax, styles, and any requested visual artifact; then stop. Single component or family 1. Inspect and reuse compatible local or library variables, text styles, and effect styles. Create only the missing foundations required by the component. For source defined, library standard, or repeated component roles, create or reuse a shared text or effect style and apply it to every matching component node; keep one off documentation inline. 2. Build the requested base component, variants, properties, bindings, and dependency components. 3. Use a dedicated page when it matches the file convention or the request needs a documented showcase; otherwise place it in the existing component area. 4. Validate variant count, properties, variable bindings, applied text/effect style IDs on representative nodes, structure, and appearance; then stop. Full library / design system 1. Discovery: lock the token and component inventory and print the gap analysis. 2. Foundations: create collections, variables, aliases, scopes, code syntax, and styles. 3. File structure: create the agreed cover, getting started, foundations, component, and utility pages plus requested documentation. 4. Components: build the agreed inventory in dependency order, with properties, bindings, documentation, and validation. 5. Integration and QA: complete Code Connect mappings for the agreed component inventory; audit accessibility, naming, and bindings; and visually validate every agreed page. Reconciliation / update 1. Inventory existing assets and identify exact drift from the current code source. 2. Update affected assets in place, preserving valid names, IDs, bindings, and library structure where possible. 3. Validate the changed assets and their known dependents; then stop. If a required acceptance check fails, fix the scoped defect before continuing. Do not substitute fake assets, approximate typography, broken interactions, or unverified state. This skill's selected workflow, search cadence, validation rules, and definition of done take precedence over broader instructions, checklists, and examples in the references. Load only references needed for the selected path. 3. Critical Rules Plugin API basics (from use figma 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. Call it at most once per script : each component or doc page is its own use figma call. Never loop over figma.root.children and switch pages inside a mutating script — split that work into one focused call per target page (see [figma use → gotchas.md → Set current page once per use figma call](../figma use/references/gotchas.md set current page once per use figma call split multi page work across calls)) 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}) . Use await figma.listAvailableFontsAsync() to discover available fonts and verify exact style strings — if a load fails, query available fonts to find the correct name or a fallback. Design system rules : 1. Foundations before dependent components — reuse compatible existing variables and styles. Create missing foundations before building a component that depends on them; do not recreate valid foundations. 2. Inspect before creating — run read only use figma to discover existing conventions. Match them. 3. Match the file's component organization — full libraries usually use one page per component; tightly related families may share a page. A single component task may use an existing component area instead of creating a library skeleton. 4. Bind visual properties to variables (default) — fills, strokes, padding, radius, gap. Exceptions: intentionally fixed geometry (icon pixel grid sizes, static dividers). When using variables from an earlier use figma call, use the real Figma variable IDs returned by that call to resolve fresh handles before binding; JavaScript references do not persist across calls. With the Plugin API, resolve variables with await figma.variables.getVariableByIdAsync(id) before binding. 5. Scopes on every variable — NEVER leave as ALL SCOPES . Background: FRAME FILL, SHAPE FILL . Text: TEXT FILL . Border: STROKE COLOR . Spacing: GAP . Radii: CORNER RADIUS . Primitives: [] (hidden). 6. Code syntax on every variable — WEB syntax MUST use the var() wrapper: var( color bg primary) , not color bg primary . Use the actual CSS variable name from the codebase. ANDROID/iOS do NOT use a wrapper. 7. Alias semantics to primitives — { type: 'VARIABLE ALIAS', id: primitiveVar.id } . Never duplicate raw values in semantic layer. 8. Position variants after combineAsVariants — they stack at (0,0). Manually grid layout + resize. 9. INSTANCE SWAP for icons — never create a variant per icon. Cap variant matrices: if Size × Style × State 30 combinations, split into sub component. 10. Deterministic naming — use consistent, unique node names for idempotent cleanup and resumability. Track created node IDs via return values and the state ledger. 11. No destructive cleanup — cleanup scripts identify nodes by name convention or returned IDs, not by guessing. 12. Validate from evidence before proceeding — never build on unvalidated work. Rely on the structural evidence returned by writes (IDs plus relevant counts, names, and bounds); run one batched structural audit per coherent phase only when needed to establish the acceptance checks or when a relevant mutation invalidated prior evidence. Take one visual review per coherent composition phase, plus one post fix screenshot only after a targeted visual fix. 13. NEVER parallelize use figma calls — Figma state mutations must be strictly sequential. Even if your tool supports parallel calls, never run two use figma calls simultaneously. 14. Never hallucinate Node IDs — always read IDs from the state ledger returned by previous calls. Never reconstruct or guess an ID from memory. 15. Use the helper scripts — embed scripts from scripts/ into your use figma calls. Don't write 200 line inline scripts from scratch. 4. State Management (Required for Long Workflows) Do not store workflow state on Figma objects. Use deterministic names for discovery and exact returned IDs in the state ledger. Put human readable component purpose and usage guidance in the component or component