October 2018 | Updated: December 2021

A designer’s guide to the Figma API

Part 1: 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.
  • macOS. (It should be trivial to adapt the example to Windows, but I rely on the terminal quite a lot.)

Step 1: 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:

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 theGETprefix 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.

Update from 2022:

While this is still true, you can now manipulate Figma documents with plugins

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:

  • Step 1:

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

An illustration demonstrating how a server communicates to 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).

An illustration showing how an endpoint delivers a server request

  • 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.

An illustration showing a server processing a request

  • Step 4:

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

An illustration demonstrating a server making a second request to an 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.

An illustration demonstrating an endpoint processing and returning a request

  • Step 6:

    We send those URLs to our frontend to display them as images.

An illustration demonstrating a server returning a request to a front end client

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.