Design tokens and why design systems need them?

One magic, simple concept (design token) and a one-stop shop to contain our design equal one hell of a powerhouse.

What you will learn in this lesson#

  • Learn what design tokens are

  • Learn how you can work with a “structured design” approach

Structured design and controlled evolution#

Tokens offer a form of “contract” between a designer’s intent and its fulfillment by developers. This means that both sides agree to treat the individual parts of a complete design through the tokens that represent those values. As a format, they are super easy to read, understand, and adapt for consumption by many types of systems or applications. That’s very important as you start doing cross-platform apps and things like that.

Design tokens

Tokens ensure that values are not magic numbers or ”just picked at random.” This makes communication precise and effortless. Creating actual code for components, even complex ones, also becomes a lot less of a bore since what you are doing is just pointing stuff like padding, Z indices, and anything else to their token representations.

For instance, we need to add margins to a box. Let's see what we have available:

Given the above, the small spacing is the single spacing you can use for your margins, paddings, or other sizes. For sure, you sometimes need to hardcode new unique values, but that should happen in a very small number of instances. I call this approach "structured design"—no need to make it a big concept—but it's an approach in which we leave as little as possible to chance. As far as possible, we use the tokens instead of hard-coding any values.

With a single spacing, it does, however, seem reasonable to believe that it's time to add some more to cater to more dynamic, realistic needs, so let's evolve the model a tiny bit:

We now have two possibilities, and both are perfectly valid choices. The evolution process should be done in collaboration between the designers and developers.

Token consumers#

Start a new discussion. All notification go to the author.