Figma tokens automatically turned into code: how we kickstarted our design system

Part 2: Using the Figma API

tldr; You can find the example code on this repository: https://github.com/nicodeclercq/extractFigmaTokensExample

• Part 1: Down the rabbit hole
• Part 2: Using the Figma API (you are here)
• Part 3: From Figma to our codebase
• Part 4: Profits!

Figma offers multiple types of tokens but in this article we will focus on colors as they were our first step toward our Design System. Other tokens can be retrieved the same way and we even took it a step further by extracting more than Figma actually offers: some of our tokens such as spacings are purely conventional on Figma as the tool does not provide any token system for them. The extraction process kept going after that by getting our icons, illustrations and logos as components, but this is another story.

Let’s start with the basics. First, we need a Figma API key. You can generate it from your account settings:

With a simple request, we can get a feel for a Figma file’s structure with this demo file:

https://www.figma.com/file/5dEFiujMXZX0nKyde7nZ6n/Color-tokens-Example

This file has 2 color styles with 3 variations each. To facilitate the tokens extraction, which you will see later, we have used Ellipsis for all our tokens swatches and only for them. The Figma API documentation explains how the file path contains the key needed to do our REST call.

To access our file from the REST API we need to call it like this:

Using this “file” API endpoint on our demo Figma file gives us the following payload:

This output may seem quite long, even though our file only contains six colors and two text nodes. But it gives us all we need to extract our tokens.

We need to work with two of its nodes for that:

• document: can be seen as the DOM of the file, it contains the file’s state with all its elements or objects.
• styles: lists all the tokens available on the file.

The “styles” property of the file contains all the tokens defined or accessible from it (remember that tokens can be shared between multiple files). We first filter those nodes by their styleType, as we only want to extract colors:

and that’s what we get:

These nodes however do not contain any values… That’s where the second entry point comes into action. We will dive into “document”, parsing all of our file’s nodes.

A node using a style can be identified by its “styles” attribute. This attribute contains the style type (lowercased) and the style id that we’ve already retrieved.

Using the “id”s we got from the “styles” entry point, we are now able to get the “fills” property from the appropriate document nodes! We only take the first entry in the “fills” array (we cannot have multiple “fills” when using tokens) and the job is done.

To traverse our tree structure we need to identify the leaves from the nodes as the styles we need are only used on leaves of type “ELLIPSE” here (our circle swatches).

Then we will recursively traverse our structure until we find a leaf using the style we want, if we find nothing we use the `undefined` keyword to identify an empty result.

If you don’t feel comfortable with the reduce function, this link helps getting a better understanding of the following function:

Finally we can retrieve our color:

And the result:

Let’s sum this process up:

1. Get the style ids list
2. Filter the styles by type
3. For each of them find a node in the document that uses this style
4. Filter once more to remove unused styles (we won’t be able to get their values back)
5. For each node retrieve the first fill value

In the next part we will see how we can generate a versioned library of our tokens in all the languages we need.