Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
We have color and text styles in our Figma file that designers can use (process shown in the color and typography case studies). The next step is to think about a workflow between designers and developers to use these styles.
Let’s split this into two problems.
The solution to the two problems above can be found in the use of design tokens. Design tokens are ‘all the values needed to construct and maintain a design system - spacing, color, typography and more, represented as data’ (definition adopted from Esther Cheran's presentation). There are various ways to work with design tokens but here is a workflow and the tools involved that I used to implement design tokens into the system at Internet Brands.
This case study is meant to be an overview of the workflow but to go more in depth on the setup process, please refer to this helpful guide by Satellytes.
I used the existing color and type styles at Internet Brands to create design tokens using the Token Studio plugin. Here is an example of what the text style for ‘Body Text Small’ looks like in the Figma.
‘Body Text Default’ Characteristics in Token Studio
'Body Text Default' token information stored in Token Studio
Here are screenshots of how we organized our color and typography tokens in the Token Studio plugin.
Token Studio - Color Tokens
Token Studio - Typography Tokens
With the color and text tokens in place, we have a beginning foundation of Global tokens.
Now I have the information for the tokens and I want to put it in a json file for us to convert to CSS, the format we’re using at Internet Brands.
Token Studio connects to Github along with other version control services. I input account and repository information to connect to the Github repository and then used the plugin to create a new tokens.json file that stored the token information in the repository. When I go into VS Code and open the repository, I’m able to pull the updates. Below is a screenshot of the tokens.json file that was created with the ‘Body Text Default’ style information.
Screenshot of VS Code - Tokens.json file and ‘body text default’ style highlighted
Now that the token information is in the tokens.json file, I want to convert the tokens into CSS variables, which is what Internet Brands is using for web. There are a couple packages we can use to accomplish this.
I’ll go into VS Code and run the appropriate commands for the two packages to transform the token information from our json file into CSS, the preferred format for our developers. And once the tokens are transformed, I get a nice set of CSS variables in this CSS sheet here:
CSS Variables - Typography
CSS Variables - Color
Let’s view an example of how these CSS variables can be used by the developers.
I created a Component Token for the background color of a button. Here’s is a little visual of how the values are adopted.
The developer can use the ‘--button-color-default-background’ variable for the background-color attribute.
Let’s say our brand color changes and I want to change the button background color to Purple-400. I can assign the Component Token a different Global Token value. This allows me to keep the Component Token the same and now the token assignment looks like this.
Let’s go back to the two issues we’re looking to solve.
Implementing tokens took coordination and an openness to try new methods for designers and developers on our team alike. Below are a few more design token related resources that helped me during the process and that provided a language for me to communicate the info to my team members.
