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
Designers and developers need a shared source of truth for styles. Without it:
- A color change in Figma (e.g., ‘blue-400’ to ‘blue-600’) may not make it into the code—or vice versa.
- Keeping styles in sync requires tedious handoffs and manual updates.
A more efficient way is needed to update styles without constant developer intervention.
Solution
Design tokens solve this by storing design decisions (colors, spacing, typography, etc.) as reusable data. Here's how I implemented them at Internet Brands:
- Create tokens with the Token Studio Plugin.
- Sync changes to Github.
- Convert tokens into code using Visual Studio Code.
- Apply CSS variables to ensure easy updates without modifying code directly.
This approach keeps styles consistent and reduces unnecessary developer work.
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
By implementing design tokens, we’ve addressed both key challenges:
- A shared source of truth: Styles are now stored as structured tokens in a tokens.json file, ensuring consistency between design and code.
- Efficient updates: Component Tokens allow designers to make changes without requiring constant developer intervention, simplifying bulk updates and reducing friction.
This shift required collaboration and a willingness to adapt, but it has streamlined our workflow and improved our design system. Below are some resources that helped me throughout this process and guided conversations with my team.
