[For Designers] Connecting Front-end Developers and Designers with the Token System

March 10

# Tech

# Front-End

# Token System

Intro

What is the Token System discusses what is the token system, includes the definition of tokens, and how to organize tokens to meet our customization needs.

A token system is an approach to abstracting, structuring, and organizing visual styles using tokens. The token system has three layers: reference tokens, system tokens, and component tokens, which are organized hierarchically to allow for customization at different levels. This system can be leveraged to safely and quickly modify any layers to meet design needs without any side effects.

Since we have learned about the advantages of the token system, how do we integrate it into the development and design workflow?

This article will explore how to use tokens in the workflow from the perspectives of front-end developers(referred to as FE below) and user experience designers(referred to as UED below) and how both parties can collaborate effectively.

Preparation

Figma is currently one of the most popular design tools. This article will provide examples of how to use tokens in the design process using Figma. The core concept is the same, and you can apply it to other platforms as well.
If you have ever used Figma, you would know that Figma also has a similar concept: Styles. Unfortunately, Figma Styles only supports two types of visual styles: Text and Color (Effect and Grid are not simple style values and cannot be structured into tokens.). Other types of tokens, such as border-radius, and spacing, cannot be reused in Figma Styles.

figma styles

To fill the gap, let me introduce a Figma plugin: Tokens Studio for Figma

Tokens Studio for Figma is a Figma Plugin that allows you to integrate Tokens into your Figma designs.
It gives you reusable tokens that can be used for a whole range of design options, from border-radius or spacer units to semantic color and typography styles. It allows you to change tokens and see these changes applied to the whole document or its styles.

Here is the main workflow:

1. Create Tokens
2. Apply Tokens
3. Sync Tokens

figma token plugin process

Create or Edit Tokens

First of all, let's create a token. There are two ways to create tokens: use the user interface, or write JSON files directly.

Use User Interface

Tokens Studio provides a bunch of types(see Available Tokens).

We can choose a type and click the + icon

choose type and add

create token

There are several fields:

• Name
  The name of a token. Note that you can use dot-notation in the token names to create nesting. This is very useful when organizing tokens, as it is one of the foundations for implementing the token hierarchy structure we mentioned before. With it, we can create tokens for different groups and organize them in layers.
  As shown in the image above, we have created a reference token ref.palette.blue.0 with the type of color and the value of #000000. Because it starts with ref, we can tell that this is a reference token. Additionally, the middle part is palette, so we know that this group belongs to the color category. Finally, blue.0 represents that this is the first blue color.
  Similarly, we can create ref.palette.blue.1, ref.palette.yellow.0 or a system token sys.color.light.primary, a component token comp.btn.outline.bg.color.
• Value
  The value of a token. As shown in the image above, we assign #000000 to ref.palette.blue.0.
  It's worth noting that in addition to directly inputting a specific value, we can also reference the value of other tokens. This is another foundation that allows us to implement the token hierarchy structure mentioned earlier. With it, we can establish reference relationships between different layers, such as comp.btn.outline.bg.color -> sys.color.light.primary -> ref.palette.blue.0.
  In the token plugin, you can use curly braces to wrap the name of another token to establish reference, and the plugin will also provide intelligent prompts.

reference relation for tokens

• Description
  Optional

Edit with JSON

If you are a non-UI enthusiast or want to perform batch operations, you can directly edit JSON to create and modify tokens and establish reference relationships. The UI and JSON data are synchronized.

create token with json

Editing token is a similar process. We can right-click on an already created token and select Edit Token, or directly modify the JSON file.

Apply Tokens

After creating tokens, we can use them in our drafts. You can right-click the token to select where to apply this token.

For example, we can set the color to Fill, Border, or both when we right-click the color tokens:

apply token

Also, Tokens Studio provides default assumptions when we left-click tokens. For example, with Colors, the plugin assumes that you want to apply the token as a Fill.

We can also control which parts of the design draft are updated by using the Apply selector located at the bottom right of the plugin. We have the following options to choose from:

• Apply to selection: updates only the currently selected elements
• Apply to page: updates the current/active page
• Apply to document: updates all pages, which can be slower

Using Tokens Studio to apply styles to our drafts, we can link Figma with tokens. UED can manipulate tokens to manage every unit of styles that applies to every component in their drafts, and all these results will be recorded in tokens. So all visual styles in design drafts can be structured and stored with tokens. This way, we have achieved the first step: fully and faithfully serializing and storing the design results of the UED team.

Sync Tokens

Since we have recorded all design results in tokens, the next step is how to sync tokens with FE.

Tokens Studio provides several ways to export tokens. The easiest way is to export the token JSON file and send it to FE as you want, such as uploading it to the cloud platform and FE can download the token file from the cloud.

Because we want to run some automation after getting the token file, such as splitting the file and compiling it to style code files, a platform for hosting code that allows us to automate our build, test, and deployment pipeline is a great choice. So I choose Github to store the tokens and use GitHub Action to run some automation workflows.

Tokens Studio integrates GitHub as a way to sync tokens. You can read the document, and it's effortless:

1. Create a GitHub account and a repository.
2. Create a personal access token
3. Paste your Personal Access Token in Tokens Studio
4. Add the GitHub repository and branch
5. Specify a file path where the tokens should be stored (We will discuss this later in the FE section)

plugin GitHub setting

All this information that is required by these steps is prepared by FE (we will talk about this later in the FE section), so UED just inputs some fields in the plugin and doesn't need to care about the details. After these setting steps, UED can easily use Tokens Studio to push and pull the latest token file versions by using the version control bar located at the bottom left of the plugin.

push changes

pull changes

In the End

This post introduces how UED integrates tokens in the design workflow. Tokens Studio is a great plugin to manage tokens in Figma, allowing designers to create tokens and apply these tokens to design drafts. Finally, designers can use this plugin to sync tokens using GitHub, which empowers developers to run some automation workflow after getting these token files.

The next post will introduce how FE integrates tokens in the development workflow.