Figma Variants

Variants group related components together under one name. Instead of having separate components for "Button Default," "Button Hover," "Button Disabled," and "Button Loading," variants package all of them into one component with switchable states.

Why Variants Exist

Without Variants:
  Assets panel shows:
    Button Default
    Button Hover
    Button Disabled
    Button Loading
    Button Small Default
    Button Small Hover
    ... (the list grows fast) ✗

With Variants:
  Assets panel shows:
    Button ← one component with properties to switch between all states ✓

Key Terms

• Component Set – The container that holds all variants of a component.
• Variant – One version inside a component set.
• Property – A dimension you can vary (Size, State, Type, etc.).
• Value – The option within a property (Small/Large for Size, Default/Hover for State).

Creating Variants

Method 1: From Existing Components

1. Create two or more components that represent different states of the same element.
2. Select all of them.
3. Click Combine as variants in the right panel.
4. Figma wraps them in a dashed purple border — the component set.

Method 2: Start with One Component

1. Select your main component.
2. In the right panel, click Add variant.
3. Figma creates a copy next to the original inside a component set.
4. Modify the new variant to represent a different state.

Naming Variant Properties

Each variant in the component set has a name in the format Property=Value. Figma reads this naming pattern to build the property controls.

Variant Names in the Component Set:
  Type=Primary, Size=Large, State=Default
  Type=Primary, Size=Large, State=Hover
  Type=Primary, Size=Small, State=Default
  Type=Secondary, Size=Large, State=Default

Right Panel (when an instance is selected):
  Type:   [Primary ▾]
  Size:   [Large ▾]
  State:  [Default ▾]

A Real Button Example

Button Component Set
  Properties: Type × State

  Type values:  Primary, Secondary, Danger
  State values: Default, Hover, Disabled, Loading

Total variants = 3 × 4 = 12 variants
All accessible from one "Button" component instance

How Variants Appear on Instances

When you drag a component set instance onto your canvas and select it, the right panel shows the property dropdowns. Switch "State" from Default to Hover and the button immediately changes appearance. No need to delete the old instance and drag a new one.

Prototype Interactions with Variants

Variants work powerfully with prototyping. You can link one variant to another with a "Change To" interaction. For example:

• Button Default → on hover → show Button Hover state
• Toggle Off → on click → change to Toggle On
• Input Empty → on focus → change to Input Active

This creates realistic interactive components that behave like real UI elements.

Organizing a Large Component Set

Keep variant names consistent across all properties. Use sentence case (not all caps or camelCase). Arrange variants in the component set in a logical grid — organize rows by one property and columns by another so the visual layout matches the logical structure.

Component Set Grid Layout:
               Default    Hover    Disabled
Primary:      [btn]       [btn]    [btn]
Secondary:    [btn]       [btn]    [btn]
Danger:       [btn]       [btn]    [btn]

Variant Limitations to Know

• All variants in a set must share the same layers structure as closely as possible. Adding extra layers in one variant that do not exist in others can cause unexpected behavior when switching.
• Boolean properties (show/hide) are better handled with Component Properties than with separate variants.
• Very large component sets (50+ variants) can slow down file performance. Reorganize with Boolean or Instance Swap properties to reduce variant count.