Building better products with a design token pipeline

Getting design tokens from design tools to code.

You may know what design tokens are and what benefits they can bring. But you may wonder how exactly to start using them and how you can integrate them into your workflow. I this article you will learn just that:

• How to lean on design tokens to make better design decisions
• How to use them when specifying and documenting your designs
• How to integrate design tokens into the development pipeline

Improve your design with design tokens

Design tokens are an integral part of any design system. They bridge the gap between core values (brand colors, typography, etc.) and components. But before we look into how they help, let’s have a look at the problem we are trying to solve.

Problem

Design Systems often live within design tools as component libraries. Maybe there is a code component library so developers can work with components as well.

Component libraries are certainly helpful to quickly put together products. But those components don’t tell the entire story. The decision of what value to use where, has already been made. It is buried within the component, not apparent to the component user. When components are your smallest unit, it is hard to know how to build a new component that fits into the system.

You don’t know why the notification is blue or why the primary button is green. And you don’t know how to make sure new components update when the design system changes.

In short, while components are great to use, they are:

• often badly documented (why add docs, you can just copy and paste the component)
• hard to understand and reason about (e.g. why is the padding 4px? Why is the button blue?)
• work-intense to keep up to date when the design system changes

Solutions

Enter: “Design tokens”. They come in two varieties: options and decisions and solve the problems I mentioned above.