Figma Token and Variable Setup: Top Mistakes to Avoid

Learn how to avoid common mistakes when configuring variables and tokens in your design projects. Subscribe for our Tokens 101 video coming soon!

*Jumper variables can also be called adaptive variables

0:00 An Introduction
0:20 Too many variables
3:16 Improper token definitions
5:35 Ignoring Accessibility
9:04 Not factoring in responsiveness

[keszycki]

The amount of value you provide to design community is immeasurable :) Thank you!

[ArijanitRoci]

I really see your point in making less variables to make it less complex. But here is a thought though that people should know. And that is that if gap and padding are combined into one token called for example xl (24) . If for some reason you have to change the overall padding on 100 of elements and leave the gap as is. Well then you have a major problem, because you just applied the same token on both the padding and the gap thus linking them together if you change the setting of the "XL token".

Just a thought- great video !

[gideonking]

If you're already using Mapped for light and dark mode, then having sizes in there would mean that you'd need a Light-Desktop and Light-Tablet as well as equivalent for dark. I would think it better to have a separate collection for sizes and just have the modes applicable to sizing specified there.

[HarishChouhan]

Thanks for the video. With so many nice plugins related to accessibility available, it should just be part of the process and done directly in Figna.

[tomaszgens]

5:37 disabled element is not a good example here. They are not required to pass color contrast ratio check.

[borovinka]

Surface on disabled colors do not need to meet AA contrast ratios as disabled elements are not interactive, they cannot receive focus and are not announced by screen readers. Disabling an element is the same as hiding it from an accessibility and inclusion point of view.
That being said it is true that earlier you start thinking about color contrast, the better.

[lillylightlove]

Omg, i am so happy you also go for spacing, I did keep explaining, again and again, this to a new team I joined lately, only guys, me the only lady and they didn't believe me.

[nobody-btmu]

Freaking awesome video! I'm guilty of some of this mistakes and I'm now wary of them. Thanks!

[cryn]

I think the disabled state having enough contrast is one hell of a challenge :D

[aaronmoore]

Really well explained with great examples. Thanks for sharing

[caffeineUI]

Aren’t component specific design tokens there to easily update them without the dev having to find all lines in which it should be changed? As far as I know, there are base design tokens (raw values), semantic design tokens (self explanatory) and component tokens (also self explanatory)

[larissacamara]

Great insights and valuable lessons, thanks! <3

[mahdi.mortazavi]

but #676767 color is not sutble for disable button!

[rodnem]

Hello 👋
I’m not sure for your “jumper” variables naming. I’ve done exactly the same 1 month ago but it was a better solution to keep a kind of scaling system. In a collection called Resolutions I specified all transformations depending from width or height. So for example viewport or container-min is not the same for mobile/tablet/laptop/desktop
The term « mapped » is interesting. I use “Theme” I do a lot of multi brand systems
Anyway thank you

[nutellanorbert]

Sorry I have to ask this.
Are you familiar with the different tier groups of tokens? For example global as base for alias and alias as base for componen specific tokens?

[rafaelmatosdasilva]

the gap and the padding example was not good. they can alias to the same primitive if they have the same value but they are semantic tokens, so they give context to where they should be applied. they make sense to exist in a lot of cases. you are falling into the trap of thinking that because you achieve the same visual with both variables, you can just simplify the tokens. that beats the principles of tokens which is flexibility. with your approach, the gap and the padding can never have different values and that might limit the adaptability of the system. again, just a bad a example.

[valmi]

Hey, pretty huge mistake imo that you are making: disabled elements are not required to meet contrast requirements :/
And luckily, because this kind of disabled buttons are so dark they look like primary neutral haha

However, I love your videos, thanks for what you are bringing to the table <3