Figma components, variants and variables: a practical design-system guide

Separate the reusable object from its controlled differences

A component provides a reusable design object; variants organise related versions of that object. Figma’s variant guide explains properties such as size and state, with values defining the available combinations.

Variables hold reusable values that can change with context, such as a colour or spacing value. These concepts can work together. Before creating another component, ask whether you are designing a different object, a deliberate state or a value used throughout the system.

Build a button brief before building a large library

Imagine an illustrative checkout design needing primary and secondary buttons, two sizes and a disabled state. Write down which combinations are actually supported by the product. Do not create every mathematical combination merely because the tool permits it.

For instance, a small secondary button might be used in a toolbar while the checkout action always uses a large primary style. Explain the intended use with the design. A smaller set of meaningful choices can communicate more clearly than a crowded library containing combinations nobody should ship.

Keep values and behaviour explicit

The table proposes a modelling approach rather than a completed Figma library. Agree names with the people implementing the design so that “primary” and “disabled” have a consistent meaning outside the design file.

Avoid turning every difference into a variant

Figma’s component properties documentation describes controls for text, visibility and swapping nested instances, alongside variant properties. Use those options to assess whether a difference needs another full state or simply an exposed control.

Test a long translated label, an optional icon and a narrow layout. If the component only works with the original short text, the model is incomplete even if the library is neatly named. Record which content changes are supported and which require a separate design decision.

Verify one consuming file and one implementation handover

Use an authorised sample file to inspect how another designer finds the component, chooses a supported state and changes the label. Review a proposed shared-value update and identify which objects should change. Check the applicable plan and publishing capability before promising organisation-wide library distribution.

Then hand over the intended behaviour, content limits and unresolved cases. Use the Figma profile for collaboration and seat context and the design software category for alternatives. A consistent library helps communication; it does not, by itself, prove accessibility or correct implementation.

Frequently asked questions