Tokens allow us to define these brand properties - colors, typography, animation, and even content elements - in an agnostic medium (typically JSON) from which all of the actual styling code that is used to build products (e.g. CSS) is generated.
In the last few years alone, a plethora of tools and services have launched specifically to help teams create, manage, and leverage design tokens in their workflows. It seems like we’re approaching a fairly stable baseline for token-based workflows across teams and functions. So where do we go from here?
It is difficult to predict the future possibilities of design tokens and with so many variables, such as changes in design and development practices and the sheer advancement of technology, there is no one solution that is going to fit each and every technology stack and implementation. Or is there?
Let’s look into the future and explore some possibilities.
One thing is clear, design tokens are becoming more widespread and organizations are looking for ways to create, manage and, most importantly, automate the process. So, what could an automated design tokens process look like, or better yet, what could that even mean?
Well, what about automated token generation? Imagine being able to ask a tool to extend a token set by 4 sequential values. The tool adds the correct values to the JSON file but also adds the appropriate styling variables and even suggests what variants of components could be added.
Let’s think about adoption. At the moment we rely on JSON, CSS and SASS for storing and managing design tokens but new languages and formats emerge all too often. Could we see an entirely new language or format that sits at the under belly of all design and technology stacks?
The increase in design token usage is only going to continue but is storing and managing design decisions the only application of this concept? Definitely not. Imagine if I could store and manage information about accessibility, localization and other product related data.
With design tokens, the industry is just getting started. To support you we have created a copy and paste JSON file with a bunch of design tokens. Paste it into your favorite tools, or if you have access, straight into Knapsack itself. Plus, check out our Tokens Starter Kit on Figma. Enjoy!
What do you think? Let us know by hitting us up on LinkedIn or Twitter.
.jpeg)