How to Add Variants in Figma

Variants in Figma are a game-changer for component design. They allow you to package multiple states, styles, or versions of a component into a single, unified set. Whether you’re designing buttons with hover and disabled states, toggles with on/off positions, or cards in different layouts—variants simplify your workflow and keep your design system organized.

This guide walks you through how to create, label, and use variants effectively in Figma.

✅ What Are Variants?

Variants are grouped versions of a component—like “Primary” vs “Secondary” buttons, or “Checked” vs “Unchecked” checkboxes—combined into a single component set.

Instead of having many standalone components, variants let you switch between them using component properties, making it easier for designers (and developers) to understand, maintain, and scale a UI.

🛠️ How to Create Variants in Figma

Option 1: Starting from Scratch

Design Your Base Component
Create a component as usual using Cmd/Ctrl + Alt + K.
Create Additional States or Styles
Duplicate your base component and edit the visual changes (e.g., hover color, different label, icon visibility).
Select All Variations
Use Shift to select all the related components.
Combine as Variants
Right-click and choose “Combine as Variants” — this creates a Variant Set inside a single frame.

Option 2: Add a Variant to an Existing Component Set

Select the Variant Set (you’ll see it as a purple dashed frame).
In the right-hand panel, click “+” under the Variants section.
A new blank variant appears—customize it as needed.

✏️ Naming Variant Properties

Once you’ve created variants, Figma lets you define properties like:

State: Default, Hover, Disabled
Size: Small, Medium, Large
Theme: Light, Dark

How to Set Them:

Select the Variant Set.
In the right-hand panel under “Properties”, click “+ Add new property.”
Name the property (e.g., State) and choose values (e.g., Default, Hover).

These properties show up in the Instance panel when you use the component—making it easy to toggle between styles.

🧠 Best Practices for Variants

Keep names consistent: Use logical values like “Default,” “Hover,” “Pressed,” etc.
Use Boolean properties (like “Show Icon: true/false”) for simple toggles.
Group by function, not by look—e.g., all button states together.
Use Auto Layout inside variants for consistent spacing and alignment.

🤹 How Variants Work in Prototyping

You can create interactions between variants in Prototype mode, such as:

On hover → switch to Hover variant
On click → switch to Pressed variant

This makes your prototypes feel dynamic and realistic with minimal effort.

🔄 Updating Variants

To change or add new variants later:

Select the Variant Set
Click the “+” to add new versions
Or duplicate and drag in a new component, then update its properties

All instances will now have access to the new variant option.

Final Thoughts

Variants are one of the most powerful features in Figma for creating clean, flexible, and scalable components. By combining visual states and styles into a single component set, you reduce clutter, streamline updates, and make your design system easier to use and maintain.

Mastering variants means mastering consistency—and your future self (and team) will thank you.