Overview of variables, collections, and modes
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
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.
Color variables can be applied to:
- Color styles
- Fill colors
- Gradient stops
- Shadow effects
- Stroke colors
- Other color variables
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.
Number variables can be applied to:
- Corner radius and individual corner radius
- Dimensions, including minimum and maximum width/height
-
Font properties
- Font size
- Font weight (numbers only, e.g. 400, 700)
- Line height
- Letter spacing (interpreted as Px, not %)
- Paragraph indent
- Paragraph spacing
- Layer opacity (numbers >100 will default to 100)
-
Layout grids
- Grid size
- Row and column count (whole numbers only)
- Width, height, margin, offset, and gutter
- Padding and gap between
- Shadow and blur effects: X, Y, blur and spread values
- Stroke weight: all, top, bottom, left, and right
- Text content
- Text styles
- Other number variables
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.
String variables can be applied to:
-
Font properties
- Font family
- Font style and weight (name only, e.g. regular, bold, black italic)
- Layer visibility, if the string has a value of “true” or “false”
- Text content
- Text styles
- Variant instances in prototyping
- Other string variables
Tip: Be sure to use exact spelling when creating string variables for font family and font style or weight. However, Figma will recognize the value if it includes hyphens (-), underscores (_), different casings (DM Sans, dm sans), and with or without spaces.
Boolean variable
Boolean variables use true
and false
values. They are great for hiding and showing layers for specific contexts of your designs.
Boolean variables can be applied to:
- Instances with variant property with true and false values
- Layer visibility
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.
Note: You can create up to 5,000 variables per collection.
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 →
Ready to continue your variables journey? Learn how to create and manage variables →