Overview of variables, collections, and modes

Before you Start

Who can use this feature

Anyone on any plan can create and use variables

The number of modes you can create per collection depends on your plan

Looking for more resources on variables? Check out our guide to variables →

Variables are raw values—like color, numbers, and strings—that can change in value depending on the context of a design, such as light and dark modes, or mobile and desktop modes.

Like styles and components, variables can also be published to team libraries. When you update the value of a variable, you can update designs across files accordingly. This helps to create consistent designs across projects and makes updating design systems more efficient.

Types of variables

There are four types of variables. Each one can be applied to specific properties and elements.

Variable type	Defined by
Color	Solid fills
Number	Number values
String	Text strings
Boolean	True, false values

Color variable

Color variables use solid color values, such as #000000 or #FFCD29.

They are great for handling theming, such as Dark and Light modes. They can also help you organize your brand's color palette. If you have a complex design system and wish to implement design tokens, you can alias color variables to do so.

Number variable

Number variables use number values such as 24 or -8. You can use whole numbers or any decimal number up to the hundredth place, such as 12.75. 

They are great at handling responsive designs and varying text properties between different languages. You can also number variables inside text styles so that you have reusable pre-defined styles so you don’t have to memorize which property combinations go together.

Certain properties have a smaller range of numbers they support. Check the toggle below for details.

String variable

String variables use a sequence of characters such as Inter, Hello world!, or 94102. They're great for switching languages between different localized designs, combining with other variables to create text styles, and switching component variants in prototyping.

Boolean variable

Boolean variables use true and false values. They are great for hiding and showing layers for specific contexts of your designs.

Tokens and aliasing

A variable can reference another variable. That is, you can apply a variable to another variable. Also called, "aliasing," this gives you the ability to implement design tokens.

Any variable can reference another variable of the same type. For example, color variables can reference other color variables. Text variables can reference other text variables.

Learn how to alias variables →

Collections and groups

Both collections and groups are used to organize variables and make them easier to find.

A collection is a set of variables and modes. Collections can be used to organize related variables together. For example, use one collection to localize text in different languages, and another collection for spatial values.

You can further organize variables by adding them to groups within a collection. For example, use one group for colors used for text, and another for colors used on strokes.

Variable modes

A mode is a list of values for a variable in a collection, storing one value per variable. Modes also represent the different contexts of our designs.

If a variable has multiple definitions, each definition is associated with a mode. When the variable is applied to a layer's property, the layer expresses the value based on the mode it's currently in, allowing us to quickly switch our designs between contexts.

For example, we might have a color variable storing two color values: a blue color under one mode, and a white color under a different mode. We apply this variable to a text layer, which will either appear as blue or white depending on the mode it’s in.

Here are a few ways you can use modes to switch contexts:

• Different color themes, like light and dark modes
• Different languages to see how copy flows in designs
• Devices sizes to see how elements look with different spacing and padding

Learn how to switch design contexts with variable modes →

Considerations

Styles and variables

Both variables and styles act as a source of truth and can be reused throughout designs for efficiency and consistency.

When deciding whether to use a variable or style, keep in mind:

• A style is great for creating a composite of values. Also, styles cannot be used in other styles or variables.
• Variables can be used to create multiple modes—such as light and dark modes. Also, variables can be applied to styles and other variables, allowing the ability to implement design tokens.

Learn the difference between styles and variables →