How to Build Component Variants in Figma
StateBuilder generates variant matrices from your property definitions. Define Size (S, M, L), State (Default, Hover, Disabled), and Theme (Light, Dark), then generate all 18 combinations automatically.
The Problem
Creating all variant combinations manually is time-consuming
- 3 sizes × 4 states × 2 themes = 24 variants to create
- Each variant needs proper naming for design token mapping
- Forgetting one combination breaks the variant picker
- Updates require changing every variant individually
Single component
Base component onlyComplete variant set
24 variants: Size (S/M/L) × State (Default/Hover/Active/Disabled) × Theme (Light/Dark)Step-by-Step Solution
How to Build Component Variants in Figma
1
Define variant properties
Specify the properties your component needs: Size, State, Style, Theme, or custom properties.
💡
Pro tip: Start with the most important properties and expand later.
2
Configure property values
For each property, list the possible values. StateBuilder calculates the total variant count (e.g., 3 × 4 × 2 = 24).
💡
Pro tip: Use design token names for values to ensure code compatibility.
3
Generate variant matrix
Click Generate to create all variant combinations. Each variant is properly named and positioned in a grid for easy navigation.
💡
Pro tip: Review the matrix and delete any combinations that are not needed.
Why Use StateBuilder?
Generate complete variant matrices
Proper naming for all combinations
Visual grid organization
Token-friendly property names
Skip invalid combinations
Frequently Asked Questions
Common Questions About Build Component Variants in Figma
How many variants can StateBuilder generate?
StateBuilder can generate hundreds of variants, though most components need 10-50. Very large matrices may need review for practicality.
Can I exclude certain combinations?
Yes. After generation, delete combinations that do not make sense (e.g., Disabled + Hover might be redundant).
Does it update existing variants?
StateBuilder can add new variants to existing component sets or regenerate everything from scratch.
Ready to Build Component Variants in Figma?
Auto-generate component states and documentation specs. Install StateBuilder for free and start in seconds.