Modes for variables

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

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

Variables allow us to store reusable values that can be applied to various design properties—such as color, spacing values, and dimensions.

Variable modes allow us to represent different contexts of our designs without needing to create multiple frames for every context that we need. This is because variables can contain multiple values, organized by way of variable modes, where each mode stores one value per variable.

For example, let's say we need to create light and dark mode versions for a design:

Without variable modes, we could create designs for light mode (our default), then duplicate those designs and update every color fill necessary for dark mode.

If we use variable modes, we would create a collection of variables with two sets of values—or modes—one for light mode as our default and one for dark mode. We would apply the variables to one set of designs. Then, we could quickly switch designs between light and dark modes.

If we need a third color theme, all we need to do is create a new mode and input values for that theme. We wouldn't need to apply the values to our designs all over again.

There are many contexts that variable modes can help support. Here are a few ideas to get you started:

• Create accessible color themes, like high contrast mode or different themes for color blindness, using color variables
• Localize UI copy to see how copy flows in designs using string variables
• Account for multiple device sizes, like watch, mobile, and desktop, to see how elements respond to varying spacing and padding sizes using number variables

Create a mode

1. Deselect all objects by clicking anywhere on the canvas.
2. Open the variables modal by clicking Open variables in the Local variables section of the right sidebar.
3. Open the collection you want to create a new mode in.
4. From an existing variable, click New variable mode to the right of the column headers. Figma duplicates values from the first column to the new one.

You can also duplicate a mode by right-clicking the mode header and selecting Duplicate mode.

Default mode

A variable collection's default mode is the left-most mode column of that collection. Objects and pages with variables are set to this mode by default until you switch their modes ↓.

In a page's mode switcher, a collection's default mode is shown in parentheses.

Switch between modes

Switch the mode on an object or page so the designs show the variable values you want. 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:

1. Select the layer, group, or container object.
2. From the Appearance section of the right sidebar, click Apply variable mode.
3. 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.

1. Deselect everything on the canvas.
2. From the Page section of the right sidebar, click Apply variable mode.
3. Hover over a variable collection and choose a mode.

Set to auto mode (objects only)

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 to the collection’s default mode, shown in parentheses.

Use with 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.

1. Create a string or number variable with multiple values (or modes).
2. Set the variable’s values to match the variant property’s values.
3. Grab a component instance of the variant, and hover over the variant property in the right sidebar.
4. 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.

1. Create a boolean variable with multiple values (or modes).
2. Create two variant instances within the same component set.
3. Set one variant’s value to True and the other one to False.
4. Grab a component instance of one of the variants, and hover over the variant property in the right sidebar.
5. Click Assign variable and choose the boolean variable.

Learn how to use variants and variables in prototypes →

Nested instances

You can also bind variables to variant properties on nested instances.

1. Create a component with a nested instance of another component.
2. Create a string, number, or boolean variable with multiple values (or modes).
3. Set the variable’s values to match the values of the nested instance component properties.
4. Create a instance of the component.
5. Assign the variable to the nested instance’s variant property.

Now, the nested instance will switch to a different variant whenever the mode switches.

Mode conflicts

Any modes with conflicts will show an information icon next to it in the mode switcher. Conflicts occur when objects in a file use different versions of the same variable.

If you select a mode with a conflict, the mode is only applied to layers that can render it. The layer must be using a version of the variable that contains that mode.

To resolve conflicting modes:

1. Open the file where the main variable lives and publish it to team libraries. 
2. Review and accept the updates from the library modal from the file where the conflicts are happening.

Keep in mind that only those with can edit access to a file can make edits, publish, and review and accept library updates to the file. 

Prevent mode conflicts

Mode conflicts can happen if a mode is deleted from or added to the variable, and the updates haven’t made their way to a file or object. 

Here are a couple of ways these conflicts can happen and what you can do about them.