Convert your Design Tokens with Style Dictionary Configurator & Transforms

Behind the System: Style Dictionary Configurator & Transforms
In this talk Joren will show you everything about the Style Dictionary Configurator and Transforms, to transform your tokens to any wished output.
👉 Style Dictionary Configurator: learn everything about the recently released configurator, a UI based configurator to build fully functional Style Dictionary pipelines for converting your tokens from Tokens Studio to any tech stack.
👉 SD Transforms package: this is what drives the configurator under the hood, but can be used stand alone to build your own custom configuration and can be extended to fit your needs.
🤝 Resources from this talk:
SD Configurator: configurator.tokens.studio/
SD Transforms: github.com/tokens-studio/sd-t...
SD Configurator repository: github.com/tokens-studio/styl...
Channel on Slack: # style-dictionary-configurator
Multi-dimensional themes community file: www.figma.com/community/file/...
💡 Install on Figma: www.figma.com/community/plugi...)
💬 Join our Slack: tokens.studio/slack
🚀 Subscribe to our channel: www.youtube.com/@TokensStudio...
📄 Docs at: docs.tokens.studio
ℹ️ More information on www.tokens.studio
00:00 - Welcome & Intro Behind the System
02:27 - Style Dictionary Configurator & Transforms
49:39 - Questions & Answers

[@KraasRas]

Nice Tutorial! Do you have any pre configurations examples or advices to do the transformations regarding the Material Design 3 Token schema?

[@TokensStudio]

Thanks @KraasRas > Material Design Tokens have their own Syntax called DSP (Design System Package) and at this moment it is only possible via the VS Code extension, which unfortunately gives a 404. We filed an issue at their side for this issue: github.com/AdobeXD/design-system-package-dsp/issues/36
For more in-dept questions on SD Configurator or Transforms I suggest to take a look in our Slack community: tokens.studio/slack

[@EmanueleLivi]

Awesome tool! What’s the way to convert the json from Tokens studio to Tailwind?

[@TokensStudio]

This is possible but pretty cumbersome at this point. There is a repo for transforming, but this is now generating the full SD config, while that only should be the format. We created an issue for this on that repo(github.com/nado1001/style-dictionary-tailwindcss-transformer/issues/311), so hopefully this will be less cumbersome in the future.
github.com/nado1001/style-dictionary-tailwindcss-transformer

[@guilhermeranieri8445]

What is the configuration that I had to do if my token file uses reference scheme?

[@TokensStudio]

For more in dept questions regarding the configurator it's best to reach out on our Slack(tokens.studio/slack) in the dedicated channel #style-dictionary-configurator

[@yoda_soda]

The tool being in beta when will it come out of beta and is it safe to use in production?

[@TokensStudio]

The configurator is already safe to use and if you run into any issues, you can best reach out on our Slack(tokens.studio/slack) in the dedicated channel #style-dictionary-configurator.