Design tokens, ions, subatomics – these terms are increasingly encountered when discussing design systems. But let’s be honest: is this really a new topic? Often, there is a lack of clear understanding of what design tokens actually are and why they are indispensable in modern design processes.
What are Design Tokens?
A little spoiler upfront: Design tokens are not variables. Rather, they are design decisions documented in a schema like JSON.
This JSON then serves as the starting point for exporting to various target systems – whether CSS, Swift, Kotlin, TypeScript, or other platforms.
The Key is “Style Dictionary”
As early as 2017, Amazon released an open-source solution specifically developed for handling design tokens. Style Dictionary takes the design tokens defined in tools like Figma or UXPin (the JSON) and transforms them into the desired target application.
Getting Started is Easier Than Many Think:
💬 “Setup takes way too long?”
With Style Dictionary, configuration can be done in just a few steps. You can start with a couple of JSON files and save enormous time in the long run.
💬 “My themes (Light, Dark, High-Contrast) are too complex.”
This is precisely where design tokens show their true strength. Different themes can be centrally managed and flexibly adapted – changes are automatically applied across all platforms.
💬 “How do I integrate it with TypeScript?”
It’s simple: Style Dictionary supports TypeScript! You can use the generated tokens directly in your TypeScript project. Check! ✅
Are Design Tokens Now Indispensable?
Creating variables and getting started is quick and often sufficient for smaller applications. But in large companies working with multiple software solutions and whose design guidelines evolve over time, more than just individual variables are needed. This is where design tokens come into play: they create a single source of truth that enables centralized design decisions.
💡 Ready to Get Started?
On GitHub, you’ll find a basic implementation to help you get started:
👉 Style Dictionary with Dark Mode Support
Explore a more technical blog post on Medium:
👉 https://medium.com/@artur.sopelnik93/how-to-use-design-tokens-with-style-dictionary-and-dark-mode-fdb53f675977
Here’s our free e-book on design systems (available in German only):
👉 E-Book: Design Systems
Still have questions? You can find more information in our Solutions section (available in German only).