Smarter prototyping: How designers can use variables to build realistic flows

This not only reduces risks but also speeds up time to market, optimizes costs, and improves communication within the team. In this article, we're shifting focus to designers:

• How do variables actually work?
• How to use variables effectively in prototyping?
• And how can they help you create smarter prototypes that reflect real & dynamic user flows?

Let’s break it down step by step.

Where prototyping with Figma variables can be helpful

Variables enable conditional logic, allowing you to create realistic user flows and simulate dynamic behavior in your prototypes. This makes interactions feel closer to real product experiences, which leads to better usability testing and faster client feedback.

They can store Numbers, Text, Colors, or Booleans. This allows you to:

• Show or hide elements based on user input
• Update counters or selections
• Switch between modes or content
• Avoid creating countless static screens

For example, in a product catalog prototype, you no longer need separate frames for each product. With variables and modes, you can now dynamically swap content. Additionally, if you're prototyping a shopping cart, variables can store item quantity and price, allowing you to update the total in real time. This kind of logic used to require developer involvement or wasn’t testable at all during the Figma design phase.

Basics

Variables

In prototyping, variables store the states or properties of objects. By using interactions, you can change variable values, which will affect the appearance, content, or visibility of objects in the UI/UX design.

Prototype interactions

Interactions are the connections between user actions and changes within the prototype. They define how users can interact with elements — like buttons, forms, or images — and what happens in response to those interactions (e.g., switching content, showing/hiding elements, etc.). Interactions bring prototypes to life by enabling dynamic behaviors based on user input.

Set variable

This action allows you to update the value of a variable. For example, pressing the “+” button in a cart increases the item quantity — the value of the variable updates without the need for a separate screen.

To set or modify a variable in a prototype, you need to define a few key components:

• Trigger – the event that starts the process (e.g., clicking a button)
• Action – what happens after the trigger is activated (Set Variable)
• Target – the variable you want to update (e.g., Item Quantity, Product Price)
• Value – the new value the variable will be set to (e.g., Item Quantity + 1)

Set variable mode

Use this action when you want to switch between predefined states — for example, toggling between light and dark themes or showing different product content when a user selects an item.

Unlike Set Variable, which updates a single variable, Set Variable Mode changes the active mode of a collection — a group of variables that change together depending on the selected state.

To use it, define:

• Trigger – the event that initiates the change (e.g., clicking a button)
• Action – the interaction that follows the trigger (Set Variable Mode)
• Collection – a group of related variables (e.g., product name, image, price)
• Mode – the specific configuration you want to activate (e.g., “Product A”, “Product B”)

Condition

Conditional actions let you add logic to your realistic prototypes, similar to if/else statements in programming. This helps you control what happens based on variable values or user actions.

For example, if a variable equals “X”, show one element; if it equals “Y”, show another.

Use conditions when you want to check specific criteria before triggering an action.

To set it up, define:

• If Condition – the rule that must be true for an action to happen (e.g., if emailState = error, display error message)
• Else Condition – what happens if the "if" condition is not met (e.g., move to next screen)

Expressions

Expressions allow you to manipulate data, apply logic, and create dynamic behaviors within a prototype. They help bring your Figma design closer to real user experiences.

Numerical expressions

Used to perform basic calculations with numbers — for example, automatically summing up the total in a shopping cart, managing progress bars, or scaling objects like volume sliders.


Example: item 1 price + item 2 price + item 3 price to display the total cost in a cart.

String expressions

These allow you to combine and build new text strings based on user selections. You can dynamically create text content depending on the user’s input or choices.


Example: Combine user input like a name and display "Welcome, " + userName.

Boolean expressions

These expressions control layer visibility or variant properties by using true/false values. They can determine whether an item is visible, active, or hidden depending on specific conditions.

Example: Set variable sprinkleVisibility = true. Then set the variable cakeComplete to:

• cakeVisibility == true and
• frostingVisibility == true and
• sprinkleVisibility == true

This checks whether all parts of the cake are visible.

Source: Figma Learn

Applying variables in interactive prototyping

In our previous article, we explored simple use cases to demonstrate how variables can address business needs. Now, let’s dive into a more advanced scenario.

In this guide, we’ll cover two examples — both showcasing how variables, modes, and conditional logic can enhance your prototypes:

• One for navigating from the homepage to product detail pages
• And another for building a dynamic shopping cart experience

Note: This is a fictional example created to showcase the power of interactive prototyping with variables.

Example: Switching between products

