Skip to content

Design tokens are designer shortcuts

So welcome to my latest obsession, design tokens! When I become obsessed about something it’s usually because I don’t understand it fully. So when I’m not busy doing things I really need to do (fill in the blank here with imagination) I think quite a lot about above subject. Why? Here’s a couple of reasons.

The name is really confusing

What the heck is a token? I’ve never seen one in reality. Is it some kind of coin? Does it has to do something with casinos? Can you pay for a subway ride with them? I vaguely remember somebody talking about tokens in a movie I saw one million years ago.

See? So confusing.

Design system I can understand. It contains two things I can totally relate to. Design is what I do every single day, system is something I wish I had. See? Want proof?

99% of all things I have ever designed for us are in this chaotic doc?

Just googling it doesn’t make it any easier. I love Brad Frost but hey man:

”In the world of UI, design tokens are subatomic particles.”

Whaaaaaaaaaaaaaat?

On an intellectual level I can understand this. But on the dirty construction floor, sitting on my kids IKEA chairs doing WFH stuff for what now feels like an Eternity, I totally don’t get it.

To make I need to understand. Let’s try doing that.

Renaming time!

Let’s rename them! For this very article we are now going to refer to them as designer shortcuts. Because that’s exactly what they are. Who doesn’t love and understand a shortcut? Cmd+X that thought out of existence if you don’t agree with me ?

If you prefer you could also call them design to code shortcuts but that is way to long so let’s just stick to things we can remember. My mind is old and it’s not getting any younger ? Also whenever the word code comes up half the room of designers runs out the front door, the other half are just to polite to do so.

The how is quite confusing

So okey then, we now kind of understand the what, but hey come on let’s not stop just yet, we still don’t understand the important how the hell do I work with them then?

Here’s when things tend to fall apart for most people. I’ve done a few presentations about design tokens and our Stratos Tokens app. Everyone is amazed about the power designers can have when it comes to input (Sketch, Figma) and output (code yo) but when it comes to the actual doing, questions like these pop up:

  • Can I destroy things in code?
  • Will my developers hate me?

All fair questions. Let’s break down these excellent questions one by one:

Can I destroy things in code?

No you can’t. Why? Because you are not messing around with the actual components, you are just messing or blessing things that are on the surface level. Which is your job as a designer, right?

If you don’t believe me you can try out our MaterialUI demo and see for yourself. Did you break the excellent MaterialUI theme generator? Nope. Did you have fun? I think you did, you rascal.

Will my developers hate me?

If they do they are morons. They should ❤️ you. First of all, you will save your company endless amount of both time and money by doing the one thing that a lot of developers really don’t like – updating the styling every time a designer changes their mind. Or a PO. Or even worse – a manager!

You will be a hero. Trust me!

Is it difficult to learn?

It’s not difficult, it just take a bit of time to digest.

As all things in life when learning things step by step it becomes really much easier.

On our part we’re working on the next version of Stratos Tokens which will have many enhancements regarding the workflow design app —> design tokens —> code output. Which will be released the very same day we launch our brand new marketplace. Katching!


More on that later, have a great one friends!