Component variants in Figma - Deep Dive

Overview - Component variants

What is it?

Component variants in Figma are different versions of a single component grouped together. They let you switch between styles or states easily without creating separate components. This helps keep designs organized and consistent. Variants can represent things like button states, sizes, or colors.

Why it matters

Without component variants, designers would create many separate components for each style or state, making files cluttered and hard to update. Variants solve this by grouping related components, saving time and reducing errors. This means faster design work and easier collaboration, which leads to better products.

Where it fits

Before learning variants, you should understand basic components and how to create them in Figma. After mastering variants, you can explore advanced prototyping and design systems that use variants for scalable UI design.

Mental Model

Core Idea

Component variants are like different flavors of the same ice cream grouped in one container, letting you pick the flavor you want without searching everywhere.

Think of it like...

Imagine a wardrobe with one drawer holding all your T-shirts in different colors and sizes. Instead of separate drawers for each T-shirt, you open one drawer and pick the variant you want. This keeps your closet tidy and finding a T-shirt quick.

┌───────────────┐
│ Component Set │
├───────────────┤
│ Variant 1     │
│ (Primary)     │
├───────────────┤
│ Variant 2     │
│ (Secondary)   │
├───────────────┤
│ Variant 3     │
│ (Disabled)    │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic components

Concept: Learn what a component is and why it is useful in design.

A component is a reusable design element like a button or icon. When you create a component, you can use it multiple times across your design. Changing the component updates all its copies automatically.

Result

You have a single source of truth for a design element, making updates easy and consistent.

Knowing components lets you avoid repetitive work and maintain design consistency effortlessly.

2

Foundation

Creating multiple components for states

Concept: Explore how designers create separate components for different states like hover or disabled.

Before variants, designers made separate components for each button state: normal, hover, pressed, disabled. Each was independent, so switching states meant swapping components manually.

Result

Design files become cluttered with many similar components, making management harder.

Seeing this problem highlights why a better grouping method is needed.

3

Intermediate

Introducing component variants

🤔Before reading on: do you think grouping components as variants will reduce or increase file complexity? Commit to your answer.

Concept: Component variants group related components into one set with selectable properties.

Variants let you combine all button states into one component set. You define properties like 'State' with options 'Normal', 'Hover', 'Disabled'. Switching states is done by changing the property, not swapping components.

Result

Your design file is cleaner, and switching states is faster and less error-prone.

Understanding variants transforms how you organize and interact with components, making design scalable.

4

Intermediate

Using properties to switch variants

🤔Before reading on: do you think variant properties can be combined, like color and size, or only one at a time? Commit to your answer.

Concept: Variants use properties to define differences like color, size, or state, which can be combined.

You can add multiple properties to a variant set, for example 'Color' with 'Primary' and 'Secondary', and 'Size' with 'Small' and 'Large'. This creates a matrix of variants you can select from using property dropdowns.

Result

You get a flexible component that adapts to many design needs without extra components.

Knowing how to combine properties unlocks powerful, compact design systems.

5

Intermediate

Organizing variants with naming conventions

Concept: Learn how naming properties and values clearly helps manage variants.

Properties and their values should be named clearly and consistently, like 'State: Hover' or 'Size: Large'. This makes it easy to find and select the right variant in the UI and helps teammates understand your design system.

Result

Your variant sets are intuitive and reduce confusion during design and handoff.

Clear naming is key to making variants usable and maintainable in teams.

6

Advanced

Using variants in prototyping and interactions

🤔Before reading on: do you think variants can be used to create interactive states in prototypes, or are they only for static design? Commit to your answer.

Concept: Variants can be linked with prototype interactions to simulate real UI behavior.

In Figma prototypes, you can create interactions that switch variant properties on click or hover. For example, clicking a button can change its 'State' property from 'Normal' to 'Pressed', showing realistic UI feedback.

Result

Prototypes become more dynamic and closer to real app behavior without extra frames.

Using variants in prototypes bridges design and user experience testing efficiently.

7

Expert

Advanced variant management in design systems

🤔Before reading on: do you think all variants should be in one big set or split into smaller sets? Commit to your answer.

Concept: Expert designers balance variant set size and complexity for maintainability and performance.

Very large variant sets can slow down Figma and confuse users. Experts split variants logically, for example separating color variants from size variants into different component sets. They also use nested components and variant swapping to keep design systems scalable.

Result

Design systems remain fast, clear, and easy to update even as they grow.

Knowing when and how to split variants prevents performance issues and keeps teams productive.

Under the Hood

