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.

Image for post
Image for post

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:

Design tokens — a definition

Pulling from the descriptions above, this is my definition of design tokens:

Choices & decisions

Design tokens come in two varieties, choices & decisions. The difference is rather conceptual than technical. The idea is that there is a finite amount of defined choices e.g. all available colors in your design system. With those choices you can make decisions, e.g. which color to use for your primary button.

Choices

A choice is a core design token. It represents a value and is not related to a specific use case. This can be a color, font size or any other primitive.
Some examples are:

  • type-scale-sm: .75rem
  • padding-sm: 8px

Decision

A decision is a choice applied to a use case. It references a choice and its name represents a use case / a decision, but not the value.

  • display-h1-font-size: type-scale-xl
  • card-default-padding: padding-sm

Design tokens are a methodology

Why is the distinction important?

If we elevate design tokens to a methodology they can change the whole industry. A methodology is an approach to how we do something and not just a new tool. If we change how we build software this can have interesting ripple effects.

  1. software integration
  2. development tooling
Image for post
Image for post
A w3c community group is working on a standard for design tokens.

01 Standardisation

A methodology may create enough attention to bring open standards. Actually there is already a w3c community group working on one.

  • integration into software
  • more interest, resources & development of the methodology itself

02 Software integration

An established methodology used throughout the industry will become interesting for software manufacturers. The people building Sketch, Figma, Framer and XD will think twice before ignoring it. Especially if standardised, native support in design tools will be a question of when, not if. When one tool implements it, others will soon follow.

Image for post
Image for post

03 Development tooling

Design tools are only the beginning of the product building process. For design tokens to reach their full potential they need to be integrated into the development pipeline.

Fitting design tokens into your existing style guide / design system

Starting with the core

If you work with a style guide or design system you may already be using design tokens. Your “core styles” (colors, sizes, type scale, etc.) are design tokens.

  1. Store them in a technology agnostic file (e.g. json).
  2. Make sure everyone in your org can access them (like a dedicated github repo).

Extracting design tokens from your products

To get the most of design tokens you should probably do a design token audit. This means looking at your components and creating design tokens for all values. This can mean one of two things:

  • Adding new tokens for unaccounted values (or replacing them with existing ones)
  • Element / Foreground-colors
  • Text-colors
  • Gradients
  • Type scale
  • Font styles & letter case
  • Line height
  • Padding / Inset
  • Common Sizes for icons, etc.
  • Curves

Benefits of using design tokens

Design tokens benefit the entire organisation:

  • By centralising design decisions in one place they make products more consistent & maintainable.
  • And as named entities they form a self-documenting system.

Consistency

A main idea of design tokens is moving design decisions to a technology agnostic space. For example a design-tokens git repository. The tokens are stored in a format like json that can be transformed for any language or platform.

Maintainability

Maintainability in this context refers to two things. Assuring correct implementation and ease of changing.

Assuring correct implementation

By using design tokens we remove two common steps that can lead to mistakes. The use of direct values e.g. copying a hex value from Figma to css. And the use of hand-coded variables e.g. copying a hex value from Figma to a sass variable.

  • Using a wrong variable can be avoided through good naming. When using color-background-light for text, a developer will notice the issue.

Ease of changing

Centralised design tokens make visual updates to your products happen nearly automatically.

  1. Product teams pull in the changes
  2. Recompile and release

Scalability

With your design decisions extracted from a specific code base, scaling becomes easier. Think of it like a micro service. Similar to extracting business logic.

Documentation

Without design tokens designers use values, 5px for the radius, blue for the button. But when following the design token methodology, every value has to be a named entity. This forces designers to think more about components and systems.

  • This button is an important element on the screen.
  • This blue is the primary blue.
Image for post
Image for post

Key takeaways

  • Design tokens are a methodology to extract design decisions into a separate space. They are stored technology agnostic to be used on any platform.
  • The two types of design tokens are choices & decisions.
  • Choices are the available primitives like brand colors
  • Decisions are choices applied to a context, e.g. what color is used for a primary button
  • Continued interest in design tokens will bring better design software integrations and improved development tooling.
  • Design tokens help have 4 main benefits
  • Design consistency across products
  • Improved maintainability
  • Help scale products to other platforms
  • Improve documentation of design decisions

Further reading

Product designer with a love for complex problems & data. Everything I post on Medium is a copy — the originals are on my own website: https://www.vea.re

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store