What problem does it solve? Translating a codebase's design tokens and components into a structured Figma design system is a long, error-prone process involving dozens of Plugin API calls, and one-shot attempts produce broken or incomplete results. ## Core Features & Use Cases - Phased Workflow Orchestration: Enforces a five-phase build (Discovery, Foundations, File Structure, Components, Integration/QA) with mandatory user checkpoints between phases. - Token Architecture: Creates variable collections with modes (Light/Dark), primitive-to-semantic aliasing, scopes, and code syntax for Dev Mode round-tripping. - Component Generation: Builds components with auto-layout, full variable bindings, variant matrices via combineAsVariants, and TEXT/BOOLEAN/INSTANCE_SWAP properties. - State Management & Recovery: Maintains a persistent state ledger on disk with sharedPluginData tagging for idempotent, resumable long-running builds. - Use Case: Given a React codebase with CSS custom properties and a Button component, the skill extracts tokens, creates Figma variable collections, then builds a Button component set with Size × Style × State variants bound to those tokens. ## Quick Start Ask the AI to build a Figma design system from your codebase using the figma-generate-library skill, starting with a discovery phase and plan approval.
