A Guide to Transforming Design Tokens with Style Dictionary

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? 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. 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. 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. 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. The script will be called build tokens. And then we can write the command style dictionary build. And as a config, we will pass the config with just created. And we can try this out. We can go back, yarn workspace and then run the build command. So we can see everything was successful. Let's go back to the leap and then we can see all the output. We have a CSS, a CSS and JavaScript tokens. 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. 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. And if we consume this, we can use this to style our components. The same with SAS and the same with JavaScript tokens. But here you can see it's a little bit crowded over file. So basically that was it. 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.