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. Open your terminal and run the following command:
npm install style-dictionary
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.

Last updated
Was this helpful?