Figma stores variants as a single component set with multiple child components representing each variant. Each variant has metadata properties that define its differences. When you select a variant property, Figma swaps the visible child component accordingly. This reduces duplication and links all variants to one master component for updates.

Why designed this way?

Variants were created to solve the problem of managing many similar components separately. Grouping them reduces clutter and errors. The property-based system allows flexible combinations without exponential component growth. Alternatives like separate components or manual swapping were inefficient and error-prone.

┌─────────────────────────────┐
│ Component Set (Button)      │
│ ┌───────────────┐           │
│ │ Variant 1     │           │
│ │ State: Normal │           │
│ ├───────────────┤           │
│ │ Variant 2     │           │
│ │ State: Hover  │           │
│ ├───────────────┤           │
│ │ Variant 3     │           │
│ │ State: Pressed│           │
│ └───────────────┘           │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do variants create separate components or just group existing ones? Commit to your answer.

Common Belief: Variants are just a visual grouping of separate components with no functional difference.

Reality: Variants are a single component set with multiple linked variants that share updates and properties.

Why it matters: Believing variants are separate components leads to duplicated work and inconsistent updates.

Quick: Can variant properties only have one value at a time or multiple combined? Commit to your answer.

Common Belief: Variant properties can only represent one attribute, like color or size, but not both combined.

Reality: Variant properties can be combined, allowing multiple attributes like color and size to define variants.

Why it matters: Not knowing this limits design flexibility and leads to unnecessary component duplication.

Quick: Do variants automatically improve prototype interactivity? Commit to your answer.

Common Belief: Variants only help with static design and do not affect prototyping capabilities.

Reality: Variants can be used in prototypes to create interactive state changes by switching properties.

Why it matters: Ignoring this misses a powerful way to create realistic prototypes without extra frames.

Quick: Is it best to put all variants into one huge set? Commit to your answer.

Common Belief: Combining all variants into one big set is always better for organization.

Reality: Very large variant sets can slow down Figma and confuse users; splitting sets is often better.

Why it matters: Not managing variant size can cause performance issues and reduce team productivity.

Expert Zone

1

Variants can be nested inside other components to create modular, scalable design systems.

2

Property naming conventions impact not just clarity but also how easily developers interpret design handoffs.

3

Using variant swapping in team libraries requires careful version control to avoid breaking changes.

When NOT to use

Avoid using variants for completely unrelated components or when variants become too large and complex; instead, use separate components or nested components. For highly dynamic UI states, consider code-based solutions or advanced prototyping tools.

Production Patterns

Teams use variants to build comprehensive design systems with consistent UI elements. Variants enable quick theme switching, responsive design adaptations, and interactive prototypes that closely mimic final apps.

Connections

Design Systems

Variants build on components to create scalable, reusable UI libraries.

Understanding variants is key to mastering design systems that keep large projects consistent and efficient.

State Machines (Computer Science)

Variants represent different states of a UI element, similar to states in a state machine.

Knowing how variants map to states helps designers and developers communicate UI behavior clearly.

Product Configuration (Manufacturing)

Variants in design are like product options in manufacturing, where one base product has multiple configurations.

This connection shows how grouping options efficiently reduces complexity in both design and production.

Common Pitfalls

#1 Creating separate components for each variant instead of using variants.

Wrong approach:

Button_Normal, Button_Hover, Button_Disabled as separate components without grouping.

Correct approach:

One component set 'Button' with variants for 'State' property: Normal, Hover, Disabled.

Root cause:

Not understanding how variants group related components leads to clutter and harder maintenance.

#2 Using unclear or inconsistent property names in variants.

Wrong approach:

Properties named 'A', 'B', or mixed terms like 'Color1', 'SizeBig'.

Correct approach:

Properties named clearly like 'State' with values 'Normal', 'Hover', and 'Size' with 'Small', 'Large'.

Root cause:

Poor naming causes confusion and slows down design and development collaboration.

#3 Putting too many variants in one set causing slow performance.

Wrong approach:

One variant set with dozens of properties and hundreds of variants.

Correct approach:

Split variants logically into smaller sets, e.g., separate color and size variants.

Root cause:

Not knowing variant limits leads to performance issues and user frustration.

Key Takeaways

Component variants group related design states and styles into one organized set, simplifying design management.

Using properties to define variants allows flexible combinations like color and size without creating many separate components.

Variants improve prototyping by enabling interactive state changes within a single component set.

Clear naming and logical splitting of variants are essential for maintainability and performance in large design systems.

Understanding variants bridges design and development, making UI consistency and collaboration easier.