A designer’s guide to the Figma API

Part 1 of 7 — Understanding the API.

You can find the code for this tutorial here:

At TIDAL, we have a comprehensive design system built in Figma. A little while ago, I decided to have a look at how we could use the Figma API to improve and maybe automate our workflow around this.

The problem I instantly ran into is that there are basically no resources out there demonstrating how to use it, especially at a lower technical level. So I thought I would write a little bit about how to get up and running and using the API.

It is a design tool after all, maybe designers should be able to use it. (This might be painfully slow for a more technical reader)

What you’ll need?

• A text editor. VSCode is good and free.
• Figma.
• A mac. (It should be trivial to adapt the example to Windows, but I rely on the terminal quite a lot.)
• Some fucks to give.

Step1: How the API works:

In essence the API is just a set of URLs, that we call endpoints. We can send requests to these endpoints and get responses back from them. The type of endpoint dictates what sort of stuff you get back. There are 10 endpoints currently available:

• GET file — returns file info in JSON.
• GET file nodes — returns individual node info.
• GET file images — returns images for specific elements.
• GET file versions — returns the version history for a file.
• GET image fills — returns download links for images in the file.
• GET comments — returns a list of file comments.
• POST comments — posts a comment.
• GET me — returns authenticated user info.
• GET team projects — returns a list of projects.
• GET project files — returns a list of files in a project.

Before we carry on we should probably talk about what the API does not let us do: edit Figma files. You might notice from the list of endpoints above that all except one has the GET prefix before it. This means the we only have view-level access to those endpoints. The POST Comments endpoint lets us add a comment but that’s as far as it goes.

This restricts how useful the API is for sure, but I am certain the Figma team is hard at work expanding the functionality. Being able to manipulate a Figma file programmatically will open up so much exciting stuff, so hopefully that’s on the way.

Understanding the workflow.

So what if we wanted to get a few screens from a file and display them? The basic workflow would go as follows:

• Step1: We send a request to the GET File endpoint with the URL of our file as an endpoint.

• Step 2: We get a response in return. This will be a chunk of JSON that contains all the information for every element inside that file. You can think of this as a giant list that describes all the attributes every element has (and doesn’t have).

• Step 3: We iterate through this chunk of information and find the screens we want to display. Each element in a Figma file has a unique ID we need.

• Step 4: Once we have found those IDs, we send them along with a new request, this time to the GET File images endpoint.

• Step 5: That endpoint will then send us some more JSON, but this time it will contain URLs. These URLs are where the images of our screens are hosted by Figma.

• Step 6: We send those URLs to our frontend to display them as images.

In Part 2 we are going to set up a server which will communicate to the Figma API endpoints. I promise it’s not as hard as it seems.

If you want more super long, boring content like this make sure to follow me here. If you want some short-form boring content, follow me on twitter.