Figma Variables: Complete Guideline and Learning Documentation
Issue #5
We already know that Config was held in San Francisco and virtually on June 21–22, 2023. And the most popular over other features they introduced were Variables.
What is Variable?
As designer maybe we are already familiarized with the terms of design tokens in design system, but here Figma used this term “Variable” because I believe it could help to bridge the gap between designers and developers when hand-off the design file.
This feature offers and assists many designers to manage and implement the systemic approach towards the design system. Also it allows designers to create, maintain, and store the reusable assets or components they build in Figma file.
So, what is variable exactly?
Well, variable is reusable values that can be applied to all kinds of design properties and prototyping actions. This building blocks also work along with dev mode in Figma — which is the other new features of Figma.
When I started to learn variables, I reckoned that Figma used this term as a design token since in programming itself there is a variable which has the same concept.
Back in the day when I was a front-end dev, I learned SASS (CSS pre-processor) and it has variable inside the code. Therefore, I assumed that Figma took the same concept from it and implement to this feature.
Types of variables
In SASS, the developer create and define the variables that we can store inside the CSS as such: colors, numbers, strings, etc.
This is definitely the same as Variables in Figma and there are 4 types:
- Color → apply to any colors, like fill and strokes.
- String → apply to text layers, including the nested instances
- Number → assign any numerical values to variable. It can be used for corner radius, min or max width and height, spacing, padding or gap, and font size.
- Boolean → assign the values of “True” and “False”. Somehow it allows you to hide or show the component just like the component properties. This only possible to bind them within a component instances (◇) not the main component (❖).
How to implement it
This is how it looks like when you already created the variables with values inside of each the variable types, from Colors until Boolean.
After creating the variables you need, I found it a bit tricky when I wanted to implement or assign my variables to my design elements. So, I made this guide and learning documentation in case I forget in the future.
The most tricky one was implementing color variable since it has an eye icon — and apparently to use this we must click the Styles icon.
Besides, the Text layer is tricky too! We must hover our cursor until the variable icon appear as seen as the image above.
Aliasing the variables
It must be hard and time-consuming if we don’t use the proper and neat documentation in our design system, especially when it comes to big system with so many variables inside.
Aliasing is connecting one variable’s value to existing variable inside your local variables with different variable collections or groups in the same collections.
What I learned about this, using alias to differentiate and separate between my base or main variables to other variables when assigning their values within each other (Look at the image above).
The concept just the same like nested components — but it’s variable, not a component hehe. I took UI2: Figma Design System as a reference.
In that case, I learned that they — Figma’s designers are using Global Colors as their main color variables and separated them with groups in the same collection, and they applied the aliasing to their variables such as: 🎨/white/1000 that means the original variable is in group name 🎨
How to create groups in variable collection
To separate many variables inside your collection, using group names are the most required and helpful one since it could help you as designers to organize them within a file or local library.
For example, the “Boolean Examples” is the group name and consists of boolean variables such as showLayer 1, showLayer 2, and showLayer 3 that I made inside there. By clicking right on your mouse, you can create group.
How to read the documentation
As you can see in the Colors collection, the groups name “✦” and “🎨”.
Imagine the local variable in your Figma file as folder that has files or folder that has other folder inside it.
When you see the group name such as _text, _icon, etc. inside the ✦ group name this could confuse you as designer if you wanted to tell to other people in your team. Instead telling them as that,
I used analogy of folders and files.
For instance, the ✦/bg/assistive is in Colors collection and has colors variable (default, hover, pressed, and so on). To narrow or read this documentation, you just need to understand the concept of files inside the folder you made.
The folder is ✦ and inside it has _text until bg. Look this image above carefully, the assistive is in indent position which means it is inside the bg folder.
Still confuse? look at this image below.
Yes. That is a sub folder, when you already have a main folder and it has other folder again inside it. This concept just like you create a folder inside your computer.
It’s highly recommended if you had tons of variables by creating a new variable or renaming one that exists, type “/” in the name to create a new group, where the string after the “/” becomes the new group’s name.
Scoping the variables
Recently Figma on Twitter released Scoping variables, even it’s still in beta version. It will help designers to scope, hide, edit, and define variables across platforms.
When enter scoping variables, you can set and adjust which variables that will you assign to your element in your design file. It also shows you the value of the variable itself.
I haven’t used the syntax code variables in my design, but I already tried once to explore what is the function and how it works.
Apparently, it generate your variables into syntax code into multiple device you choose, like: Website, Android, or even iOS.
Modes in Variables
Maybe we are already familiarized with the terms of “modes” or “mode” that always happen when you build design system for Light and Dark.
You can switch between light and dark modes in Figma by setting and assigning the variables you created in your local variables.
Not only for light and dark, but also for media screens, or even languages. Modes allow you to implement alternatives value or design tokens between different contexts.
Further, you can switch modes for layers, frames, components and component sets, sections, groups, and finally, and entire pages if only the variables already adjusted and assigned.
You can see how it works in this video below.
Publishing the variables to library
If you are in a team and has a big components and variables in your design system file, make sure to check and review your variables and all before publishing the library.
This included the variables you don’t want them to be appeared on the assets or your local libraries. So, what should you do?
Do you still remember when I wrote about my design learning documentation that told about the function of “.” and “_” in Figma?
If don’t, let’s recall them back!
When you try to create a component set and typing (.) or (_) in your layer or frame it will help you to hide them in publishing and updating the libraries. This rule same applied to variables.
You can type them before the name of your group variables — see the image below and read all of them what I annotate there.
Moreover, you can hide the variables from publishing library by checking the checkbox in scoping mode, but I found it is still not efficient if we must clicking the check there one by one — I still need to figure out how to make that less time-consuming.
Therefore, those all my 56 hours well-spent after learning variables and implement those in real world project.
I also learned a lot from people’s perspectives and Figma Design System to gain deeper understanding about variables. I’d love to look forward for the next updates for variables and other features in Figma.
Cheers 🍻
Enjoy this learning and next I’ll tell about advanced prototyping by using variables and its cases.
Sources:
- Guide to Variables in Figma
- A Guide to Variables in Figma by Joey Banks
- 8 new figma tips shared at Config 2023
- Figma’s new feature: Variables
- Figma Variables — Ultimate Guide
- Config2023 Launch 2: Variables
- Variables by Figmalion
After reading this:
1 — Subscribe to this newsletter if you find out useful.
2 — Share this to your social media or friends. This newsletter update 2–4 articles once a month.
3 — Support or Like this article! It will help me to grow if my article is useful and interesting enough for you to read more about this kind of one again.
Continue Reading
Older post: My design learning documentation in 2022 Recap (before updated)
