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.