Mathematical Expressions in Figma Prototypes

THE MENTAL MODEL: Think of a variable with multiple modes as one spreadsheet column with several active rows. Instead of duplicating the entire sheet for every product, you point each UI element to its own row, then use expressions to update values inside that row. The calculation stays local to the mode context, so changing the melon count never collides with the shiitake count.

WHY IT EXISTS: Before multi-mode variables, a designer needed a separate number variable for every independent counter or state in a prototype. That scaled poorly; a grocery list with ten items required ten unique variables and ten unique interactions. Variable modes solve this by letting one variable hold parallel values, and expressions let those values participate in calculations during interactions.

HOW IT WORKS: You start by creating a number variable and adding a mode for each distinct context, such as melon or shiitakes. Next, apply the relevant mode to the parent layer or frame that contains the UI for that item. When you build the prototype interaction, use the Set variable action and specify the mode context. The expression then reads or updates only that mode's value, effectively giving you scoped math without scoped variables. This lets you perform calculations using the values of specific mode definitions.

WHEN TO USE IT: Use mathematical expressions with variable modes whenever a screen repeats the same UI pattern but needs isolated state. Shopping carts, ticket selectors, and rating forms all benefit. It is also useful when you want a single variable definition to maintain parallel values across different contexts.

WHEN NOT TO USE IT: Avoid this approach if the values must persist across pages or be shared globally without mode switching, because modes are bound to the layers where they are applied. If the calculation requires values from unrelated collections or complex cross-variable logic that exceeds the prototyping expression surface, you may need to simplify the interaction or split it into multiple steps.

ONE CANONICAL EXAMPLE: A produce app shows cards for melon and shiitake mushrooms. Each card has a counter to adjust the number of items added to the cart. Rather than creating unique variables for every product, the designer creates a number variable with two modes: melon and shiitake. The melon card's frame is set to melon mode, the shiitake card's frame to shiitake mode. A Set variable interaction on each card uses an expression to change the value within the parent frame's current mode, keeping the counters independent while reusing the same component.