Variable modes in prototypes
đ§ 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.
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
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 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
variable toitemCount + 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:
variableName:modeName
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 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.
Want to learn more best practices for prototyping with variables? Subscribe to Figmaâs YouTube channel.