Internet Brands - Design Tokens
Description
Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.
OVERVIEW
Background
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.
Problem
Let’s split this into two problems.
- Designers and developers need a way to share styles that derive from a common source of truth.
- If a designer changes the hex value for a ‘blue-400’ color in their Figma file, there isn’t a certain way to know that change was adapted into code by the developers.
- This also applies in reverse - there could be changes in code that, over time, designers are not aware of. A common source of styles and their values is necessary for designers and developers.
- Designers and developers need an efficient way to update styles and their values.
- Typically, designers would update developers on changes made to the styles via some type of handoff. This can get tedious when there are many small changes that the designer wants to make. Let's say we want to change the background color of a button from 'blue-400' to 'blue-600'. Here's what the change in code might look like.
- background-color: var(--blue-400);background-color: var(--blue-600);
- But what if we could give the button background color attribute a component-specific variable that could be assigned a color? Here it is again in CSS with the variable as ‘button-color-default-background’.
- background-color: var(--button-color-default-background);
- Now we can keep this same line of code and we can simply have that variable assigned to the blue-400 or blue-600 value. This would allow designers to change the color while eliminating the need for developers to change the line of code.
Solution
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.
- Create tokens with the Token Studio Plugin.
- Push token changes into Github.
- Use the Visual Studio Code editor to convert Token Studio tokens to code.
- Use the created CSS variables in code.
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.
Create tokens with the Token Studio Plugin
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.
Push token changes into Github
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
Transform tokens in VS Code
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.
- The Token Transformer package ‘converts tokens from Tokens Studio for Figma to something Style Dictionary can read, removing any math operations or aliases, only resulting in raw values’.
- Then, the Style Dictionary package is used to transform token information into a usable format for developers (css, javascript, scss, etc.).
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
Using CSS variables in code
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.
Conclusion
Let’s go back to the two issues we’re looking to solve.
- Designers and developers need a way to share styles that derive from a common source of truth.
- Now we have a set of design decisions stored as tokens in a tokens.json file that designers and developers can refer to.
- Designers and developers need an efficient way to update styles and their values.
- Now we can assign different Global Token values to a Component Token. The use of a Component Token relieves designers and developers from having to communicate every small change and it can make bulk changes easier to make.
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.
