Member-only story
How to Automate Design Tokens in a Design System
Colors, spacing, font weights, and font sizes are all design tokens
In a design system, there is traditionally a distinction between the design and the code. We have designers working on what the components will look like and developers who will implement these components. However, some effort is required to keep both of them in sync.
So when I started a new design system, I wondered if it would be possible to eliminate some of this friction. The idea became to create an automated process that would keep design tokens of the design tool in sync with the code behind it.
Design tokens are what keep our design system consistent: Colors, spacing, font weights, and font sizes are examples of tokens. In an ideal world, they follow a sequence (4px, 8px, etc.) and are always chosen from this sequence.
What’s the benefit of this automated process? Well, let’s say we don’t have any automation in place and a designer makes a change to the color blue. They would have to communicate with developers to make the same change in the code. Can you see how this can result in an out-of-sync problem? By contrast, in the workflow of the automated process, the designer makes a change and it’s automatically reflected in the code.
In this article, I will take you along the process of how to set up an automated process for keeping design tokens in sync between design and code.
Overview
I know this has been a bit abstract so far. That’s why below is an overview to give you a visual sense of what we are trying to accomplish:
In short, our design tool of choice is Figma. They provide a great API to interact with, and this makes it easier to get access to the design tokens.
We will create a Node.js server that will connect with Figma to retrieve the tokens (text weights, spacings, colors, etc.). Afterward, the node instance will generate theme files for the developers to use.
