Hi, everyone!

In this post, we are back in Figma to upgrade our prototypes to a whole new height of awesomeness with the use of Variables! Variables  bring new layers of functionality through interactions that take place in a single frame. Variables are also excellent to plan and build shareable libraries and design systems, so this is going to be a great read for beginners and more experienced User Interface (UI) designers who are looking to boost their game to Hero level!

This post is based on my Figma Essentials Course, available at Bring Your Own Laptop. Sign up now and join our growing community. Students have full access to all lessons, exclusive Exercise Files and Resources, and a Merit level Certificate at the finish line for outstanding projects!

What are Variables in Figma?

Variables in Figma allow us to store values like color, text strings, margin and padding sizes, and even conditional settings to add another level of interaction to our prototypes. Variables can be applied to multiple designs and prototyping features, and are great to set up modes, such as mobile and desktop or day and night modes. We can also use variables to create design tokens and advanced design system elements. Last but not least, variables can be published to libraries and shared across teams and projects.

Should we use Variables or Styles?

If you are now thinking, “hey, Styles in Figma already does that!”, we will be covering the difference between style and variables as we go, but we will  begin with the following:

1.  Variables hold individual, raw values. Think about solid color fills (#1ED2A9), numbers (22 or -22.15), Boolean values (true or false), or text strings. A variable set on multiple values can only express one value at a time.

Styles hold a set of combined values. For example, a text style includes values like font type, size, or spacing. These values are applied all at once.

2.  Variables can reference other variables. This is incredibly valuable for design tokens and design systems.

Styles can’t reference other styles. In other words, we can’t create a text style that holds another text style inside. They are limited to their own group of combined settings.

Which Variables are featured in Figma?

•  Number Variables

Applied to object spacing and padding, number variables hold specific number attributes (4, 8, 12…).

• Color Variables

Used on backgrounds and buttons, color variables hold single color fill codes (#FFFFFF) 

• String Variables

Applied to any text field, from button labels to product descriptions, string variables hold specific text content. 

• Boolean Variables

Used for layer visibility and component variants, Boolean variables are set on True and False values to toggle between different states.

Tokens and Modes

•  Design Tokens

Design tokens are essentially, design decisions that hold individual variables, shared in libraries or design systems. Tokens hold Variables and define how they are applied to a project. 

• Modes

Variable modes can hold a group of design tokens combined together to represent a specific context of our project. For example, We can use it for color themes, like night and day, for previewing different copy, or adjusting the spacing and padding of elements for multiple screen sizes.

Let’s follow this example to bring all these concepts together: 

Now that we have our foundations set, let’s find out how we can improve our designs and prototypes using Variables!

How to create Variables in Figma

Let’s work with a product details page and learn how we can set up Variables and apply them to our designs. For this post, we will be focusing on Number and Boolean Variables.

Number Variables

As we can see below, there is a stock availability indicator on our page. Our users will expect to see that number change when they hit the “Buy Now!” button.

How can we do this without additional frames and noodles? We create a Number Variable!

First, we have to make sure that there is nothing selected in our workspace. Next, we click “Local Variables” from the Design panel to the right. Next, we select “+ Create Variable” and then “# Number” option from the drop-down menu.

Next, we should rename our variable, but we’ll leave the default for this example, and set the value that our stock indicator will display. Let’s enter 5. To finish, we just need to close this panel and return to the workspace.

Now we must assign our new variable to a design element, so we select the stock number, then click on the “Apply variable” icon we find on the “Text” properties panel and choose the “# Number” variable. Our stock indicator will change to 5.

We can change the attribute value to a Number Variable. Making sure there is nothing selected, click on “Local variables”, and edit the “Value” field. In this case, let’s set it to 4. As we can see below, the stock indicator automatically updates to the new number.

Let’s step up a level. Now we want to assign our variable to the “Buy Now!” button. Let’s switch to Prototype mode and select the button. Next, we click on the “+” icon in Interactions to add a new interaction, select “On click” and then “Set Variable”.

Once again, we select the “# Number” variable and then define the mathematical expression we want to take place every time we click that button. Don’t worry, it’s nothing complicated. For this example, we choose “Subtraction” and then type “1”, because we want the stock indicator to count down one item for every time we hit “Buy Now!”.

Let’s test our prototype. Let’s hit the Present button up on top of our Prototype workspace or hit the shortcut Command + Option + Enter on a Mac or Control + Alt + Enter on a Windows PC.

Awesome! This is such a cool interaction! Our users are going to love it. And it’s so easy to set up.

Now we face an issue. As it is, our stock indicator will keep on counting down to negative numbers. That’s not a good thing, right? To stop this, we can add a Conditional to our Interaction. How can we add this?

Still in Prototype mode, we click on the variable icon that identifies the interaction, and then click on the “+” icon to add the new Conditional.

A Conditional takes a given element and sets up two following actions, as we often see in workflow charts, for example. This is what we will ask Figma to set up for us:

We have defined that if our “# Number” variable is greater than 0, each button interaction will subtract 1 to the active value. If “# Number” is equal to zero, don’t do anything!

Now we simply drag our first interaction to the Conditional “if” field and leave the “else” field blank.

That should do it! Let’s user test our product detail page and check if the stock indicator stops at zero if we keep on pressing the “Buy Now!” button.

Brilliant! Now we know that there aren’t any more Pegasus Running Shoes available! We’ve bought them all!

Timeout #1

Figma is a UI Prototype design tool. Why is prototyping so important for a digital product development cycle? Save some of your time for this cool article on how prototyping influences UI and UX design.

Boolean Variables

Did you notice that shopping cart up there? It is an instance of an icon cart component but, hey, it never changed as we shopped for our shoes! Users won’t like that, so we need to set up a Boolean variable to make it happen!

As we’ve seen earlier, Boolean variables can influence component variants and their states and, for that, they need them to be identified as true and false. Let’s have a look at our shopping cart component.

As we can see, our component is named “Cart” and both its variants are labeled as False for the inactive state and True for the items-in-cart state. This is very important: Boolean variables only work with these labels. If we use other labels Figma won’t spot them.

Now we’ve checked our component, it’s time to set up our new variable. As we did before, making sure there is nothing selected, we click on “Local variables”, then on “+ Create variable” and finally on “Boolean”.

Figma reads the component variants’ labels and references them in the “Value” field. The “True” or “False” value we define here will be set as the default state for the shopping cart instance placed on our page.

Let’s assign our new variable to our cart icon. We select the instance, then we jump to the instance properties panel, click on the “Assign variable” icon and select the Boolean variable from the drop-down menu.

 In Prototype mode, we click on the “Buy Now!” button’s interaction icon and add a new Conditional.

This is what we ask Figma: “if” the “# Number” variable is equal to four, don’t do nothing! If anything changes, set the Boolean variable to its “True” state.

Time to test our prototype and see if we did everything right!

Yes! It worked! When we click the “Buy Now!” button our stock indicator subtracts one item and the shopping cart icon becomes active.

Timeout #2

As we’ve learned, user testing is key for a successful UX and UI design project. Check out this article from the Interaction Design Foundation on this subject.

And there you have it!

Now you know what Variables are, how they work, and how you can apply Number and Boolean variables to your designs and create that professional looking portfolio.

What 's Next?

Dive deeper into Figma at Bring Your Own Laptop. When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up! 

See you in class! – Dan