The secret to good interface design isn't redrawing the same button a hundred times; it's building it once, correctly, and reusing it everywhere. This is exactly where the Figma component and variant system comes in. Turn an element into a single source of truth, group its states (hover, disabled, primary/secondary) as variants, and your design becomes a consistent, fast, easy-to-maintain library. In this article I'll walk you from an empty canvas to a genuinely scalable component system.
What is a component, and why does it matter?
In Figma, a component is the main copy of a design element you want to reuse. Every copy you derive from it is called an instance. When you change the main component, that change automatically flows to every instance. Adjust a button's corner radius or its color token once, and you won't have to manually fix hundreds of uses across the file.
To turn an element into a component, select it, right-click and choose Create component (shortcut: ⌥⌘K on macOS, Ctrl+Alt+K on Windows). It's now marked with a purple diamond icon, and you can drag it anywhere from the Assets tab in the left panel.
- Consistency: one source, the same look everywhere.
- Speed: you never start a new screen from scratch.
- Maintenance: brand color changed? Fix it once, it propagates everywhere.
Combining states with variants
A button doesn't really have just one state: default, hover, pressed, disabled... Instead of making each one a separate component, the structure that collects them all into a single component set is called a variant. Variants logically keep the different states of the same component together.
Select multiple components and click Combine as variants in the right panel; Figma wraps them in a dashed purple frame. That frame is now a component set. You give each variant meaningful property names and values from the "Properties" section of the panel.
Naming variant properties correctly
The power of the variant system comes from a sound property structure. Think of a property as an axis: for a button, for example, you might define two axes.
Type= Primary, Secondary, GhostState= Default, Hover, Pressed, Disabled
Combine these two properties and you get 3 × 4 = 12 possible combinations, all living inside one component set. When a designer uses an instance, they pick Type: Primary and State: Hover from dropdowns in the right panel, and the correct variant appears instantly.
Be consistent with naming. Write property names and values identically across every component; if State mixes with state, or Disabled with disable, Figma treats them as separate properties and the set falls apart. Keep values short, readable and logical.
Boolean and instance swap properties
Variants aren't the only property type. Figma offers several property types that make a component more flexible:
- Boolean property: toggle a layer on or off. For example, create a switch named
Has iconto show the icon inside a button. - Instance swap property: lets you replace a nested instance with another component. You can swap the avatar inside a card component for a different avatar at the point of use.
- Text property: lets you edit a text layer's content from the right panel without diving into the layer to find it.
Combine these properties with variants, and a single card or button component covers dozens of different scenarios on its own.
Step by step: building a button component
Let's put theory into practice. A button component with state variants is built from scratch in this order:
- 1. Draw a frame with auto layout (shortcut
Shift+A): place text and an optional icon inside. Let auto layout manage padding and alignment so the button grows as the text lengthens. - 2. Turn this frame into a component (
⌥⌘K/Ctrl+Alt+K). - 3. Duplicate the component, darken its color, and make this the "Hover" state. Repeat for "Pressed" and "Disabled".
- 4. Select all of them and click
Combine as variants. - 5. In the right panel, name the property
State; enter values as Default, Hover, Pressed, Disabled. - 6. Instead of typing colors by hand, bind a color variable (color token). That way, changing the brand color updates every variant.
As this library grows, defining colors and spacing as variables reveals the true value of components: your design system is fed from a single source.
Common mistakes
There are a few traps people fall into when building a component system. Avoiding them keeps your file clean in the long run.
- Over-variant: don't make every tiny difference a variant. Five axes and 60 combinations become unmanageable; solve some differences with boolean or instance swap instead.
- The detach habit: detaching an instance and editing it by hand breaks the link. Use overrides (text, color, swap) instead.
- Inconsistent naming: case inconsistency in property and value names splits the set.
- Not using variables: entering colors as fixed hex values makes bulk updates impossible later.
Frequently Asked Questions
What's the difference between a component and a variant?
A component is a single reusable main design element. A variant is the structure that groups different states of the same component (for example, Default and Hover) into one component set. So each variant is really a component; the variant system holds them together logically.
Do variants hurt performance?
In practice, a reasonable number of variants doesn't affect performance. Problems arise with unnecessary multi-axis sets that produce hundreds of combinations. Keeping the number of axes limited and using boolean/instance swap properties keeps the file lightweight.
Can I change variants later?
Yes. You can select a component set to add new variants, rename properties, or edit values. Changes propagate to all linked instances, which is why setting up consistent naming from the start matters.
Want to bring order to your design system? I can help you build a reusable, variant-based Figma component library or clean up your existing file. Get in touch and let's talk about your project.