How to Work With and Structure Design Tokens

How to work with design tokens

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Build a Complete Company Design System

  • [00:00 - 00:19] We discussed in the previous module which parts of our design system will become design tokens. So, let's see now how we can structure our design tokens, and use style dictionary, a tool developed from Amazon to help us transform raw values to something meaningful that we can share to our consumers.

    [00:20 - 00:43] The output of style dictionary can be a JavaScript file containing our tokens as JavaScript values or a CSS file with our tokens as CSS variables. To install the CLI tool, we execute the following command, yarn workspace, then we target the foundation packets, and we add style dictionary as a development dependency.

    [00:44 - 01:10] And as soon as it is done, we can go to our code editor and inside the foundation packets, add a source folder, then a tokens folder where we will host all of our raw token values, and then a colors.json file. So, style dictionary expects our files to have a specific JSON format.

    [01:11 - 01:30] So, let's see how we can translate colors to a format that is acceptable from style dictionary. So, we start with square brackets to indicate that this is a JSON object and write the word colors, and then we can go to our Figma file and see all the colors.

    [01:31 - 01:50] In the Figma file, we can see that we have four different colors, primary neutral warning and danger, and most of them have nine sades except from neutral which has two additional sades, black and white. So, let's start writing our primary color token.

    [01:51 - 02:51] So, here we can write the primary, we ignore the GitHub code pilot, and then we define the SADE, let's start with the 500 SADE, and the value of course, which in our case , the value would be this one, and by this we will iterate on every single color and on every single SADE. Of course, we will skip this to do this hand by hand, but the end result, end result will look something like this, we have the colors, and then the color primarily with all the sades and the neutral warning and danger, and if we go one folder up, we can see that we have all of our tokens, for example, the animation stock in, the radio stock ings, sados tokens, and spacing tokens.

    [02:52 - 03:03] So, we will copy and paste all those files to our local development environment , and as a next step, we will use the CLI to transform those tokens to something we can share as an