Modes for variables
🚧 Variables is currently in open beta. We’ll continue to add more features and polish the experience during this time. Find out what’s coming next →
Before you Start
Who can use this feature
Anyone on Education, Professional, Organization, and Enterprise plans can create and use modes for variables
The number of modes you can create per variable collection depends on your plan
New to variables? Check out our guide to variables →
Variable modes represent the different contexts of our designs. A mode contains a list of values for a variable within a collection, storing one value per variable.
If a variable collection has multiple modes, then we can switch modes on layers and elements to quickly change designs for different contexts.
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
Create a mode
- Open the Variables modal by clicking Open variables in the Local variables section of the right sidebar.
- Open the collection you want to create a new mode in.
- Click the New variable mode icon to the right of the column headers. Figma duplicates values from the first mode column to the new one.
You can also duplicate a mode by right-clicking the mode header and selecting Duplicate mode.
Tip: A collection’s default mode is the first column on the left. Layers with variables applied will default to this mode unless you switch their modes ↓.
Switch modes
Switch an object or page’s mode to the set of variable values you want designs to show. You can switch modes on:
- Layers
- Frames
- Components and component sets
- Sections
- Groups
- Pages
Switch modes on an object
For layers: You can switch their modes if there is at least one variable applied and the variable has multiple modes.
For groups, frames, components, component sets, and sections: You can switch their modes if nested layers have at least one variable applied and the variable has multiple modes.
To switch the mode on an object:
- Select the layer, group, or container object.
- From the Layer section of the right sidebar, click Change variable mode.
- Hover over a variable collection and choose a mode.
Once you specify a mode on an object, a tag with the mode icon and mode name will appear next to the layer name in the Layers panel of the left sidebar. If there are multiple modes, hover over the tag to see a list of modes.
Switch modes on a page
You can switch modes on pages if any local collection of variables contains multiple modes.
- Deselect everything on the canvas.
- From the Page section of the right sidebar, click Change variable mode.
- Hover over a variable collection and choose a mode.
Note: You can’t switch to modes that are greyed out in the change variables menu. Modes get disabled when a variable in a selection or page (when nothing is selected) maps to a disabled mode, but contains conflicts. This can happen when the disabled mode lives in a different file and contains published updates, but the current file hasn’t accepted updates yet.
Default mode
A variable collection's default mode is the first mode column of that collection.
Pages with variables are set to this mode by Default. This means they take on the collection’s default mode, shown in parentheses.
Auto mode
Objects with variables have their modes set to Auto by default. This means they take on the mode of their parent container.
- If their parent container is also set to Auto, objects continue up their layer hierarchy until they reach a container with a specified mode.
- If no parent containers have a mode specified, then the objects fallback on the collection’s default mode, shown in parentheses.
Use on variant instances
Boolean, number, and string variables can be assigned to component instances with variant properties.
String and number variables
String and number variables can be mapped to variant instances so it switches to a different variant when its mode changes. To do this, the variable’s value must match the variant property’s values.
- Create a string or number variable with multiple values (or modes).
- Set the variable’s values to match the variant property’s values.
- Grab a component instance of the variant, and hover over the variant property in the right sidebar.
- Click Assign variable and choose the variable.
Now, the instance will switch to a different variant whenever the mode switches.
Boolean variables
Boolean variables can be mapped to variant properties with true and false values.
Note: Currently, boolean variables cannot be applied to boolean properties. You’ll need to add a variant property to a component with two values: true and false. Then, add apply the boolean variable to the instance’s variant property.
- Create a boolean variable with multiple values (or modes).
- Create two variant instances within the same component set.
- Set one variant’s value to
True
and the other one toFalse
. - Grab a component instance of one of the variants, and hover over the variant property in the right sidebar.
- Click Assign variable and choose the boolean variable.