Design tokens with Figma
A couple of days ago made a free UI Kit in Figma of a nonexistent online magazine Wunderzine. I made it for a demonstration. And today I want to share with you how to maintain frontend works — generate design tokens using Figma API and a few scripts.
Table of contents
- Using Figma API to generate design tokens
3. Functions
- getPalette() function
- getGrids() function
- getSpacers() function
- getFontStyles() function
- Merge all tokens into the one JSON file
4. Create a Style Dictionary config
What is design tokens?
Design tokens is a thing now. It’s an integral part of any design system and a very important part of the product. It helps you to keep your design consistent and solid.
Design tokens is a set of styles — colors, typography, and size variables that are used across the product and can be converted in a format for any platform such as iOS, Android, web applications.
There is a lot of articles about design tokens but I was inspired by this one by Cristiano Rastelli:
Using Figma API to generate design tokens
Get rid of an extra steps
In the article above guys from Badoo use Sketch files to generate design tokens. But there is a step which we can remove if we use Figma — this step is to save and transfer Sketch file to developers. Here is the scheme if you use chain Sketch-Abstract and Figma:
As you can see with Figma we have only three main steps here because Figma doesn't require saving and all files in the cloud + Figma has API with convenient endpoint hooks and we can parse any file very easily through the internet.
Parse Figma’s file
To get Figma’s object tree we will use this simple async fetch script:
This script will get to us the following structure in the console:
What we are looking for here is styles subobject it contains all styles used in the document.
But, unfortunately, Figma doesn’t provide values inside each style only type and name.
So, we will act differently, we will parse page and artboards inside the file. Here is our UI Kit structure:
Takeaway. For a good design system, of course, I recommend to use different files in Figma — one for pages, one for styles, another for components and share libraries across the files. But because I’m using a free plan I can’t publish libraries and share a whole project with everyone, but only files inside it, separately.
Ways to grab the styles
We know that all styles what we need on the “styles” page — grids, spacers, colors, and typography.
That is how a rectangle on the “palette” artboard looks like in JSON:
There are two ways to grab styles from Figma. The first one — by association names and ids — we can take a fill id compare and associate it with a fill style name like that:
It’s the most code consuming way, but it’s autonomous. And the second one which we will use is to rename objects to style names and get parameters without style association. It will take less work:
Style-dictionary
To generate design tokens we will use Style Dictionary is a convenient tool very capable and automatic. Here is a short overview presentation:
So, our tokens will be returned from Figma in a specific format like:
Then, we will take this JSON object and covert it trough style-dictionary.
Functions
Here is a function to get “styles” artboard and all children inside:
And here is a function getPalette() for the color palette:
getPalette() function
getGrids() function
getSpacers() function
getFontStyles() function
Merge all tokens into the one JSON file
Now when we have functions for all our tokens — colors, spacers, typography, grids, we can merge all returned object from these function into one JSON object which we will call “token”.
Now we can create a simple “download” button and download a base.json
Create a Style Dictionary config
There is a simple way to create Style Dictionary config in a JSON file but I made a script for NodeJS in case if I’ll need to extend the config and add additional options. Here is my “style dictionary” folder on GitHub.
I will convert only tokens for the web. From the one base.json file I’ll get four files — colors, typography, grids, spacers.
Here is the project I made with Style Dictionary and Figma API:
In conclusion
This was a very interesting experiment. I can’t say that’s a production-ready method. My goal here is not to show how you should organize your design system, because is a complex process with many dependencies. I wanted to show how we can make design handoff easier and cut extra steps, automate the process in particular via Figma API and Style Dictionary.
Thank you!
