Summary

This article provides a guide on setting up Figma and accessing a Figma file with a server.

Abstract

The article is a guide for designers on using the Figma API. It covers the process of setting up Figma and accessing a Figma file with a server. The guide includes instructions on creating a new Figma file, copying the contents of a provided file, and adding a personal access token in Figma. The article also explains the importance of keeping the API key safe and never committing it to a public repo. The guide concludes by stating that the next step is to make requests to the API and fetch information about the file from one of the Figma endpoints.

Opinions

The author assumes that the reader has already set up a server, as mentioned in Part 2 of the guide.
The author emphasizes the importance of keeping the API key safe and never committing it to a public repo.
The author provides a link to their GitHub repository for the code used in the tutorial.
The author encourages readers to follow them on Medium and Twitter for more content.

A designer’s guide to the Figma API

Part 3 of 7 —Setting up Figma.

You can find the code for this tutorial here:

danhollick/FigmaAPIThing

The repo for this tutorial: . Contribute to danhollick/FigmaAPIThing development by creating an account on GitHub.

github.com

So in Part 2 we got the hardest part out the way early and set up a server but there are still a few key ingredients missing. Namely, we don’t have a Figma file to talk to.

Step 3: Setting up Figma.

Go ahead and log in to Figma, if you don’t have an account (why are you reading this?) you can sign up for free. Once that’s done, create a new file. Just make sure it’s not in any other project you might be using for something important. Copy the contents of the file below and paste it into your document. This is the file we are going to be accessing with our server.

Note: don’t try use my file for this exercise, your authentication will fail.

Next, you need to go to Account Settings in Figma. You should see a section called Personal Access Tokens:

Go ahead and add one, you can call it whatever you see fit. Figma will generate a long token that looks something like this:

I revoked that, so don’t bother trying to use it.

Like Figma says, we won’t get a chance to see this again so copy it and add it to our server.js file like so:

var express = require('express')

const FigmaAPIKey = ‘XXXX–XXXXXXXX–XXXX–XXXX-XXXX–XXXXXXXXXXXX’

So what is this and why is it important? In short, Figma uses this API Key to authenticate the requests we make against their endpoints. Anyone who has this token, can impersonate you on the Figma servers, so you need to keep it safe. Never commit this to a public repo.

The next thing we need to do is save the file key. This is a unique identifier Figma creates for our file and it’s found in the url:

https://www.figma.com/file/copy-this-part-here/:title

Go ahead and copy that out and save it in our server.js file like so:

Okay cool. That’s basically all we need to do with Figma.

In part 4 we are finally going to make some requests to the API and get our server to fetch info about this file from one of the Figma endpoints.

A designer’s guide to the Figma API

Part 4 of 7 — Making a request.

medium.com

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.