Image for post
Image for post

A designer’s guide to the Figma API

Part 1 of 7 — Understanding the API.

Daniel Hollick
Oct 11, 2018 · 4 min read

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:

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.
Image for post
Image for post
Step 1
  • 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).
Image for post
Image for post
Step 2
  • 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.
Image for post
Image for post
Step 3
  • Step 4:
    Once we have found those IDs, we send them along with a new request, this time to the GET File images endpoint.
Image for post
Image for post
Step 4
  • 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.
Image for post
Image for post
Step 5
  • Step 6:
    We send those URLs to our frontend to display them as images.
Image for post
Image for post
Step 6

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store