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

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 two 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 Layer section of the right sidebar, click Change 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 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.

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 Details 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 itemSubtotal of each produce type, use an expression that multiplies the mode’s itemPrice by its itemCount.

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.