figma-generate-library
Guides an AI agent through building a complete Figma design system from a codebase.
Setup & Installation
What 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
Similar Skills
gif-sticker-maker
Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.
wpds
Assists with building UI components and interfaces using the WordPress Design System (WPDS).
accessibility
Audits and improves web accessibility against WCAG 2.
algorithmic-art
Generates algorithmic and generative art using p5.