Baseline #14 – A Guide to Variables in Figma

The feature we’ve been waiting for is finally here! Here's everything I've learned.

Hello again! 👋 Phew, what a busy couple of weeks! Since returning home from Figma’s 2023 Config conference, I’ve been spending time in the tool, working to adjust all of the various component libraries to use the many new features now available.

In this edition of the newsletter, and perhaps in the next few to come, I’d love to dive deep into each of those new features, uncover what’s new, and share all that I’ve learned as I make my way into everything. Let’s start by talking more about variables, what they are, how I’m beginning to use them, and a few shortcuts to help make workflows and creation more efficient!

---

All About Variables

Within almost every new product update, it seemed that Figma was working to bring new value to the design tool and introduce ways in which the two functions of design and engineering could become closer. The launch of components allowed designers to create and maintain reusable assets, such as buttons, inputs, and controls, often matching those building blocks in code with Figma. Styles let us more concretely define color, typography, and effects within designs so that these more primitive elements could be made consistent and accessible across platforms. For the first time, developers could reference a name representing a color or type definition instead of the raw output within the Inspect Panel.

But even with those added features, one important component (no pun intended!) had always been missing: the ability to create and use preset values or tokens within designs, such as for corner radius or spacing measurements. Support for repeatable values within Figma has finally arrived, and the Figma team has, of course, named this new feature variables!

Variables allow us to create, store, and use reusable values throughout Figma, such as text strings or colors. A number can be created and used to represent a system’s corner radius value or a color always intended for use as a button’s background color can be defined and referenced.

To understand more, let’s talk about the various types of variables available and supported within Figma today and how to apply each!

Creating Variables

To access the new Variables modal, where variables are created and managed, click on the canvas when inside a file so that no objects or layers are selected. This can also be done by pressing ESC. Within the right sidebar is a new section called Local variables, and clicking on the settings icon to the right launches the Variables modal. Here is where it’s possible to view all variables already made or to create a new one!

💡 Tip: Duplicate existing variables by selecting a variable row and tapping Shift + Enter to create variables even more quickly. (Thanks for this one, Molly!)