Prototypes are interactive designs.
They allow people to engage with and experience how your designs will work in the real world.
Imagine a prototype that can make calculations…
or perform actions based on conditional logic, in just a few frames.
Actually, we don’t need to imagine—we can build it right here in Figma.
In this video, you’ll learn how to use variables to build advanced prototypes.
Looking for a refresher on variables or guidance on getting started with prototyping?
Check out related tutorials and help center articles
in description below to make sure you've got your foundations covered.
Variables are stored values that represent design attributes.
With variables, we’ve introduced two new prototyping actions:
Set Variable and Conditional, available on paid plans.
The Set variable action allows us to change the value of any variable.
For example, we might use a number variable to represent the cart total on a checkout page design.
We can: set variables to new literal values,
use Expressions to calculate new values with operations,
and even reference other variables in our new values.
The Conditional action allows us to use if/else logic in prototypes—
which means we can check for certain requirements before performing an action.
Let’s get started!
To follow along, grab a copy of the design from the community file linked in the description.
We’re designing a product listing for a farm fresh fruit and vegetable shop.
On this page, we see a listing for watermelon with an add to cart button,
the number of items available,
and a basket button in the top navigation bar.
How can we make this an interactive prototype?
Let’s start with one, simple interaction.
Every time a user clicks the “Add to cart” button,
we want to reduce the number of available watermelons by one.
To begin, we need to add a local number variable to represent the number of available watermelons.
Local variables are variables created directly from the file.
To start, deselect all objects on the canvas and click "Open Variables" from the right sidebar.
We’ll create a new variable collection titled “Product interactions”.
Then, create a number variable named "Amount available".
Our starting value is 4, though you could use any number you’d like.
Before we apply this new variable to our design,
let’s take a look at our layer structure to understand our design better.
We’ve created two text layers, one with the number “4” and one with the word “available”.
We’re using two separate text layers so that we can use different text styles,
and we’ll assign our variable to just one part of the full text string.
Both text layers are nested inside an auto layout container.
Both number and string variables can be applied to text content.
In this case, we’re using a number variable.
Select the text layer with the number 4,
then click the "Apply variable" icon from the text section of the right sidebar.
Select the "Amount available" variable to apply it to the text content.
Notice that the text layer is now associated with the “Amount available” variable.
You can see the variable listed at the bottom of the text properties section, highlighted in a gray pill.
To unlink a variable, you can click on the "Detach variable" icon or edit the text layer directly.
Now that we’ve created and applied our variable,
let’s switch to the Prototype tab and build our interaction.
The trigger, or what causes the interaction to start, is clicking the “Add to cart” button.
We’ve already built a component set for this button with an idle state, showing the button
when left alone, and a hover state, showing the button when a mouse hovers over it.
The trigger will take place on the hover variant, so let’s select it and add a prototype interaction.
Set the interaction to “On click.”
When clicked, we want the value of our variable to change—
so select the Set variable action, then select "Amount available" as the target variable.
If we only wanted to build a prototype example where the user clicks the “Add to cart” button once,
we could just use a literal value here and change the Amount available to “3”.
But what if our customer wants to buy more than one?
Let’s use an expression, or simple math operation,
so that the amount available can incrementally decrease based on the current value.
As you can see, variables and supported operators are suggested as we start typing our expression.
We can use these operators to add, subtract, multiply, or divide our number values.
For now, set the Amount available variable to Amount available minus 1.
Let’s play our prototype to see how it looks so far!
We can preview our prototypes directly on the canvas with an inline preview by pressing shift + space.
Great, looks like the interaction works!
Looking at our design…what more can we do?
It looks like if we keep clicking the “Add to cart” button, the number of available
watermelons goes into negative numbers.
To prevent this, let’s add a conditional.
Conditionals allow us to set rules for actions.
If a specific condition is met, Then an action can take place.
If the condition is not met, we have the option to set an alternative else action to take place, or no action at all.
Let’s think about our design.
If there are more than 0 watermelons available, then reduce the amount by 1.
Otherwise, or else, we don’t want to reduce the amount, so we’ll leave the else action blank.
Let’s go back to our “add to cart” button interaction.
Click the plus sign to add another action, and select Conditional to create our conditional rule.
Our condition is if there are watermelons remaining — so we’ll write that as:
If Amount Available is greater than 0
For the if action, we want to use the same action we created earlier —
Set Amount available to Amount available minus 1.
We could rewrite it,
or we could drag and drop our Set variable action and place it as our conditional if action.
All set! Let’s preview our prototype again.
Now, the number of available products stops decreasing once we hit 0.
So far, we’ve been prototyping with number variables.
But there are other types of variables we can prototype with.
Boolean variables can only have a true or false value.
We can use boolean variables with properties that also have true and false values,
such as layer visibility or variant properties.
Let’s start with an example that uses boolean variables with layer visibility.
Where can we use this in our prototype?
What if our text listing the number of available products disappeared once the watermelons are sold out?
First, let’s add a boolean variable to our collection named Is Available.
The starting value will be true, since our prototype starts with available products.
Next, let’s apply the Is Available variable to the text layer visibility.
Select the frame that contains the text layers that say “4 available”.
Then, go to the Layer section of the right sidebar, right-click the visibility icon, and apply the “Is Available” variable.
We’ll also bind the variable to the divider layer.
Now, the layers will only be visible if the “Is Available” variable is true.
Let’s adjust our original prototype interaction again to add in this new functionality.
The text layers should only disappear once we run out of watermelons, or when Amount available equals to 0.
Click the plus icon to add another Conditional action on the interaction.
If the Amount available equals to 0, Then set the Is Available variable to false.
We can leave the else action blank.
Let’s preview our prototype again to confirm that now once we hit 0 available watermelons,
the text layer disappears.
Looks like it!
When you have multiple actions on a trigger, they run in order—so the order you place them in is important!
In our first condition, we decrease the Amount Available by 1.
If the Amount Available is 0 by the end of the first condition, the second condition triggers as well.
However, if we re-order the two conditions, the interaction doesn’t work as planned.
When the Amount Available value is 1, it doesn’t pass the first condition—so the text layer remains visible.
Then, the second condition check decreases the Amount Available to 0,
and the text remains visible as the interaction has already completed.
We’ve added quite a few interactions in this one frame so far—
let’s see if we can add one or two more.
Take a look at the basket button at the top of our page.
We have a component set already created for this button.
We’ve added a “has cart” variant property,
with “true” and “false” values—
showing what our button looks like when there are items in the basket,
and when there are no items in the basket.
We start with an instance of the “false” variant on our frame,
since we don’t have any items in our cart to start.
With variables, we can automatically update the variant once an item is added to the cart.
To start, we’ll add another boolean variable—we’ll name this one Has Cart,
and set the starting value to false.
You’ll notice that the values of our boolean variable — true or
false — match the values of the variant property.
Let’s adjust our interaction so that our new Has Cart variable updates.
The “has cart” value should switch to true once an item is added to the cart,
so we’ll add an nested action to the if amount available > 0 condition, and select:
Set variable “has cart” to true
Next, we’ll bind that boolean variable to the button instance on our frame.
Select the instance, then click the variables icon next to the “has cart” variant property.
Click the “has cart” variable we just created to apply it to the instance.
If we check our prototype preview again,
it looks like our button variant automatically updates once we click “add to cart” — nice!
Let’s apply the same principle to the “add to cart” button.
We have a component set for the “add to cart” button.
We’ve added a “cart button text” variant property,
with “available” and “unavailable” values—
showing what our button looks like when there are products available,
and when there are no products available.
In our basket button example, we used a boolean variable to automatically update
our variants—let’s try the same thing, but this time we’ll use a string variable.
Open up our local variables one last time, and this time add a
string variable named “cart button text”, with a starting value of “available”.
Let’s go back to our interaction to add one last action.
We want our “add to cart” button to update to the “unavailable” variant once we run
out of watermelons.
This means we’ll need to add another nested action to the If Amount Available equals to 0 condition,
and this time we’ll set the value for the cart button text variable.
This is a string variable—so we’ll want to set its new value to “unavailable”, which matches
the value of the variant property.
Now, we can go to the instance of our “add to cart” button on our product page, and bind the
cart button text variant property to our button state variable, since they have matching values.
Play the prototype to test the interaction — looks great!
We were able to update multiple elements with a single click, all in the same frame.
Looks like it might be time to restock on watermelons!
If you want to get your hands on the example built in this tutorial,
check out our community file linked in the description below.
If you want to try expanding on what we’ve started,
we challenge you to add some more variables
and use expressions to add a “cart total” value somewhere in the design!
For more inspiration on what to build next,
subscribe to our channel for more Figma tutorials,
or check out some of the resources created by our Designer Advocates, linked in the description.
Let us know in the comments how you use variables in your prototypes — we can’t wait to see!