Variable modes in prototypes

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

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.

1. Set the mode on the parent layers or objects.
1. 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.)
2. From the Appearance section of the right sidebar, click Apply variable mode.
3. Hover over a variable collection and choose a mode. (Select the “melon” mode.)
4. 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).
2. 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.

Use mode values in expressions

Select mode definitions in prototype actions

To select specific variable modes in prototypes:

1. Create or click on an existing prototype connection to open the Interaction modal.
2. Click on any variable name that you’ve used in the interaction.
3. 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

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.

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.

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.

To use the Set variable mode prototype action:

1. Create a prototype interaction.
2. 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.

Learn more about setting variable modes on objects →