Transforming Design Tokens with Style Dictionary
Style Dictionary is a powerful tool for transforming design tokens into usable code for different platforms, such as the web with CSS variables.
Tokens coming from Tokens Studio require an additional step: @Tokens-studio/sd-transforms, an npm package that prepares Tokens for Style Dictionary.
This guide covers the basics of installing and using Style Dictionary. For full details, head to https://styledictionary.com/
Install with NPM
Before we begin, we need to install Style Dictionary. You can install it using npm, which is a package manager for Node.js. We also assume you will need the @tokens-studio/sd-transforms integration package if you're a Tokens Studio user.
Open your terminal and run the following command:
npm install style-dictionary @tokens-studio/sd-transforms
Using Style Dictionary
Once Style Dictionary is installed, we can start transforming our design tokens. Here's an overview of the process:
Define your design tokens in a JSON file.
Configure Style Dictionary to transform your design tokens into usable code.
Generate code for your target platform.
SD-Transforms
We provide official transforms in the form of a package called @tokens-studio/sd-transforms. You can customize these transforms or create your own to fit your needs. More information can be found on npm.
Style Dictionary Configurator
Style Dictionary Configurator is a web-based tool that allows you to transform your design tokens directly in your browser. It uses Style Dictionary under the hood and can be a convenient way to experiment with Style Dictionary without installing it on your computer.

FAQ
Excluding/splitting sets in the output
Question: I want to exclude certain sets from the output, since my Design System will not need to use those tokens directly.
Answer: You can use Style Dictionary Filters for this, to filter a set by the token's filePath
property, which tells you which source file the token originated from. There is an in-depth example that goes one step further, using filters to split your outputs in different files/folders
Last updated
Was this helpful?