Supporting Interactivity with Figma Variables

Introduction

Figma Variables are a powerful tool for creating interactivity beyond simple click-flow interactions. Not all variable features are obvious, and the official documentation can be a bit lacking. There are also a few gotchas to look out for when using variants and resetting variables within flows.

In this tutorial we're going to explore the Figma project below. We're not going to build this design up from scratch, rather we'll use this project to explore some of the features of Figma Variables.

Prerequisites

• A Figma account
• Download and import the example Figma file (.fig)

Filename	Type	Size
variables.fig	Figma .fig	45 KB

Types of Variables

1. Color - store and update a Figma color value. Great for maintaining background and object color state. You can attach a color variable to the fill and stroke properties of objects.
2. Number - store and update a numerical value. You can use these variables to store object dimensions by attaching them to the width and height properties of objects.
3. String - store and update a string. Store names and labels for different parts of your interface.
4. Boolean - store a true or false value. Booleans are great for keeping track of the state of buttons and checkboxes. They can be used in conditional prototype statements and attached to the appearance property of objects to control visibility.

When you create a new variable in Figma, you can set a default value (just like JavaScript and Python). You can then use these default values throughout your Figma design by looking for the variable icon . Even if you never update or change a variable via interaction prototyping, you can use these variable defaults to save information about your project.

Local variable management

All variables for your Figma design file can be created and managed through the Local variables modal. Finding this modal can be tricky if you have any objects or frames selected in the interface. Deselect any interface items by clicking on the canvas, then find the Local variables label in the right sidebar and click the Open variables icon . This will bring up the variables modal and allow you to create and edit existing variables.

Tip

Take some time to explore the local variables modal. Create and edit variables to understand their affect on the prototype behavior.

Using variables in your designs

Each variable type can be used in specific places throughout your Figma design. You'll know a parameter is able to be set with a variable by locating the variable icon . When you click this, you'll be presented with a list of compatible variables to use for that value. The pattern is found in the Layout and Appearance property inputs.

You'll also find two other options for setting variables in the right sidebar interface:

1. In the Fill section, clicking on the quadrant icon opens a dialog for color variables. Any color variables you have set in the Local variables modal will be available here.
2. In the Appearance section, right-clicking on the eye will open a dialog of boolean variables. These are handy for changing the visibility state of specific objects in your design.

Tip

Pay attention to hover states when looking for variable options on properties. The the variable icon is sometimes hiding in plain sight and is almost always very small. You may also need to right-click menus (like the the Appearance eye ) to get variable options to appear.