figma-generate-library - Build a Design System in Figma
Build or update a Figma design system from a codebase, including tokens, components, theming, documentation, and code-to-Figma reconciliation.
Tags
Updated: 2026-10-03Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Analyze codebase tokens
- Inspect Figma conventions
- Search reusable design assets
- Plan system scope
- Create variable collections
- Create primitive variables
- Create semantic variables
- Configure variable scopes
- Set variable code syntax
- Create text and effect styles
- Build Figma page structure
- Document design foundations
- Build component variants
- Add component properties
- Bind properties to variables
- Validate component structure
- Capture component screenshots
- Audit accessibility and naming
- Map components with Code Connect
- Persist workflow state
Inputs
- Codebase
- Figma file
- Subscribed libraries
- User scope decisions
- User phase approvals
- Run ID
Outputs
- Figma variables
- Figma styles
- Figma pages
- Figma components
- Component properties
- Code Connect mappings
- Validation screenshots
- Accessibility audit results
- State ledger file
Requirements
- figma-use skill
- Figma MCP access
- use_figma Plugin API access
- Sequential Figma state mutations
- Writable /tmp directory