How I name and arrange my color variables in Figma.
--
Well, you can use this system for any variable in Figma
Lately, I’ve been on a journey to implement, arrange, and understand variables in Figma. It’s not without its headaches and confusion but it has been rewarding, to say the least. I am beginning to see fruits.
Some background
Normally, I always start with creating color styles. I always end up with colors like this —
Nothing wrong with this. But I can do better. As it stands, there are no clear roles for any of these colors. How do I answer the questions —
“What color do I use for my background color? What color for the text?”
This color palette scale doesn’t give any clues whatsoever.
Variables come in
Here’s where variables shine.
One thing I love about variables is that they can reference themselves. That is, you can create a variable that is tied to another. This way, you can assign something like “background-color” to another variable. Read my post about referencing variables here.
But that’s just the easy part. It gets hard to arrange these variables when you have lots of them. Really hard.
Luckily, I found a system that works for me. At least, it’s been working so far. Here is a visual summary —
Note that some sections are optional. You don’t have to account for them. Here’s what each of these sections means —
Class
The highest hierarchy. It simply defines what sort of variable this is. Examples include — Color, Spacing, Corner radius, etc. The class is not optional. Every variable must have a class.
Type
Type is always ”varies” or “fixed.” I added this to account for colors that change when switched to dark mode [varies] and those that don’t [fixed]. Type is an optional field. As I mentioned earlier, it is used for color variables only.
Element
As the name implies, this defines the element the variable is applied to. The Element could be a button, surface, text, icon, etc. Also optional.
Value
Value defines the value assigned to the variable. It could be numerical or otherwise. Examples include — 8, 24, Primary, Brand, etc. Value is not optional. Every variable must have a value.
State
A variable might have values that can appear in different states. For example, the primary color can have hover, pressed, and disabled states. The state is optional.
Putting it all together…
A typical color variable could look like this —
color / varies / button / primary / hover
Breaking it down. This variable —
- Belongs to the class “color” — it is a color variable
- The color type “varies” — the color should change when switched to dark mode
- Its element is a “button” — the color is used on a button
- Its value is “primary” — the color is the primary form of that button
- The color shows the button in its “hover” state.
To show that a token doesn’t need to have all of the sections covered, here is one —
size / corner-radius / 8
In this case, I account for only the non-optional sections — the class, element, and value.
And that’s it.
Arranging variables this way has helped me so much in having a structure. I know where to find and add any variable when I have to.
I am putting together a file where I used Figma variables extensively. I will share once I am done. Stay tuned
If you found this helpful, I suggest you subscribe to get similar content. I would also love to connect on LinkedIn or Twitter.
