Stop 05 · Wireframing & PrototypingTopics · 5/9

Figma Components & Variants

In short

Imagine changing the button colour on 60 screens one by one. Components let you change it once and watch every copy update. Variants keep all a button's versions in one tidy place.

Reusable design elements (buttons, cards, inputs) that update everywhere they're used when the source component changes — variants let one component represent multiple states (default, hover, disabled) cleanly.

The jaadu holds up three matching school shirts in small, medium and large sizes.

Think of it like this

The school uniform pattern

A tailor keeps one master pattern for the school uniform. Sizes S, M and L are variants of it. If the school changes the collar, the tailor updates the master and every new uniform follows.

Watch it happen

A button component set

Button (set)

Type=Primary

Type=Secondary

State=Default

State=Hover

State=Disabled

State=Default

State=Disabled

1/4One component set holds every version of the button. You place copies, called instances, on your screens.

The big ideas

What you need to know

Main and instances

The main component is the source. Instances are copies that follow it but can change allowed things like text.

Variants are properties

Group versions with properties like Type, Size and State instead of making separate components.

Component properties

Boolean and text properties let you show or hide an icon or change a label without detaching.

One fix, everywhere

Components are how teams keep big products consistent as designs change.

Save yourself the pain

Common mistakes

Oops

Detaching instances whenever they need a small change.

Do this instead

Add a property or variant to the main component instead. Detached copies stop getting updates.

Oops

Naming variants 'Button 1', 'Button 2'.

Do this instead

Use property=value names like 'Type=Primary, State=Hover' so they show as clean dropdowns.

Your mission

Build a button set

~40 min

Quick check

You need a button that sometimes has an icon. What's the cleanest approach?

Go deeper

1Build a button component with 3-4 variants (default, hover, disabled, loading).
2Practice using your component across multiple screens and updating the source to see it propagate.
3Learn why components are the foundation of both efficient design work and design systems (Phase 8).