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

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

1. Open the Variables modal by clicking Open variables in the Local variables section of the right sidebar.
2. Open the collection you want to create a new mode in.
3. 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.

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:

1. Select the layer, group, or container object.
2. From the Layer section of the right sidebar, click Change 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 Change variable mode.
3. Hover over a variable collection and choose a mode.

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.

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 →