By the end of this lesson you can
- Combine related components into a component set with variants.
- Name variant properties and values clearly.
- Decide between variants and other component properties.
The idea
Variants group related versions of a component into one component set. A button might come in different types (primary, secondary, tertiary), sizes (small, medium, large) and states (default, hover, pressed, disabled). Instead of twelve separate components, you have one set with three variant properties.
Naming
Variant properties are named like Type=Primary, Size=Medium, State=Hover. Use clear, consistent names that match how developers name the same options in code. Values should be readable: "Disabled", not "dis".
Variants or other properties?
Use variants when the structure or styling differs between versions (a different colour or size). Use boolean properties for showing or hiding parts, and text properties for content. Mixing these keeps the number of variants manageable: a button with an optional icon does not need separate "with icon" variants.
Interactive components
Variants can be linked with interactions so prototypes respond to hover and click without wiring each screen (covered in the prototyping lesson).
Why it matters in real projects
Variants make components easy to find and use: choose options from drop-downs rather than searching for the right component. They mirror how components are built in code, with props for type, size and state, which makes handoff clearer. Well-structured variants are the core of any design system.
A realistic example
A design system has 24 separate button components with names such as "Button blue big hover". Designers keep picking the wrong one.
The team combines them into one set with Type (Primary, Secondary, Danger), Size (Small, Medium) and State (Default, Hover, Pressed, Disabled), plus a boolean for an icon. The names match the developers' React props. Designers now pick a button and choose options in the panel, and handoff conversations become shorter.
Step by step
List the versions
Write down all types, sizes and states your component needs.
Build each version
Create each combination from your base component.
Combine as variants
Select them and combine into a component set.
Name properties
Set clear property names and values matching code.
Use booleans and text where possible
Avoid variants for things a boolean or text property can handle.
Test the set
Place instances and switch between options.
Common mistakes
Mistake Creating variants for every combination of optional parts.
Instead Use boolean properties for optional parts.
Mistake Unclear or inconsistent names.
Instead Agree names with developers and use them everywhere.
Mistake Missing states such as disabled or focus.
Instead List all states before building.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Button component set
Build a complete button component set.
Steps
- Define types, sizes and states.
- Build and combine them into variants.
- Add boolean and text properties.
- Document the properties on a small reference frame.
Deliverable
A button component set with documentation.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Variants group versions of a component under properties.
- Name properties clearly and consistently.
- Use booleans and text properties to reduce variants.
- Variants mirror component props in code.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Figma Learn: help centre (opens in a new tab)Figma
- Buttons (opens in a new tab)Material Design 3
See how a real system defines button types and states.
Your notes
Marking complete updates your course and roadmap progress.