Transforming for development
Style dictionary

Transforming design tokens using 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. In this article, we will explore how to use Style Dictionary to transform design tokens.


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


Once Style Dictionary is installed, we can start transforming our design tokens. Here's an overview of the process:

  1. Define your design tokens in a JSON file.
  2. Configure Style Dictionary to transform your design tokens into usable code.
  3. Generate code for your target platform.


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.

If you have any feedback or questions, you can find the Style Dictionary team on Slack in #style-dictionary-configurator.