How to Create Button States in Figma
StateBuilder generates all interaction states from your base button design. Define state rules once, then apply them to every button variant automatically.
The Problem
Creating button states manually is tedious and error-prone
- Each button variant needs 5-6 states: Default, Hover, Active, Focus, Disabled
- Multiply by sizes and styles: Primary, Secondary, Ghost in Small, Medium, Large
- Maintaining consistency across 50+ button variants is exhausting
- Missing states cause incomplete developer specs
Single state
1 button variant (Default only)Complete state set
6 button variants (Default, Hover, Active, Focus, Disabled, Loading)Step-by-Step Solution
How to Create Button States in Figma
1
Select your base button
Select the default state of your button component. StateBuilder uses this as the source for generating other states.
💡
Pro tip: Make sure your base button uses proper auto-layout and design tokens.
2
Configure state rules
Define how each state differs from default: Hover lightens fill 10%, Active darkens 5%, Disabled reduces opacity to 50%.
💡
Pro tip: Save state rules as presets to apply the same logic to future components.
3
Generate states
Click Generate to create all configured states as new variants. StateBuilder adds them to your component set with proper naming.
💡
Pro tip: Review generated states and tweak if needed - StateBuilder gets you 90% there.
Why Use StateBuilder?
Generate 5+ button states in seconds
Consistent state rules across all buttons
Proper variant structure for prototyping
Complete specs for developers
Reusable state presets
Frequently Asked Questions
Common Questions About Create Button States in Figma
What states does StateBuilder generate?
Default, Hover, Active/Pressed, Focus, Disabled, and optionally Loading. You can customize which states to include.
Does it work with existing button components?
Yes. Select your existing button component and StateBuilder adds new states as additional variants.
Can I customize the state transformations?
Absolutely. Define custom rules like "Hover: fill lightness +10%" or "Disabled: opacity 40%".
Ready to Create Button States in Figma?
Auto-generate component states and documentation specs. Install StateBuilder for free and start in seconds.