Variable modes in prototypes – Figma Learn - Help Center

This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →

Before you start

Who can use this feature

Use variables with prototypes on any paid plan. The number of variable modes available per collection depends on your plan.

Anyone with can edit access to a file can create prototypes.

Anyone with can view or can view prototypes only access to a file can view prototypes.

Each variable in your collection can have multiple modes. You can select and use the values for specific modes in your prototyping actions and expressions.

There are several ways you can use variable modes to enhance your prototyping experience:

Set mode values based on context: Use multiple mode values of the same variable in your design, and change their values independently in the same interaction
Use mode values in expressions: Use the values of specific mode definitions to build interactions and perform calculations
Change variable mode with an interaction: Use a prototype interaction to change the variable mode of a page

New to variables? Learn more here:

Want to get more hands on practice?

Check out the advanced prototyping playground file →

Set mode values based on context

When a variable has multiple mode definitions, use the Set variable action and mode context to change the value of a specific mode definition.

This can be helpful when modifying only one mode definition of a variable. When displaying or using multiple modes of the same variable in a design, adjust their values independently from each other.

For example, take a look at the design below:

Each produce item has a counter to adjust the number of items added to the cart.

If a number variable with only a single mode is used to represent the item count, a unique variable and interaction would be needed for each product listing.

Instead, you can use a number variable with multiple modes—one for each unique produce item.

By using multiple modes, each item count can be updated separately.

Set the mode on the parent layers or objects.

Select the layer, group, or object that contains the applied variable. (For example, select the frame that contains the product image and information for the melon.)
From the Appearance section of the right sidebar, click Apply variable mode.
Hover over a variable collection and choose a mode. (Select the “melon” mode.)
Repeat for any other objects or layers that only apply to a specific mode. (Apply the “shiitakes” mode to the frame that contains the product image and information for the shiitake mushrooms).

Change the value of the applied variable with the Set variable prototype action. (For example, create a Set variable interaction on the + icon for each product counter. Set the Amount in basket variable to Amount in basket + 1.)

Any variables contained within a layer that has a set mode will only update the value of that specific mode definition.

ui3-variable-modes (2).png

Tip: Use components to save even more time while prototyping with modes. With components, you’ll only need to create the interaction once. Then, place multiple instances on the frame, and change the applied mode for each instance.

Use mode values in expressions

Select mode definitions in prototype actions

To select specific variable modes in prototypes:

Create or click on an existing prototype connection to open the Interaction modal.
Click on any variable name that you’ve used in the interaction.
From the Modes dropdown menu, select a specific mode of that variable.

Once you’ve selected a mode, the variable is represented with both the variable name and mode name:

variableName:modeName

An interaction details modal. The user clicks the objectType variable from the to field, and sets it to the objectType:apple mode.

Tip: You can also use your keyboard to build expressions. To select a specific mode in the expression builder, enter in a variable. Then, press ← to highlight the variable name, and use your ↑ up and ↓ down arrows to select the mode. Press enter to confirm.

Build expressions with mode values

Use expressions with variable modes to calculate values across a single variable.

This can be helpful when writing expressions that use multiple mode definitions of one variable.

For example, consider the same design from above. This time, there are fields to calculate the item subtotal of each produce item, and an overall total to calculate the total price of the entire order.

Tip: In order to apply different modes of the same variable on a the same design, apply a variable mode to the frame or component layer.

Now, take a look at the variable collection:

When using expressions, there are times when you’ll need separate values for each variable mode. For example, to calculate the subtotal of each produce type, use an expression that multiplies the mode’s Price by its Amount in basket.

Other times, you’ll need a single variable value to represent the total of different modes. For example, to calculate the order total, create a new variable collection for the cartTotal variable with only one mode.

Want to learn more best practices for prototyping with variables? Subscribe to Figma’s YouTube channel.

Change variable mode with an interaction

Use the Set variable mode prototype action to change the variable mode of the current page.

For example, if you have a design with a light and dark mode, you can use the Set variable mode action to switch between modes while playing a prototype.

set variable mode gif example.gif

To use the Set variable mode prototype action:

Create a prototype interaction.
For the prototype action, select Set variable mode and do the following:
1. From the first dropdown menu, select a variable collection.
2. From the second dropdown menu, select a variable mode.

The Set variable mode action changes the mode for the current page, and will change the mode for any objects on that page that have their mode set to Auto. Any mode explicitly defined on an object will still be used for itself and any nested children, regardless of the page level mode.

Note: A nested instance does not transfer overrides if its variant is changed due to an attached variable changing values. This means that overrides do not transfer when a mode switch changes the variant of a nested instance.

Learn more about setting variable modes on objects →

