How to Create Component Variants in Figma Quickly

To create a component variant in Figma, first select multiple components you want to group, then click Combine as Variants in the right sidebar. This groups them into a single component set where you can switch between variants using properties.

Syntax

Creating component variants in Figma involves these steps:

• Select components: Choose two or more components that represent different states or versions.
• Combine as Variants: Click the Combine as Variants button in the right sidebar.
• Set properties: Use the Properties panel to name and manage variant attributes like State or Size.

figma

Select multiple components -> Right sidebar -> Combine as Variants -> Set variant properties

Example

This example shows how to create a button component with two variants: Default and Hover.

text

1. Create two button components: one normal, one with hover style.
2. Select both components.
3. Click 'Combine as Variants' in the right sidebar.
4. Rename the property to 'State' and set values to 'Default' and 'Hover'.
5. Use the variant property to switch between button states in your designs.

Output

A single component set named 'Button' with two variants: 'State=Default' and 'State=Hover'. You can toggle between these in the properties panel when using the component.

Common Pitfalls

Common mistakes when creating variants include:

• Not selecting all components before combining, resulting in incomplete variant sets.
• Failing to name variant properties clearly, which makes switching confusing.
• Mixing unrelated components in one variant set, which reduces clarity.

Always group only related components and use meaningful property names.

text

Wrong:
- Select one component only and try to combine.

Right:
- Select multiple related components before combining as variants.

Quick Reference

Step	Action	Description
1	Select Components	Choose two or more related components to group.
2	Combine as Variants	Click the button in the right sidebar to create a variant set.
3	Name Properties	Define variant properties like 'State' or 'Size'.
4	Use Variants	Switch between variants in your design using property controls.

Key Takeaways

Select multiple related components before combining to create variants.

Use clear property names to organize and switch between variants easily.

Variants help keep your design system organized and speed up design changes.

Avoid mixing unrelated components in one variant set for clarity.

Use the right sidebar's 'Combine as Variants' button to create component variants.