How to create button states in Figma using variants
Introduction
Managing separate components for 'Button/Default', 'Button/Hover', and 'Button/Pressed' clutters your assets panel. Variants allow you to group these related components into one single container.
This guide explains how to combine your button states so you can swap them using dropdown controls in the design panel.
Prerequisites
- •Two or more button components (e.g., Default, Hover)
- •Figma file with edit access
Guide Steps
Standardize your button names
Rename your components using slash naming conventions, e.g., 'Button/Primary/Default', 'Button/Primary/Hover'. Ensure all buttons have the same layer structure for smoother overrides.
Combine as variants
Select all the button components you want to group. In the right sidebar, click the 'Combine as variants' button. A dashed purple box will surround them.
Define variant properties
Select the variant component set. In the properties panel, rename 'Property 1' to 'State'. Double-click the values to match your states (Default, Hover, Disabled, etc.).
Use the component
Drag an instance of your button onto the canvas. Look at the right sidebar—you should see a dropdown menu for 'State' that lets you switch between variants instantly.
Common Mistakes to Avoid
- ×Inconsistent layer naming inside different variants, which breaks text overrides when switching states.
- ×Forgetting to include a 'Disabled' state in the initial set.
Pro-Level Design Tips & Workflows
💡 Slashes Nomenclature: Name your master assets with slashes (e.g., button/primary/hover) to allow Figma to automatically group them as states of a single Variant set.
💡 Inherit Properties: Minimize structural variations. Instead of adding new instances, toggles should be defined via Boolean property fields on the original parent layout.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.