🚧 Variables is currently in open beta. We'll continue to add more features and polish the experience during this time. Find out what's coming next →
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.
can edit access to a file can create prototypes.
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.
- 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 + 1.)
Any variables contained within a layer that has a set mode will only update the value of that specific mode definition.
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 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:
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
itemSubtotal of each produce type, use an expression that multiplies the mode’s
itemPrice by its
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.