What is a design token?

Hi, I'm Jeen, an XD 👋

Lately I found myself so into a hot topic among designers called the Design token. Luckily, with help of our developers team, I have a chance to experiment creating this system in our client's project. So, I wanna share my excitement here in a story as well as a way to tribute our success.

Hey, hold on.. what is it that you talk about? 🤔

Design token is the single source of truth to name and store a design decision, tokens ensure the same style values are used across design files and code.
‍
‍

What is the design decision?

Design decisions are names to be used to create a semantic meaning for humans. For example, the color of #2A9D8F may not communicate any meaning to a human, thus, one can decide to give a name of ‘brand color’ so that it can be understood by other humans.

Design decisions communicate the meaning of a hard-code value

A design decision can be a color, a typography, a border radius, a measurement, or any design styles and each token can store this design decision or even another token.

A dev friend: Oh, so it is a variable?‍

Design Tokens are a methodology. IMHO, saying “design tokens are just variables” is like saying “responsive design is just media queries”. It’s a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more.Variables are just part of that story.
~ Jina @jina Nov 14, 2018

Design tokens are comparable to the subatomic particles that make up an atom, to tie it in with the well-known Atomic design concept.

Design tokens: the subatomic particles of atomic design - extending-atomic-design

Take a look at the anatomy of this atom, a button consists of oh.. so many different design tokens!

Design tokens breakdown of a single button

Then.. why do tokens matter?

Tokens allow style values to be applied consistently across designs, code, tools, and platforms… Using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products with a design system. - Material design

When using tokens for design and implementation, style updates can be transformed and formatted to meet the needs of any platform and will propagate themselves as well as its semantic meaning consistently through an entire product or suite of products.

How design tokens can be transformed to generate
different output files for different platform

When design tokens update, its style was updated and propagate themselves and its meaning consistently through an entire product suite.

Design tokens can help you achieve:
‍

Single source of truth for style
More consistent and maintainable products by centralizing design decisions in one place
Better translation process from design to development
Save money and time spent for changing and updating styles by making the visual update process happen automatically
Improve management of the design system
Introduce proper methodology to collaborate between teams

Doesn't it make you feel excited like I am?
‍
In the next article, I’ll share with you my case study of implementing design tokens to our client’s design system, which ended up with a huge success by reducing our development time to update styles from 14 days to 10 min!

‍Thanks for reading! 🤗