Why I don't love design tokens in Figma

If you somehow missed the hype about these new Figma features, let me give you a quick summary:

Figma recently introduced support for variables, allowing you to set presets for colors, spacing, typography, and more. You can create different styles for each, like dark and light modes, or experiment with breakpoints. These styles can be applied universally across your components and easily toggled as needed.

While this sounds nice (I bet you saw Zander's TikTok of this feature), I have a few problems with it. Let me give you a screenshot:

Back when I was also doing frontend development (4 years ago), I used to work with systems like these and always struggled with them. I had to understand semantic names like button-primary-background-default or button-primary-background-hover. I wasn't a fan. I'm still not one. Remembering such spaghetti (noodle?) identifiers is hard.

But if this isn't overwhelming enough, let me zoom out a bit:

Our design systems are becoming overly complicated. We're only using about 40 shades, but due to all the semantic names, our variables table has over 300 entries. Which one do you think is easier to remember?

I've noticed many designers are under this false impression that using all these complicated systems is necessary. While it probably is for large projects (I’m still not convinced), we should focus on simplifying things. Not just when it comes to UX, but also when building design systems.

So, for the time being, my advice is to stick to using as few variables as possible (most people refer to these as primitives):

1. For colors, set up your base colors with the 100-system (I have a video on it here) and use them consistently.

2. For spacing, set up a few variables with the 100-system that you use everywhere e.g. space-001, space-025, space-100 and so on. You can also use this plugin to apply your variables to your existing designs.

3. For typography, keep using font styles for the time being (the new solution in the latest Figma release still feels like a beta version).

Don’t get me wrong. Figma variables are super powerful. And you can benefit a lot from using them. But still — as always — less is more. If you want to experiment with them, do it incrementally. And talk with devs—you'll gain valuable insights.

I’m *really* curious to hear your thoughts on this topic. There’s a lot of debate among designers. Do reply, I read every message.

Aaand have a pixel-perfect day!