Setup & Installation
npx skills add https://github.com/openai/skills --skill figma-generate-library
https://github.com/openai/skills/tree/main/skills/.curated/figma-generate-library
View on GitHubWhat This Skill Does
Guides an AI agent through building a complete Figma design system from a codebase. Covers the full workflow: extracting design tokens, creating variable collections with light/dark mode support, building component libraries with proper variant matrices, and keeping code and Figma in sync. Works alongside the figma-use skill, which handles the actual Plugin API calls.
Manually building a design system in Figma across 20-100+ operations is error-prone and hard to resume — this skill enforces a phased workflow with checkpoints, state tracking, and idempotency rules that prevent the structural failures common in unstructured approaches.
When to use it
- Generating Figma variable collections from CSS custom properties in an existing codebase
- Building a component library page with typed variants and auto-layout from scratch
- Setting up light and dark mode semantic token aliases tied to primitive values
- Auditing a Figma file for hardcoded fills and replacing them with variable bindings
- Reconciling token naming mismatches between a design file and a production codebase