Figma Generate Libraryby OpenAI

Figma Generate Library Skill.

Start with the token model, then build reusable components in a controlled sequence.

Figma
Design Systems
Component Libraries

Source Review · Figma Generate LibrarySKILL.md

Task Figma Produces • Figma variable collections, semantic aliases and text or effect styles • Documented reusable components with controlled variant sets • A state ledger and final binding, naming and visual review Before You Start Figma MCP with editable-file access, repository access and the companion figma-use Skill plus helper references.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Build a Figma Library from Code Foundations

Build Figma variables and styles before components, with a saved state record and approval at each phase.

Source-based workflowNot an execution benchmark

The Working Approach

Figma Generate Library is a multi-phase design-system workflow rather than a one-shot screen generator. It compares code, the existing Figma file and subscribed libraries, then locks a defined token and component scope before writing. Variables and styles come before components, so visual properties can be bound to a coherent foundation.

The source pays particular attention to long-running state: created IDs, deterministic names and a saved ledger support resumption without duplicating nodes. Component work includes variant layout, text and boolean properties, icon swaps and documentation. Human checkpoints are part of the workflow, especially when code and Figma disagree; the Skill does not silently decide which system should become authoritative.

Expected Deliverables

Figma variable collections, semantic aliases and text or effect styles
Documented reusable components with controlled variant sets
A state ledger and final binding, naming and visual review

See the Example Brief

From Brief to Review

01
Discover and Lock Scope
Inventory code and Figma assets, search libraries and agree on the exact initial token and component set before creation.
02
Create Foundations
Build primitive and semantic variables, modes, scopes and code syntax, followed by typography and effects. Obtain foundation approval, then create the page structure and foundation documentation and obtain a separate approval before starting components.
03
Build Components Incrementally
Create one component at a time with variable bindings, properties and documentation. Validate structure and appearance, show its screenshot and obtain approval before starting the next component.
04
Reconcile and Audit
Review naming, unresolved bindings and optional Code Connect mappings, using recorded IDs rather than guessing or broad cleanup.

02 When to Use It

When to Use It

Figma MCP with editable-file access, repository access and the companion figma-use Skill plus helper references.

A Good Fit

Code-to-Library AlignmentUseful when implemented tokens and components need a maintainable Figma counterpart.
Controlled Library RepairFits a gap analysis where some assets can be reused, others wrapped and a few rebuilt.

Limits to Check

Not a Single-Call GeneratorThe source explicitly requires staged work and approval checkpoints. A large component library should not be presented as safely created in one operation.
Conflicts Need Ownership DecisionsWhen code and Figma differ, a product or design owner must decide which value or component contract should win.

Bring These Inputs

Code and Figma InventoriesSupply the repository and editable target file, including existing token conventions.
Initial ScopeName the token collections, modes and component families required for the first usable version.
Review OwnershipIdentify who can approve foundations, components and conflicts between existing systems.

03 Decisions That Matter

Decisions That Matter

Semantic Aliases
The source separates raw primitives from mode-aware semantic tokens instead of duplicating raw values throughout components.
Resumable Creation
A saved node ledger and deterministic naming make interrupted library work easier to resume without creating duplicates.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the complete curated folder, including helper scripts and phase references. These Beta materials are governed by the Figma Developer Terms. Treat Figma writes and library publishing as separately authorized operations.

Upstream Source File

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP with editable-file access, repository access and the companion figma-use Skill plus helper references.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use figma-generate-library to plan a small library matching our codebase: color tokens with light and dark modes, spacing, typography, Button and Input. Begin with read-only discovery and show conflicts between code and Figma. Wait for scope approval before writes, build foundations first, and preserve a state ledger so each component can be reviewed and resumed independently.

Inspect the Result

Check the actual output against these observable criteria.

Semantic variables alias primitives and carry the intended modes and scopes.
Component variants and icon swaps match the agreed contract without unnecessary combinations.
Recorded IDs, screenshots and binding checks support every completed phase.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: OpenAI
Repository: openai/skills
Skill File: skills/.curated/figma-generate-library/SKILL.md
License: Figma terms
Reviewed Snapshot: 2026-10-07 · 49f948faa925

Editorial Source Summary

Build Figma variables and styles before components, with a saved state record and approval at each phase.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

How is this different from generating a screen?

It builds the reusable foundations and components that screens use, including token collections, variants and documentation.

Can canvas writes run in parallel?

The source explicitly requires sequential Figma mutations so state and returned node IDs remain reliable.

Does it replace an existing library automatically?

No. Discovery and scope approval precede creation, and the reuse strategy prioritizes existing local assets before imports or new components.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills