Design Tokens: How to use them effectively

Design token is a hot cake topic for designers and frontend dev. In this article we will have a clear understanding of design tokens and how to build one for your next project.

“It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire lifecycle.”

Paul Saffo — technology forecaster

What is Design Token?

The central place where tiny pieces of UI information will be used across several platform during the conception of a digital product which are design tokens. The concept was created by Salesforce and name comes from Jina Anee. Design token(DT) allows product team to better collaborate and ensure brand consistency across any platform.

DT are also design decisions, represented as data, that ensure systematically unified and cohesive product experiences.

Design Tokens are visual atoms of the design system — specifically, they are named entities that store visual design attributes.

We use then in place of hard-coded values in order to maintain a scalable and consistent visual system.

Jina @jina

Types of Design Tokens ?

Following are the types of DT which are the building blocks and design decision that make up our design language.

Global Token:

They are the primitive values in our design system, they are represented by context-agnostic names. Typography, color pallet, animation values are all stored as a global token. These values can be directly used, and are inherited by all other type of token.

Alias Token:

These token relate to a specific context or abstraction. Aliases helps us to communicate the intended purpose of the token and are much effective when a value with a single intent will appear in multiple places.

Component-specific token:

These type of token are an exhaustive representation of every value associated with a component. They often inherit from alias tokens, but are named in such a way that it allows engineering teams to be as specific as possible in applying token in development of the components.

How Design Token Works?

We can place token into our Design System(DS) to the elements like Sizing, Font Families, Font Styles, Font Weights, Font Sizes, Line Heights, Border Styles / Colors / Radius, Horizontal Rule Colors, Background Colors, Gradients, Background Gradients, Box Shadows, Text Colors, Text Shadows, Time, Media queries, Z-index, Icons to name some few.

In a DS, we generally use especial entities called “design-tokens” to store the design decisions. These entities are in the shape of key and value pairs which are served in file format like JSON or YAML. These files are later used as inout files, processed and transformed to generate different output files. With these enabled to us we can maintain and scale our design across all the permutations.

Source: Design token for dummies article

This diagram reflects how an ideal workflow looks like implementing DT in action. A designer makes the design decision into his choice of tool. The tool has its plugin and API which provides us with the key/value pairs in the format of YAML/JSON format. These can also be generated with loads of tools available online like Theo, Gulp Task, Dragoman, Postcss-map plugin, Style dictionary, Tools. The generated files can be served to the developers with dynamic values from our design tools which can be built to make products into different devices everywhere.

This links between our design and developments tools would allow design teams to update core styles in their design tool and see the result automatically synchronized the whole design development ecosystem.

design-token/community-group

Implementing Design Token

In this demo we will be covering just a single design element in our DS. The element would be Typography. We will be using Figma API and a plugin named Styled Dictionary which will help us to convert our token data which are base colors, typography, spaces, box shadow etc. in a single JSON file to design tokens.

We will first make an empty folder and install our plugin, and do our API call with the help of provided Figma developer API.

yarn init
yarn add style-dictionary

The above command will set an empty package.json file with our required package style-dictionary.

const axios = require("axios");
async function getFigmaObjTree(figmaApiKey, figmaId) {
    axios.get('https://api.figma.com/v1/files/' + figmaId, {
            headers: {
                "X-Figma-Token": figmaApiKey,
                "Content-Type": "application/json"
            }
        })
        .then(res => {
            let result = res.data;
console.log(result);
        })
        .catch(err => {
            console.log('errors');
            console.log(err);
        });
}
getFigmaObjTree('******figmaAPIKEY******', '****FigmaID****');

We here pulled data from the Figma API. But, unfortunately, Figma doesn’t provide values inside each style only type and name.

So, we will get only typography from our artboard here. Lets take a look at screen recording below:

After we pulled our data from the API what we did was placed our base.json file created into our src. And we ran our next command in our terminal to get the token into sass files with command below:

yarn build

Then with the above command we have our build ready which have been converted to Sass file. The code we have is as below:

my-gist

Conclusion

DT creation process

DT are the central source of truth for our tiny UI information to store, design and relate information such as Colors, fonts, spaces, animation etch. By embedding DT into our design tools we can leverage maintenance, reliability, organization and scalability of our DS. With the DT in place we will have following benefits

• Use Token as variables.
• Design decision applied to context.
• Reusable data in dynamic form across multiple platforms.
• Design decision are propagated through a system.
• Managing and reading tokens from a central place.
• Keep whole ecosystem in sync.

Using DT is here to solve many problems and obvious create new ones. The endless back and fourth between designers and developer to update our code time a design makes changes has been simplified. This affords designers the same flexibility that a developer has in a dev environment, allowing for a quick, easy exploration of DT updates and ability to roll out without any change in code or time consuming frequent deployments. I would highly encourage using DT in your current DS to make lives easier for ourselves.

Please find the link for working code in my GitHub repository link here.

Recommended references

Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles.

Design Tokens

Design Tokens: Scaling Design with a Single Source of Truth

Note: This article is inspired from the workflow by Pavel Laptev generating design token with figma.