How to manage design tokens
Techniques and Resources for managing Design Tokens. The best tool is the least obvious one.
The TL;DR
This article explores various techniques and resources for effectively organizing design tokens.
While software such as Figma can be helpful in exploring potential solutions and creating digital assets, spreadsheets and databases may be better suited for managing extensive collections of design tokens. Notion is also a robust resource for managing design tokens and can be linked with a component's database.
By using a database to store your design tokens, you have a "unique source of truth" where you can manage and organize your tokens efficiently. Meanwhile, plugins like Style Dictionary and Tokens Studio can help you to link design and development tools each other.
Design tools didn't catch it
Most people reasonably think that design tools — such as Figma or Sketch — are the best place where create and store design tokens. As these are related to visual styles, it's right to believe so.
After all, it’s more than choosing the right shade of blue or the most appropriate font size for a call to action.
Effective management of design tokens helps you make the right design decisions.
No design tools currently provide a native system for this. Therefore, we often have to install and use plugins to fill this gap.
Let's take the case of Tokens Studio (formerly Figma Tokens), an excellent plugin for Figma.
I use it daily on multiple projects and love how useful it can be. However, dealing with large sets of tokens can be quite challenging, as even the smallest update requires significant effort.
Managing tokens in this way is a time-consuming activity. It requires keeping styles, documentation, and components in sync across different projects and platforms.
Spreadsheets
Spreadsheets or data tables are relatively easy to use and are a better option for handling the atomic and agnostic nature of tokens.
They are specifically designed for handling large amounts of data and can be very effective at quickly and efficiently processing token-based data.
There are several significant advantages to using this system:
Controlled Vocabulary
One key benefit is the ability to create controlled vocabularies, which enables a more organized and efficient approach to managing data. Additionally, the system allows for updating in multiple instances, making it easier to keep data consistent and up-to-date across various platforms.
Automated Naming
Another advantage is the use of automated naming systems that generate names using functions. This not only saves time and effort in coming up with naming conventions, but also ensures consistency across different data sets.
Multiple Formats Export
Furthermore, the system offers the option to export data to other formats such as CSV, JSON, and HTML. This is particularly useful for sharing data with others who may not have access to the same system.
All these features allow you to gain more control over the final result and ensure that design tokens remain consistent across all projects.
Notion
In addition to spreadsheets and data tables, there are specialized tools designed to help manage every kind of database, such as Notion.
Although Notion is not specifically designed for this purpose, its ability to link different databases and establish relations makes it a powerful tool. This is especially true for use cases like design systems or component documentation, where design tokens can be automatically linked to other relevant information.
I recently created the Design Tokens Manager template that includes a taxonomy and a starter set of design tokens. Let’s give it a try and let me know 🙌
Okay, but how do I connect it to Figma or Sketch?
Designers are used to using those as their main tools.
This is a legitimate question that I've heard many times.
Design tools are meant to explore possible solutions and create digital artifacts that only represent the final product. It's important to keep this in mind.
Yet, handling a substantial amount of data requires a distinct method that can be incorporated into the manufacturing procedure that culminates in the end product.
What about Style Dictionary?
In this case, tools like Style Dictionary serve as a bridge between design/management and development/implementation of the final product.
Design tokens are typically translated into CSS or Sass variables for front-end development.
It's common for this translation to occur, and using a tool to automate this process can be incredibly helpful in streamlining the workflow.
It’s all about the process
There is no right or wrong process.
There is the best process for your team and the product(s) you work on.
I would like to share my idea of a 5-step process with you for comparison and feedback:
Explore design solutions in a design tool, defining the so-called "global" or "core" tokens
Create a database model or spreadsheet that use the naming conventions defined by your team for design tokens
As you create UI components or elements, report all global, semantic, and specific tokens you decide to use back to the database - this is your "unique source of truth"
Use design token plugins as a tool to link the design tool and development tools
Use Style Dictionary to generate variables for the front-end
I understand that you may be questioning the need to both create a database of design tokens and utilize plugins for design tools. You may be asking yourself, "Isn't this duplicating efforts?".
We do this to simplify the design process and maintain uniformity across all your projects.
The reason is to streamline the design process and ensure consistency across all of your projects.
Using a database to store design tokens allows for a "single source of truth" where tokens can be managed and organized efficiently. Plugins such as Style Dictionary and Tokens Studio can link design tools with development tools, making it easier to convert design tokens into multiple platforms and generate build files and documentation.
By using these tools together, you can develop a more efficient and effective workflow for managing your design tokens.
Hi, is the excel template you've referenced downloadable anywhere or is this your own? Looks really good.