In this example, we’ll walk through how to create an interactive prototype that simulates navigating from the main page to different product pages. By using variables and modes, we can avoid duplicating frames for each product and build a much more realistic flow.

Step 1: Create a product “database”

Collect all necessary product data — images, names, prices, specifications, and descriptions. These values will be used to dynamically change the content.

Step 2: Create variables and modes

Set up variables for each dynamic property (e.g., Image, Title, Price, etc.). Then, create four modes — one for each product — and assign specific values to each variable in every mode. This way, each mode represents the full dataset of a single product.

Step 3: Build UI components

Design the following components:

• A product card for the main page
• A product detail page
• A set of product cards for the recommendations section (reusing the same product card component and switching content via variable modes)

Step 4: Apply variables to UI

Apply variables to the relevant elements within your components:

1) Main page product card: bind variables to the image, title, technical parameters, and price: Video

2) Product detail page card: bind variables to the image, title, price, technical parameters, and product description: Video

3) Home page: create an auto layout with a set of product cards. Assign a different variable mode to each card (e.g., Product 1, Product 2, etc.) so that the content in each card updates automatically — displaying different products on the page: Video

4) Product detail page:

• Apply variables to breadcrumbs so the section name (e.g., Tech Chip, Core Unit) updates based on the selected product
• Apply variables to the recommended product cards so they reflect relevant suggestions depending on what’s selected: Video

Step 5: Build prototype interactions for each card

1) Homepage cards:

For each card, add an interaction:

• On click → navigate to Product detail page
• Set variable mode to match the selected product.

This opens the correct product page with relevant content.

2) Proposal сomponent:

Add an interaction to each recommended product card:

• On click → navigate to Product detail page
• Set variable mode to load the selected product.

Step 6: Test the prototype

Check all interactions and variable changes to ensure everything works as expected:

• Each product card on the homepage should lead to the correct product detail page based on user selection.
• Each recommended product card should also navigate to its corresponding detail page: Video

Example: Dynamic shopping cart

In this example, we’ll walk through how to build a cart experience where users can increase or decrease item quantity and see the total amount update accordingly.

Step 1: Create a cart item component

Design a component that includes:

• Product image
• Name
• Description
• Price
• Quantity counter (with + / – buttons)

Step 2: Create variables for quantity and total price

Define variables:

• Quantity (number of units)
• Amount (item price × quantity)
• Total (sum of all item amounts)

These values will update dynamically based on user interaction.

Step 3: Apply variables to the corresponding elements in the components

• Bind the variable Quantity to the quantity counter of each cart item
• Bind the variable Amount to the price of each cart item
• Bind the variable Total to the total sum of the cart: Video

Step 4: Build prototype interactions for adjusting item quantity in the cart

Set up interactions on the “Decrease” and “Increase” buttons to update item quantity and recalculate the cart total:

• On click of the “Decrease” button, reduce the item quantity by 1 (only if it’s greater than zero to prevent negative values). Then update the corresponding item amount and the total.
• On click of the “Increase” button, increment the item quantity by 1. Then update the item amount and the total accordingly.

Repeat this logic for each cart item.

Step 5: Test interactions

Run the prototype to verify that all values update correctly when adjusting item quantities. Make sure:

• Item amounts recalculate accurately when increasing or decreasing quantities
• The cart total reflects all current item values in real time: Video

Practical tips for prototyping with variables

Working with variables in Figma brings a lot of flexibility, but it also comes with potential pitfalls. Here are a few lessons we’ve learned that help avoid common mistakes and save time.

• Case sensitivity matters:

"Enabled" ≠ "enabled". Even a small typo breaks the logic, and there’s no warning.

• No built-in validation:

Figma won’t alert you about missing or miswritten values, so be extra careful with naming.

• Automatic doesn’t mean perfect — fix it if needed:

We had a case where we needed to update a button label based on user selections. Initially, the label changed correctly when items were selected. But when the selection was cleared, it didn’t revert to the default label. We fixed it by adding a condition: when no items are selected, the label shows a specific text instead of relying on the default.

• Document your interaction logic:

It’s helpful to annotate why certain interactions or conditions were added. This can make it easier for teammates — or your future self — to understand and update the prototype later.

Conclusions

Incorporating variables into your Figma design workflow empowers designers to communicate ideas more effectively, iterate quickly, and deliver a refined user experience. With the ability to test and refine designs during the prototyping stage, designers can address both user needs and business goals before development begins.

If you're looking to create interactive, dynamic prototypes that reduce risks and optimize the design process, variables in Figma are the key to achieving those goals.