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.
\nA 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, GhostState: Default, Pressed, DisabledSize: Medium, SmallYou 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.
\nOn 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.
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:
\nShow icon true or false. One layer, no new variants.Label = “Save habit”. People edit it from the properties panel without hunting for the layer.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.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.
\n\nAdd 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.
\nThe Habit row gets the same treatment:
\nHabit row (component set)\n State variant To do | Done | Missed\n Name text "Read 20 pages"\n Show streak boolean true\n 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.
\nWhen 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.
\n\nYour 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.
\n","toc":[{"id":"sec-1","text":"Variants: one set, many versions","level":2},{"id":"sec-2","text":"Component properties: switches without multiplication","level":2},{"id":"sec-3","text":"Build order matters","level":2}],"takeaways":["Variants group versions of a component in one component set, described by properties such as Type and State.","Use variants for differences that restyle several layers at once, such as states, types and sizes.","Use a boolean property for show or hide, a text property for editable labels and an instance swap property for choosing a nested component.","Every variant property multiplies the variant count, while boolean, text and instance swap properties do not.","Slots, at the time of writing, mark areas of a component where instances can hold free content without detaching."],"further":[{"title":"Create and use variants","url":"https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants"},{"title":"Explore component properties","url":"https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties"},{"title":"The difference between slots, instance swaps, and variants","url":"https://help.figma.com/hc/en-us/articles/38741465279895-The-difference-between-slots-instance-swaps-and-variants"}],"quiz":[{"q":"Steady’s button has Type (Primary, Secondary, Ghost), State (Default, Pressed, Disabled) and Size (Medium, Small) as variant properties. A teammate wants “with icon” and “without icon” as another variant property. How many variants would that create, and what is the alternative?
","options":[{"text":"36 variants. A boolean property for the icon keeps it at 18.","why":"Correct. 3 × 3 × 2 = 18, and a two-value variant doubles it. A boolean toggles the icon layer without new variants."},{"text":"20 variants. There is no alternative.","why":"Variant properties multiply, they do not add. And booleans exist precisely for show or hide."},{"text":"18 variants. Figma merges duplicate layouts automatically.","why":"Figma never merges variants. Each combination is a separate variant you have to maintain."},{"text":"36 variants. An instance swap property keeps it at 18.","why":"The count is right, but instance swap chooses which icon, not whether it shows. Visibility is a boolean’s job."}],"answer":0},{"q":"Which property type fits the habit name in the Habit row component?
","options":[{"text":"A variant property with one value per habit.","why":"Habit names are unlimited user content. Variants are for a small fixed set of designed versions."},{"text":"A boolean property.","why":"Booleans only show or hide a layer. They cannot hold text content."},{"text":"A text property, so the name can be edited from the properties panel or on the canvas.","why":"Correct. A text property exposes the string so people can change it without digging into layers."},{"text":"An instance swap property.","why":"Instance swap chooses a nested component. A name is plain text, not a component."}],"answer":2},{"q":"When should a difference be a variant rather than a boolean?
","options":[{"text":"When it is used on more than three screens.","why":"Usage count does not decide the property type. Use the nature of the change."},{"text":"When the difference restyles several layers together, like a Pressed state changing fill, label color and shadow.","why":"Correct. Booleans only toggle one layer’s visibility. Coordinated visual changes need a designed variant."},{"text":"When the developer asks for an enum.","why":"Developer input is valuable, but the design reason is how many layers change and how."},{"text":"Always, because variants are newer than booleans.","why":"Variants are not newer, and defaulting to them causes variant explosion."}],"answer":1},{"q":"The New habit sheet component must hold different content in different flows (a form, a confirmation, an icon grid). What fits best at the time of writing?
","options":[{"text":"One variant per possible content.","why":"Every new flow would need a new variant, and the set would grow without end."},{"text":"Detach the sheet for each use.","why":"Detached sheets miss every future fix to the sheet’s header, handle and padding."},{"text":"A boolean for every element that might appear.","why":"Booleans can only hide layers that already exist, so the sheet would carry every possible element."},{"text":"A slot for the sheet’s body, so each instance can hold its own content while the sheet chrome stays linked.","why":"Correct. Slots exist for exactly this, a flexible content area inside a linked component."}],"answer":3}],"exercise":{"kind":"order","items":["build-base","make-component","add-props","add-variants","style-variants","test-instance"],"title":"Build the button component in the right order","prompt":"You are building Steady’s button: Type and State as variant properties, plus a text property for the label, a boolean to show the icon and an instance swap for which icon. Put the steps in the order that avoids redoing work.
\n","hints":["A component property can only be created on something that is already a component.","New variants copy the property connections of the component they were created from.","Base frame, component, properties, variants, styling, then test."],"explanation":"Start with a well-built auto layout frame with named Icon and Label layers, because everything after inherits its structure. Make it a component, then add the text, boolean and instance swap properties while there is only one variant to connect them to. Next add variants and name the variant properties Type and State; each new variant inherits those property connections. Then restyle each variant for its type and state. Finally test an instance by switching every property, including long labels and the icon off, to prove nothing breaks before anyone else uses it.
\n","checkLabels":{},"itemText":{"build-base":"Build the default primary button as an auto layout frame with named Icon and Label layers.","make-component":"Turn the frame into a main component.","add-props":"Add a text property for Label, a boolean for Show icon and an instance swap for Icon.","add-variants":"Add variants and name the variant properties Type and State with their values.","style-variants":"Restyle each variant: secondary and ghost colors, pressed and disabled states.","test-instance":"Place an instance and switch every property, with a long label and the icon off, to check nothing breaks."}},"words":703,"readMinutes":3}