Design Tokens: The promise of a single source of truth
Design tokens were a hot topic of 2019. Helped by the need to scale design systems across multiple platforms and languages, design tokens — design decisions stored as key/value pairs — are increasingly becoming a key element of modern design systems.
Design tokens potential to become the much sought-after “single source of truth” has seen a number of tools created to help author, manage and publish design tokens. However, not unlike the home automation market, each tool formats the design token data in its own way.
Design tokens are meant to be tech-agnostic but yet their naming and structure depend on the specific tool.
Transforming style properties from JSON to (S)CSS variables using a tool like Style Dictionary works really well — as long as it’s the only direction you are going. However, integrating other parts of the design workflow is where it gets tricky. Being able to reliably convert design data between multiple tools requires a lot of effort and custom scripting, an approach unlikely to scale beyond your immediate team.
Imagine if there was a way to seamlessly share design token data between applications and tools. Between visual tools and code. Across teams and organisations. Even beyond your own codebase, taking your design language to cloud apps. Improved interoperability would unlock a number of exciting integration opportunities for design system teams and go a long way towards closing the gap between design and engineering.
What can be done? The good news is a coordinated effort towards a universal format for design tokens got off the ground in 2019 and we are expecting to see first tools implementing the standard in 2020. Individual attempts at standardisation have been made before but now we are seeing a wider representation from vendors and system teams. There is a lot of decisions to be made as the group works its way through the spec which makes it an exciting place to watch. You can follow the progress and contribute here.
A universal format for design tokens is a promising concept that is still in development phase but new opportunities will also mean changes to your design workflow.
