Variants and Component Properties

Steady’s primary button looks simple until you list what it needs: a primary, secondary and ghost type; default, pressed and disabled states; medium and small sizes; an optional icon; and any label. Build each of those as a separate component and you have dozens of near-copies, and a designer choosing between Button Primary Small Disabled With Icon and its neighbours.

Variants and component properties turn that pile into one component with a few clear switches.

Variants: one set, many versions

A component set holds related components called variants. Each variant is described by variant properties, written as Property=Value pairs. For Steady’s button:

• Type: Primary, Secondary, Ghost
• State: Default, Pressed, Disabled
• Size: Medium, Small

You create variants either by selecting several existing components and clicking Combine as variants, or by selecting a component and adding a variant from the right sidebar, then renaming the properties and values. Figma treats the variant at the top-left of the set as the default.

On an instance, people no longer hunt through assets. They place one Button and pick values from dropdowns: Type Secondary, State Disabled. The names you choose here are the names developers will see in Dev Mode, so make them match code where you can. If the code says variant="secondary", consider calling your property Variant rather than Type, and agree on it with engineering early.

Component properties: switches without multiplication

Variant properties multiply. Three types × three states × two sizes is 18 variants. Add a two-value Icon variant property and it becomes 36, every one of which has to be built and kept in sync. This is called variant explosion, and it is the most common way design systems become unmaintainable.

Component properties handle the differences that do not need a separately designed version:

• Boolean: shows or hides a layer. Show icon true or false. One layer, no new variants.
• Text: exposes a text layer’s content. Label = “Save habit”. People edit it from the properties panel without hunting for the layer.
• Instance swap: chooses which component fills a nested instance. Icon = Plus, Check or Bell. You can set preferred values, a short list of sensible icons, so nobody puts a trash can on the Save button.
• Slot: at the time of writing, a newer property type that marks an area where instances can hold their own content, such as the body of a bottom sheet, while everything around it stays linked.

You add these on the main component: select the layer, then use the property option next to its visibility (boolean), its text content (text) or its nested instance (instance swap) in the right sidebar, or create one from the properties section and connect it to a layer.

Build order matters

Add text, boolean and instance swap properties to the first component before you add more variants. New variants created from it inherit those property connections. If you build 18 variants first, you will connect the label layer 18 times.

The Habit row gets the same treatment:

Habit row (component set)
  State      variant        To do | Done | Missed
  Name       text           "Read 20 pages"
  Show streak boolean       true
  Icon       instance swap  Habit icon/Book  (preferred: Book, Water, Run, Sleep)

Three variants instead of dozens, because Done and Missed restyle several layers (check fill, name color, a strikethrough) while everything else is a property.

When a component nests other components, people would normally have to dig into layers to reach the inner ones’ properties. At the time of writing, a component author can expose nested instances, so the Check button’s own properties appear alongside the Habit row’s in the panel.

Your kit now has a handful of flexible components. Their colors and numbers, though, are still typed in by hand. Next you move those values into styles and variables.