How to generate a Tailwind Theme from Figma Design Tokens

In this post, I will show you how to use Figma and design tokens to create a Tailwind theme automatically. This approach can save you time, improve the consistency of your design, and reduce the risk of errors.

If you’re not familiar with Tailwind or design tokens, don’t worry. I will provide an overview of these concepts and explain how they can be used together to streamline your design process. Whether you’re a designer or developer, this post offers something. So let’s dive in and see how you can use design tokens and Figma to create a Tailwind theme with minimal effort.

What are Design Tokens

Design tokens are a way to store design-related information, such as colors, typography, and spacing, in a central location. This makes it easy to maintain consistency across a design system and allows designers and developers to access and use this information in their work quickly.

One of the key advantages of using design tokens, especially in Figma, is that they can be easily shared and accessed by all members of the design and development team. This eliminates the need for everyone to search manually and input design information, which can save time and reduce the likelihood of errors.

Additionally, because design tokens are stored in a central location, it is easy to make changes to them and see those changes reflected throughout the design system. This can help ensure that the design remains consistent and cohesive, even as it evolves over time. Overall, using design tokens can help improve the efficiency and consistency of the design process.

One example of Design Tokens would be colors, as you see here:

Each color (for example red.500) would be a Design Token. But so would a box shadow or a font family be.

How to

Let me guide you through the steps to utilize Design Tokens in Figma and create a Tailwind Theme out of them.

Design Tokens & Figma

To start off, we need to install the Figma Tokens plugin.

After installing the plugin, let’s create a new color Design Token by clicking the + icon.

A new Modal opens to input the name, value, and description of the Token.

As you see in the screenshot, it’s possible to nest your Tokens by adding a dot (in the end it’s just a JSON). To make the mapping easier, we will add nesting and prepend color to our Token. Going with the Tailwind approach, we will also add 500 to the name of the color, as we want to get a lovely palette in the end.

Now, what exactly is the plugin generating? Let’s have a look! By clicking the {} icon, it will reveal the JSON.

Which will show us this structure:

{
  "colors": {
    "red": {
      "500": {
        "value": "#ef4444",
        "type": "color"
      }
    }
  }
}

If we now want to use our Design Tokens in Figma we have to export them as styles. This is done in the plugin via “Styles”, and “Create styles”:

After that, we can use our color in Figma. So let’s just create some shape and fill it with our color.

We now see the red.500 we just created. So by using this style, we’re actually hooking up to the Design Tokens from the plugin. So whenever a Designer wants to make adjustments to a Design Token, they should do the change in the plugin and create the styles, as seen above. The designers should never create new colors directly in Figma, it should always be connected to the Design Tokens!

Saving and syncing the Design Tokens

To save our single source of truth (the JSON with the Design Tokens), we want to push it to our GitHub Repository (there are other ways to sync).

To do that, you switch to the “Settings” tab, choose Github and enter your credentials.

Get your personal access token from GitHub and choose the scope repo . You will find a more detailed description of how to set this up in the official documentation.

Once you get the sync going, you can save the JSON file in a GitHub repository, and whenever someone opens the Design file, they can load the JSON file from that repository to get the Design Tokens.

Transforming the JSON

Now that you have the Design Tokens in the JSON file, you need to transform them. The transformation removes math operations and aliases and only returns the raw values of your tokens.

Transformation is done with the token-transformer. So let’s install that:

npm install token-transformer

Then let’s create a script in our package.json to make life easier:

"scripts": {
  "tokens:transform": "token-transformer tokens.json transformed-tokens.json global"
}

Running npm run tokens:transform then transforms our tokens.jsonand we will have a new transformed-tokens.json file to work with.

Creating the Tailwind preset

Next, you will need to import the JSON and map it to the Tailwind preset.

So we will need some JavaScript functions to do that. Let’s import the JSON:

import tokens from 'transformed-tokens.json';

Now we will map the tokens to an object which, in the end, will be passed to the Tailwind config.

What are we doing here? We’re taking our tokens object and map it to a theme object of the same structure as Tailwind knows it (check the default config for reference). In this example above we map the colors, so there’s some initial work to be done to map all the tokens.

Using the Tailwind preset

Using the preset is pretty straightforward now. We import the preset that we export and use it in the Tailwind config.

Now we can go ahead and use our red color in the Frontend:

<h1 class="text-red-500">My Red Heading</h1>

If the hex code behind the red-500 would ever change in the design, no worries, as syncing the Figma Tokens will update everything!

Conclusion

In conclusion, design tokens are a valuable tool that should be considered by designers and developers looking to improve the efficiency and consistency of their design process.

Design tokens are especially useful when working on large or complex projects, where maintaining consistency is critical. They can also be helpful when working in teams, as they provide a shared language and set of standards for designers and developers to use.

Overall, design tokens are a versatile and powerful tool that can benefit any design process. Whether you’re working on a small project or a large-scale design system, using design tokens can help you save time, reduce errors, and ensure that your designs are consistent and cohesive.