Before you start

Who can use this feature

Use variables with prototypes on any paid plan. The number of variable modes available per collection depends on your plan.

Anyone with can edit access to a file can create prototypes.

Anyone with can view or can view prototypes only access to a file can view prototypes.

Each variable in your collection can have multiple modes. You can select and use the values for specific modes in your prototyping actions and expressions.

There are several ways you can use variable modes to enhance your prototyping experience:

Set mode values based on context: Use multiple mode values of the same variable in your design, and change their values independently in the same interaction
Use mode values in expressions: Use the values of specific mode definitions to build interactions and perform calculations
Change variable mode with an interaction: Use a prototype interaction to change the variable mode of a page

New to variables? Learn more here:

Want to get more hands on practice?

Check out the advanced prototyping playground file →

Set mode values based on context

When a variable has multiple mode definitions, use the Set variable action and mode context to change the value of a specific mode definition.

This can be helpful when modifying only one mode definition of a variable. When displaying or using multiple modes of the same variable in a design, adjust their values independently from each other.

For example, take a look at the design below:

A checkout page design. There are two products listed, melons and shiitake mushrooms.

Each produce item has a counter to adjust the number of items added to the cart.

If a number variable with only a single mode is used to represent the item count, a unique variable and interaction would be needed for each product listing.

Instead, you can use a number variable with two modes—one for each unique produce item.

A variable collection with two modes, melon and shiitakes, and two number variables for each mode: itemCount and itemCost.

By using multiple modes, each item count can be updated separately.

Set the mode on the parent layers or objects.

Select the layer, group, or object that contains the applied variable. (For example, select the frame that contains the product image and information for the melon.)
From the Layer section of the right sidebar, click Change variable mode.
Hover over a variable collection and choose a mode. (Select the “melon” mode.)
Repeat for any other objects or layers that only apply to a specific mode. (Apply the “shiitakes” mode to the frame that contains the product image and information for the shiitake mushrooms).

Change the value of the applied variable with the Set variable prototype action. (For example, create a Set variable interaction on the + icon for each product counter. Set the itemCount variable to itemCount + 1.)

Any variables contained within a layer that has a set mode will only update the value of that specific mode definition.

The melon frame is selected, and from the Layer panel, it is set to the melon mode. Then, there is an interaction on the product counter next to the melon product that sets the itemCount variable to itemCount +1.

Use mode values in expressions

Select mode definitions in prototype actions

To select specific variable modes in prototypes:

Create or click on an existing prototype connection to open the Interaction Details modal.
Click on any variable name that you’ve used in the interaction.
From the Modes dropdown menu, select a specific mode of that variable.

Once you’ve selected a mode, the variable is represented with both the variable name and mode name:

variableName:modeName

An interaction details modal. The user clicks the objectType variable from the to field, and sets it to the objectType:apple mode.

Build expressions with mode values

Use expressions with variable modes to calculate values across a single variable.

This can be helpful when writing expressions that use multiple mode definitions of one variable.

A design of a checkout page. Two products are listed, melons and shiitake mushrooms, and each product has its own product counter and subtotal. There is a total order amount listed at the bottom.

Tip: In order to apply different modes of the same variable on a the same design, apply a variable mode to the frame or component layer.

Now, take a look at the variable collection:

A variable collection with two modes, melon and shiitakes, with three number variables: itemCount, itemCost, and itemSubtotal.

When using expressions, there are times when you’ll need separate values for each variable mode. For example, to calculate the itemSubtotal of each produce type, use an expression that multiplies the mode’s itemPrice by its itemCount.

An interaction on the + icon on the melon product counter: Set itemSubtotal to itemCount:melon * itemCost:melon.

An interaction on the + icon on the melon product counter: Set cartTotal to itemSubtotal:melon + itemSubtotal:shiitake.

Want to learn more best practices for prototyping with variables? Subscribe to Figma’s YouTube channel.

Change variable mode with an interaction

Use the Set variable mode prototype action to change the variable mode of the current page.

For example, if you have a design with a light and dark mode, you can use the Set variable mode action to switch between modes while playing a prototype.

set variable mode gif example.gif

To use the Set variable mode prototype action:

Create a prototype interaction.
For the prototype action, select Set variable mode and do the following:
1. From the first dropdown menu, select a variable collection.
2. From the second dropdown menu, select a variable mode.

Learn more about setting variable modes on objects →

···

Set mode values based on context

Use mode values in expressions

Select mode definitions in prototype actions

Build expressions with mode values

Change variable mode with an interaction

Set mode values based on context

Use mode values in expressions

Select mode definitions in prototype actions

Build expressions with mode values

Change variable mode with an interaction