Variable Modes

Content provided is from Figma's Documentation : https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-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.

Change the default mode of a collection

In the variables modal, the default mode of a variable collection is the left-most column.

When an object is using a variable or when a page contains objects using variables, the object or page will use the default mode's values until you explicitly set a specific mode to the object or page.

variable-default-mode.png

To change the default mode of a collection to a different one:

1. From the Variables modal, open the variable collection where the variable mode lives.

2. Find the mode and either:

   • Right-click and select Set as default,

   • Or click and drag the variable mode to the left-most column.

If an object's or page's variable mode was set to "Auto" or "Default" instead of a specified mode, they will inherit whatever the new default mode is.

If an object or page was explicitly set to a mode that happened to be the default, they will stay linked to that mode even when it is no longer the default.

Reorder modes

To reorder modes in a variable collection, you can either:

• Right-click and select Move column right or Move column left

• Or, click and drag the column left or right

If you move a column all the way to the left in a variable collection, this column becomes the default mode.

Switch between modes

Switch the mode on an object or page so the designs use the variable values you want. You can switch modes on:

• Layers

• Frames

• Components and component sets

• Sections

• Groups

• Pages

Tip: Want to change variable modes while prototyping? Learn how to use the Set variable mode prototyping action →

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.

The mode of an object is labelled from the layers panel.

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.

From the right sidebar, the mode selector is opened and Auto is highlighted.

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.

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.

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.