Variables
As Figma describes, “a variable is something that can vary in value or take on multiple values”. They are also reusable values that can be applied throughout a design. An element becomes a variable in Figma when we assign it a range of alternative appearances.
Think of a shoe. A single shoe design can come in various sizes (39, 40, 45, etc.) and sometimes different colors (red, blue, green, etc.). Each size and color can be replicated multiple times to meet the diverse needs of customers. This is possible because a shoe company defines these values, allowing them to reuse them to create, for example, a red size 5 shoe for a baby or a black size 43 shoe for an adult when needed.
Similarly, variables enable text color to be either #000000 or #ffffff, or other contrasting colors, depending on whether a design is in light mode or dark mode.
.png)
Likewise, an H1 text can have various line heights and font sizes depending on whether it’s used on mobile, tablet, or desktop.
.png)
The fact that the same text or H1 can be made to appear in different ways depending on where it is used makes it a variable.
What items can be turned into a Variable?
There are 4 kinds of variables on Figma:
- Colors: color fills
- Numbers: Dimensions, corner radius, and autolayout properties
- Strings: Text layers and variant properties
- Boolean: true-false toggle (such as layer visibility)
Aren’t Variables just Styles?
Unlike Styles, variables offer a more comprehensive library for storing items and the values they can take on. For instance, a variable (e.g., text) can take on multiple other variables (e.g. colour and spacing) as a value.
In summary, the Variables feature on Figma does three main things:
- Store an item to be reused multiple times
- Store the different values that the item can take on so that it can change in different contexts
- House other variables
How can you create variables on Figma?
You can build a variable library using ideas from Dan Frost’s Atomic Design Framework. The framework suggests that a UI is made up of hierarchical elements. The elements add up incrementally to create a design system.
It starts with atoms; these are the most basic design properties like colours, type, and spacing. A combination of multiple atoms create a molecule like buttons (colors + spacing + type), form input boxes, and so on. Similarly, one or more molecules result in organisms such as a form field (input boxes + buttons) or a section (type + button). The last two stages in this framework are templates and pages.
In the same way, you can build a variable library incrementally:
<aside> ????????♂️ primitives (or baseline variables) ➤➤➤ tokens (or semantic variables) ➤➤➤ modes
</aside>
You can call them Variable Building Blocks
<aside> ☘️ Step 1
</aside>
Start by opening up Figma. Deselect everything on your board and on the left panel, click the icon beside “Local variables”
<aside> ☘️ Step 2
</aside>
You’ll then want to click “Create variable” on the popup that appears
Before you move on to the next steps, stop to understand what Variable Building Blocks are and how the other steps fall into them.
Baseline Variables
These are the fundamental elements that define your design properties. This is a good time to remember the items that can be turned into variables. A color baseline variable, for example, will ideally contain the values of the colors you wish to use in a design. Follow the next steps:
<aside> ☘️ Step 3
</aside>
Select “colour” in the drop down
Name the colour (white, black, etc) and define the value (#ffffff, #000000, etc). In the example below, two colours have been added. You can add more colours by clicking “Create variable”
<aside> ☘️ Step 4
</aside>
Group your colors. To do this, select the colours you wish to group together (hold down the shift key to select more than one colour), right click, and select “New group with selection”
In the images below, three groups were created and named. You can rename a group by double clicking it and typing in the new name
You can also embed groups into larger groups as shown below. This is useful for sectioning different kind of variables.
Screen Recording 2023-08-09 at 10.56.48 PM.mov
<aside> ☘️ Step 5
</aside>
Rename your collections. Your new variables are automatically placed under a collection generically named “Collection 1”. To rename a collection, click the collection name at the top right corner of the pop-up and select “Rename collection”
<aside> ????????♂️ A collection is simply a groups of variables. Think of them as folders
</aside>
You can add more collections, and will learn how to very soon. This feature is very useful because it will help you segment your Variable Building Blocks into different “folders”. In the video below, number variables are added and grouped. The Collection is also been named “Baseline Variables”
Tokens (Semantic Variables)
Tokens are higher-level design elements that provide consistency and coherence throughout your design. Here variables are created for their functions rather than for just their value.
Think of tokens as semantic markers that provide clues to how and when a design elements should be used in a design. In contrast, baseline variables do not have these descriptive name . In addition, tokens are made up of baseline variables. In Figma terms, tokens reference baseline variables.
<aside> ☘️ Step 6
</aside>
To create your Token, you’ll need to create a new collection.
Clicking “Create collection” will lead you to a screen exactly like the one in Step 2.
<aside> ☘️ Step 7
</aside>
Click “Create variable” and select “Color”. You can also go ahead to rename your collection to “Tokens ” as seen below.
<aside> ☘️ Step 8
</aside>
Name your tokens and reference them to relevant baseline variables.
Screen Recording 2023-08-10 at 12.23.11 AM.mov
In the media above, colour variables was created for text, background, button, and border radius. Border radius variables were also created for buttons and cards.
<aside> ????????♂️ There are a variety of ways to name design token, and different establishments like Nord and The Design System have different recommendations. Ideally, names should be short, meaningful, easy-to-understand, modular, and consistent.
</aside>
Modes
The largest body of Variable Building Blocks are Modes. Modes allow you to define different design variations, such as light mode and dark mode. These modes modify your core design properties to create distinct visual experiences.
Back to our items:
- Number variables can allow you to number values (such as spacing, padding, font sizes, etc) across your pages and screen, resulting into mobile, tablet, and desktop of the same design
- String variables can allow you switch the text on a page between different languages
- Boolean variables allow you to toggle specific elements on a design – such as an alert that only appears in certain situations
<aside> ☘️ Step 9
</aside>
In your Tokens collection, click + button in the column header and a new mode will be created.
<aside> ☘️ Step 10
</aside>
Change the values in the new mode. The values in your first mode are automatically duplicated, and you’ll need to change them.
Screen Recording 2023-08-10 at 6.57.25 AM.mov
<aside> ☘️ Step 11
</aside>
Rename the mode. In this example, the modes are Light and Dark. It could be anything, depending on the kind of variations you want
Screen Recording 2023-08-10 at 12.23.11 AM.mov
Heading out…
There are quite a number of limitations to Variables on Figma, as the feature is currently on a beta release.
- How to apply variables to your design
- Each variable type
- How to add Tokens to your design
- How to add Modes to your design
- Token naming conventions
- Variable prototypes
- References
Author
<aside> <img src=”https://prod-files-secure.s3.us-west-2.amazonaws.com/8cfb3804-b287-4ed3-bc64-b72b3a51f6ad/1bf13300-fde6-457d-ace8-958813f0e743/LW.png” alt=”https://prod-files-secure.s3.us-west-2.amazonaws.com/8cfb3804-b287-4ed3-bc64-b72b3a51f6ad/1bf13300-fde6-457d-ace8-958813f0e743/LW.png” width=”40px” /> Lami Williams
</aside>
Published
Aug 10th 2023
Last Edited
Sept 10th 2023