What are design tokens?

José Luís Holgado Rodriguez

Some of you may think that “design tokens” is just a cool term, right? You’re wrong! They are an extremely versatile way of sharing design properties, and in this article you will learn how they work.

Design tokens are a very fashionable term that people use without much explanation and, sometimes, without having much idea of what they are talking about. So, to remedy this, I have written this article to explain what they are, how they work and why they are really useful.

Design tokens, explained by the term’s creator

I will make a short reference to this quote from Jina, who created and coined the term “design token”, while she and her team were working on the “Lightning Design System” project:

“Design tokens are the visual atoms of the design system, namely named entities that store visual design attributes. We use them instead of hardcoded values to maintain a scalable and consistent visual system.”

Thanks to Jina’s work on this, it enabled many design and development teams to consider how they wanted to work on cross-platform systems. Based on what is now known as a “style guide”, the marriage of “Design System” and “Design Tokens” looked very good.

Design tokens, explained by me

Let’s say your company has a website, an iPhone app and several printed information brochures. For everything related to branding, you use a style guide, which is pretty standard, but that style guide is usually a PDF with a lot of information that doesn’t mean much to a developer.

That style guide will contain information such as brand colours, typography and how to use the logo, for example. But getting that information across to technical people who are not well versed in reading style guides could be a bit tedious.

This is where design tokens become really useful because, in essence, they are centralised data, almost like a database of design values, that could be consumed by anything that understands a standard, such as JSON.

I’ll show with an example what design tokens can look like when they are in a standard data format, such as JSON:

Here, the layout tokens refer to fonts, a size scale and colours. The colours are hexadecimal values and the size scale refers to pixel values.

This data should be translated per platform. For example: for print, you may need to convert those pixels to dots and the hexadecimal values to CMYK values. For the web, you probably want to change the pixels to responsive units, like rem’s or em’s, but that’s great because there are many tools to do that kind of translation. The important thing is that we have a centralised structure of definitions that can be used on a cross-platform basis.

Here’s an example of the output if that JSON is converted in Sass:

Maintaining tokens

We’ve had a look at what the output of design tokens might be, but how are they maintained? As with everything in design and technology: it depends.
Tools like Figma and Sketch offer some options when it comes to design tokens. With Figma, there are add-ons like Figgo that help turn static design tokens into more useful data that developers can use.

With Sketch you can use add-ons such as Design Tokens, as the name suggests