Component variants in Figma - Step-by-Step Guide

Introduction

Component variants let you group similar design elements into one component with different versions. This helps keep your design organized and makes switching between styles or states easy.

When you want to create buttons with different colors and sizes but keep them in one place.

When you need to show different states of a form input like normal, hover, and error.

When you want to manage icons that have multiple styles like filled and outlined.

When you want to quickly swap between different layouts of the same component.

When you want to reduce clutter by combining similar components into one.

Steps

Step 1: Select multiple components or frames that represent different versions of the same element

- Canvas

The selected components are highlighted

💡 Hold Shift to select multiple items

Step 2: Right-click the selection and choose 'Combine as Variants'

- Context menu

A single component set is created containing all selected variants

💡 You can also use the top menu: Object > Combine as Variants

Step 3: Select the new component set

- Layers panel or Canvas

Properties panel shows variant properties

💡 You will see a new 'Variants' section in the right sidebar

Step 4: Rename variant properties and values to describe differences (like 'State' with values 'Default', 'Hover')

- Properties panel under Variants

Variants are clearly labeled for easy selection

💡 Use simple, clear names to avoid confusion

Step 5: Drag the component set instance onto your design

- Assets panel

An instance of the variant component appears on the canvas

💡 Use the right sidebar to switch between variant options

Before vs After

Before

Multiple separate components for each button style clutter the layers panel

After

One component set with variants for each button style simplifies the layers panel and makes switching styles easy

Settings Reference

Variant properties

📍 Properties panel when a component set is selected

To describe the differences between variants like color, size, or state

Default: Property named 'Property 1' with values 'Variant 1', 'Variant 2', etc.

Instance variant selection

📍 Right sidebar when an instance of a variant component is selected

To choose which variant version the instance shows

Default: First variant value selected

Common Mistakes

Not naming variant properties clearly

It becomes hard to know what each variant option means when switching

Use meaningful names like 'State' or 'Size' and values like 'Default', 'Hover', 'Small', 'Large'

Combining unrelated components as variants

Variants should be versions of the same component, mixing different components causes confusion

Only combine components that represent different states or styles of the same element

Summary

Component variants group similar components into one organized set.

They let you switch between styles or states easily in your design.

Name variant properties clearly to keep your design understandable.

Practice

1. What is the main purpose of using component variants in Figma?

easy

A. To create completely unrelated designs in one file

B. To delete unused components automatically

C. To export designs faster without grouping

D. To group similar designs for easy switching between them

Solution

1. Step 1: Understand component variants concept

   Component variants group similar designs, like buttons with different colors or sizes, into one organized set.

2. Step 2: Identify the main benefit

   This grouping allows easy switching between variants without searching multiple components.

3. Final Answer:

   To group similar designs for easy switching between them -> Option D

4. Quick Check:

   Component variants = Group similar designs [OK]

Hint: Variants group similar designs for quick switching [OK]

Common Mistakes:

• Thinking variants create unrelated designs
• Confusing variants with export features
• Believing variants delete components

2. Which of the following is the correct way to create a variant in Figma?

easy

A. Select components and click 'Combine as Variants' in the right panel

B. Drag components into a new frame without grouping

C. Export components as PNG and re-import as variants

D. Rename components with the same name manually

Solution

1. Step 1: Recall variant creation method

   In Figma, you select multiple components and use the 'Combine as Variants' button in the right sidebar to create variants.

2. Step 2: Eliminate incorrect options

   Dragging into frames or exporting/importing does not create variants. Renaming alone doesn't group components as variants.

3. Final Answer:

   Select components and click 'Combine as Variants' in the right panel -> Option A

4. Quick Check:

   Combine as Variants button = create variants [OK]

Hint: Use 'Combine as Variants' button after selecting components [OK]

Common Mistakes:

• Trying to create variants by dragging into frames
• Exporting and re-importing components
• Assuming renaming groups variants

3. Given a button component with variants for color (red, blue) and size (small, large), how many variants will be created?

medium

A. 2

B. 4

C. 6

D. 8

Solution

1. Step 1: Calculate variants from properties

   Each property has options: color (2) and size (2). Total variants = 2 * 2 = 4.

2. Step 2: Confirm variant count

   All combinations of color and size create 4 unique variants.

3. Final Answer:

   4 -> Option B

4. Quick Check:

   2 colors x 2 sizes = 4 variants [OK]

Hint: Multiply options count for each property [OK]

Common Mistakes:

• Adding instead of multiplying options
• Counting only one property options
• Confusing variants with components

4. You tried to create variants but Figma shows an error. Which of these is a likely cause?

medium

A. Components have different names and are not selected together

B. You selected components and clicked 'Combine as Variants'

C. All components have the same properties and values

D. You grouped components inside a frame before combining

Solution

1. Step 1: Understand variant creation requirements

   Components must be selected together and have compatible names to combine as variants.

2. Step 2: Identify error cause

   If components have different names and are not selected simultaneously, Figma cannot combine them as variants.

3. Final Answer:

   Components have different names and are not selected together -> Option A

4. Quick Check:

   Different names + no selection = error [OK]

Hint: Select components with similar names before combining [OK]

Common Mistakes:

• Assuming grouping inside frames creates variants
• Thinking clicking combine always works
• Ignoring component names mismatch

5. You have a component with variants for state (default, hover, pressed) and color (green, yellow). You want to add a new size property with values small and medium. How many total variants will you have after adding size?

hard

A. 9

B. 6

C. 12

D. 5

Solution

1. Step 1: Calculate existing variants

   Current variants = state (3) x color (2) = 6 variants.

2. Step 2: Add new size property

   Adding size with 2 values multiplies variants: 6 x 2 = 12 total variants.

3. Final Answer:

   12 -> Option C

4. Quick Check:

   3 states x 2 colors x 2 sizes = 12 variants [OK]

Hint: Multiply all property options for total variants [OK]

Common Mistakes:

• Adding instead of multiplying property options
• Forgetting to multiply new property options
• Counting only existing variants without new property