Figma Expressions: Dynamic Prototypes with Logic and Math

WHY IT EXISTS Prototyping with basic variables can require dozens of frames to simulate dynamic behavior like a changing shopping cart total. Expressions were created to solve this by allowing prototypes to perform calculations and evaluations, bridging the gap between static mockups and real, logic-driven applications.

THE MENTAL MODEL Think of expressions as spreadsheet formulas for your design. Instead of only setting a variable to a fixed value (like quantity = 1), you can set it to a calculated value (quantity = quantity + 1). This lets your prototype react dynamically to user interactions using logic, not just pre-linked screens.

HOW IT WORKS An expression combines values (like a number 10 or a variable price) with operators (like + for addition). You write them directly into the input fields of two specific prototype actions. First, the Set variable action, to change a variable's value based on the expression's result. Second, the Conditional action, to create an if statement that runs only if the boolean expression evaluates to true. Figma validates your syntax in real-time, outlining invalid expressions in red.

WHEN TO USE IT Use expressions when your prototype needs to calculate, combine, or evaluate something based on user input. This is ideal for building interactive components like a shopping cart that calculates a running total, a volume slider that scales an object's size, or a welcome message that combines a user's name with a static greeting string.

WHEN NOT TO USE IT Avoid expressions for simple state changes that are better handled by component variants. If you're just swapping an icon from 'off' to 'on', a simple OnClick > Change to interaction is faster and clearer. Expressions are for dynamic logic, not just visual swaps. They are also a feature of paid Figma plans and will not work on the free tier.

ONE CANONICAL EXAMPLE To create a quantity counter, first define a number variable called itemCount with a default value of 1. Create a '+' button. For its OnClick interaction, choose the Set variable action, select itemCount, and in the to field, type the expression itemCount + 1. Now, clicking the button will dynamically increment the variable's value, which can be displayed in a text layer on your prototype.