figma-generate-library
Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation.
Setup & Installation
What This Skill Does
Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation. It bridges the gap between a codebase and a Figma file by creating tokens, semantic variables, and components that reflect what's actually in the code.
Manually wiring variables to components and keeping them in sync with code is error-prone and slow; this skill enforces the correct build order and binding rules so the Figma file stays accurate.
When to use it
- Generating a Figma variable collection from CSS or Tailwind tokens
- Rebuilding a component library to match a recent design system refactor
- Setting up light and dark theme variables tied to semantic tokens
- Auditing a Figma file for naming inconsistencies against code conventions
- Creating component documentation pages from an existing 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.