Member-only story

Design tokens — What are they & how will they help you?

Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers.

Lukas Oppermann
8 min readJan 19, 2021

Note: While the main content of this article still stands, I now prefer the terms base token (instead of choice) and semantic tokens (instead of decision). Read more about token terminology.

Design tokens ease building products by improving the communication around design. They help scale your product by separating design decisions from specific platforms & technologies.

They improve communication with build-in documentation & promoting design decisions out of design files.

What are design tokens

Design tokens are a very “hot” topic at the moment. You may think it’s only a fancy name for a design related variable. While you may find them as variables in your files, this is only part of the truth. Let’s have a look at some common definitions to make sense of this confusion.

Descriptions of design tokens in the field

According to the w3c working group in design tokens, design tokens are:

Lukas Oppermann
Lukas Oppermann

Written by Lukas Oppermann

Product designer with a love for complex problems & data. I post about Figma, design tokens, design systems & design related topics. https://lukasoppermann.com

Responses (5)

Write a response

Style Directory

Correcting: Style Dictionary

This is very informative, thanks! One of the things that I really like about design tokens (as a developer) is that it imposes an opinionated variables structure on developers. I used to see developers struggling with getting the right naming…

Element / Foreground-colors

Would you like to explain me a bit about this? What the element/foreground-colors look like in the design tokens? Can you give me a hint or example?