A Guide to Transforming Design Tokens with Style Dictionary

Transforming raw design tokens with Style Dictionary

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:17] Okay, so now we have copied and pasted all the tokens we had in our GitHub example repo, which are basically replicating all the design token values we will translate from Figma. And what's next?

    [00:18 - 00:30] To work with them, we need a configuration file for style edition or CLA to know what to do with them. So let's create the configuration file in our foundation packets in the root directory of the foundation packets.

    [00:31 - 00:45] We can create a file called SD from style dictionary, then config.ts. And we can paste the code that you can find in the text version of this lesson.

    [00:46 - 01:13] And what we're doing here, essentially, we are saying that the source of the input of the tokens will be inside the source folder and then the tokens folder and then does get everything that ends with .json as a file name. And then we're targeting and creating an SSS file, a CSS file, a JavaScript file, again, and again, a JavaScript file.

    [01:14 - 01:31] And I will tell you what's the difference between those two and why we need both of them. So to actually use this file, we will go to packets.json and add a script.

    [01:32 - 01:43] The script will be called build tokens. And then we can write the command style dictionary build.

    [01:44 - 01:52] And as a config, we will pass the config with just created. And we can try this out.

    [01:53 - 02:11] We can go back, yarn workspace and then run the build command. So we can see everything was successful.

    [02:12 - 02:21] Let's go back to the leap and then we can see all the output. We have a CSS, a CSS and JavaScript tokens.

    [02:22 - 02:30] And let's go to the CSS, which is a more clean file. Here we have all the CSS variables we can use in our CSS files.

    [02:31 - 02:43] So the primary and all the sades, neutral and not the sades plus the black and white, warning data, radio sees, sados, spacings and animations. So basically everything we need.

    [02:44 - 02:53] And if we consume this, we can use this to style our components. The same with SAS and the same with JavaScript tokens.

    [02:54 - 03:01] But here you can see it's a little bit crowded over file. So basically that was it.

    [03:02 - 03:12] And in the next lesson, we will see why we used one additional JavaScript transform group, which will be used to create RTL wind CSS preset.