Prototyping with Variables in Figma

In this tutorial-like story, I will cover some solutions for advanced prototyping in Figma using Variables.

Before the June 2023 Update of Figma, where the Variables were introduced in the beta phase, users had to use plugins to handle variables in Figma. But now there is official support for variables.

Now the variables can be used for a ton of things, like Color Tokens where different colors can be applied to the same Component and change depending on their state etc.

Technique I

It can also be used for small things like a disabled button which will become an enabled button after certain conditions have been met. For example, for a Terms and Conditions Checkbox:

Setup

To achieve this, these components have to be created:

A button with 2 variants: enabled and disabled.

A String Variable which is set to disabled (CheckButton in our case)

And an element with Checkbox and button. This button needs to be assigned to the Variable (CheckButton).

Conditionals

Now for the whole thing to work, these conditionals have to be set.

1. For the Checkbox:

if CheckButton == "disabled"
set Variable CheckButton to "enabled"

else 
set Variable CheckButton to "disabled"

In the same loop, the button state of the Checkbox itself has to be changed with the “Change to” option for variants.

2. For the Button:

if CheckButton == "disabled"
// whatever you want if the button is disabled
else 
// whatever you want to happen when the button is enabled

For the sake of this demo, I executed different overlays for the disabled and enabled button state. I had to use this hack to position the overlay correctly, since the combination of conditionals and overlays is bugged in Figma until now.

Technique II

The next element is basically a price calculator.

To understand what’s happening here: on the left are various brands, which get assigned with license pates in the center. Since Figma isn’t able (to my knowledge) to convert text input into content, the functionality there is simulated with a click dummy (1 click, enter plain license plate number, 2nd click converted into an actual plate (which also means first pack selected), 3rd click 5 plain license plate numbers, 4th click converted into 5 actual plates. One optional click to “remove” one plate.

While this center element is a plain click dummy (with 5 variants for each brand), the element on the right is a fully working prototype which calculates the amount of items and prize per brand and on the bottom as well in total.

Setup

This is achieved with a set of Number Variables

The variables are assigned to the amount and price boxes for each pack and total price

And in the click dummy section, whenever a text input is converted into an actual plate, the pack amount variable is set to the number of actual plates. The prize is calculated with the package prize times amount of plates.

Setting Variables

For every status change, four variables are set, the following examples are for 5 Plates, the latter two change the content of the total prize box:

Set Variable PackAmount1
to 5

Set Variable Pack1PrizeCalculator
to Pack1Prize * PackAmount1

Set Variable FullAmount
to PackAmount1 + PackAmount2 + PackAmount3 + PackAmount4 

Set Variable FullPrizeCalculator
to Pack1PriceCalculator + Pack2PriceCalculator + Pack3PriceCalculator + Pack4PriceCalculator 

I am not really happy with this solution since it demands a lot of manual setting of variables, and if a second product is added, the set of variables has to be duplicated and assigned to the second product for each step. But it does work, and is shows a way of how variables can be used.

If anyone has a more advanced solution for this problem, I would love some feedback.

PS: These solutions were worked out as part of the vLink Platform makeover. The full case study on that is available here: vLink reworked