Figma API Tutorial - How To Connect To Google Sheets

Figma is a popular vector graphics editor and prototyping tool, and Figma has a public API that anyone can access.

In this tutorial, you will learn how to connect the Figma REST API to Google Sheets in 7 steps:

Install the Apipheny add-on
Register a Figma application
Generate a Figma API authorization code
Generate a Figma API access token
Choose a Figma API Endpoint
Enter your Figma API request into Apipheny
Run the Figma API request in your Google Sheet

Step 1.) Install and open the Apipheny add-on for Google Sheets

Apipheny is an API connector for Google Sheets. You can use Apipheny to connect your Google Sheets to unlimited API data sources, make unlimited API requests, and more. There is a 30 day free trial included.

1.) Install Apipheny by opening the following link on desktop and then clicking the Install button in the Google Marketplace: https://apipheny.io/install

2.) After you’ve installed Apipheny, open a Google Sheet and then click on the Extensions dropdown in the menu at the top.

In the dropdown list you should see Apipheny. Click Apipheny then click Import API to open the Apipheny sidebar in your Google Sheet.

Tip: you can open a new Google Sheet by entering this URL in your browser: sheet.new

Step 2.) Register an application via your Figma account

First, log in to your Figma developer account using your regular login credentials.

Then, on the My Apps tab, click the Create a new app link:

Click on My Apps in the Figma Developer Dashboard

You’ll then need to complete some details about your application. Enter the name and website for your app, upload a logo, specify a callback URL, then click the Save button:

Enter your App Details and then click Save

Your application should now be created.

Next, you’ll see your client id and client secret. Copy and paste your client id and client secret values to a safe place, because you’ll need them later:

Copy and paste your client ID and client secret values to a safe location for later

Step 3.) Generate an authorization code

In your browser address bar, copy and paste the following link:

https://www.figma.com/oauth?client_id=your_client_ID&redirect_uri=your_redirect_URI&scope=file_read&state=state&response_type=code

Don’t forget to replace the following values/parameters in the URL:

Replace your_client_ID with your client id, obtained when you created the app
Replace your_redirect_URI with the redirect URI you have in your app’s settings

After you replace the two values and press Enter, an authorization page will be displayed. Click Allow Access to grant access:

Click Allow Access after submitting the authorization URL

The authorization code will then be displayed in your browser’s address bar. Copy and paste the value of this authorization code to a safe location and proceed with the following step, as this code is only valid for 60 seconds!

Copy your authorization code because you'll need it in the next steps — Copy your authorization code because you’ll need it in the next steps

Step 4.) Generate an access token

To generate an access token, open up a command prompt window (for Windows OS) or a terminal (for Mac OS) and compose the following curl command:

curl -X POST "https://www.figma.com/api/oauth/token?client_id=your_client_id&client_secret=your_client_secret&redirect_uri=your_redirect_URI&code=your_authorization_code&grant_type=authorization_code"

You’ll need to replace a few values:

your_client_id is your client id obtained when you created the app
your_client_secret is from Step 2
your_authorization_code is the code you previously obtained, in Step 3
your_redirect_URI is your redirect URI that you previously configured in your app settings

Note: For Mac OS you may need to use single quotes ( ‘ ) instead of double quotes ( ” ).

When you submit the request, your access token will then be displayed in the response. Copy and paste the value of your access token to a safe location, because you’ll need it in the following steps.

Note: If the token/key that you generate has an expiration time, you will need to complete this same process again to get a new token when the old one expires.

Step 5.) Choose a Figma Endpoint

In this section, we’ll show you how to browse the Figma API documentation to find the API endpoint URL that retrieves the information you need from your Figma account. Every API has a URL, and every URL has an endpoint, which is the last part of the URL that tells the API what data to return back to you.

If you already know your URL and endpoint, or you want to use the same example as us, just skip to Step 6.

To look through available endpoints, first open the Figma API documentation page: https://www.figma.com/developers/api

The menu on the left contains a list of categories, each with its own endpoints:

Clicking on a category, such as Users, will scroll to that category’s section and show you a list of the associated types and endpoints:

Figma API Endpoint documentation example

For example, when clicking the Users category, the page scrolls to its Types section and below, you’ll see the one available endpoint for it: “GET me” which allows you to access information regarding the currently authenticated user.

Each endpoint’s documentation contains descriptions of the endpoint’s purpose, the endpoint’s HTTP method (GET), it’s URL, the return values, and an option to make a test request to that endpoint. On a separate column on the right, you can find the associated CURL command and the response to the endpoint invocation:

All API calls to Figma should be made to this base URL: https://api.figma.com/v1

All the endpoints should be appended to this base URL.

Note: Check their documentation to confirm the latest version and update the version number in the URL if necessary.

Step 6.) Enter your Figma API request into Apipheny

Now go back to your Google Sheet and make sure that the Apipheny add-on is open on the “Import” tab. With the Import tab open, enter these details into the add-on:

Method: At the top of the Apipheny sidebar, select the HTTP method (GET or POST) required by your API endpoint. For this example, we are using the GET method.

API URL: In Step 5, we explained how you can find the Figma REST API endpoint that you need. Now copy and paste your complete Figma API URL into the Apipheny add-on, where it says API URL Path, followed by any parameters required for your query (if applicable).

For this example, we are using the GET team projects endpoint, which returns a list of all the Projects within the specified team. This is what the whole URL looks like:

https://api.figma.com/v1/teams/projects

If you want to use the same URL, don’t forget to replace <team_id> with your actual team id.

Headers: In the Headers section of Apipheny, add one row with the following key and value:

Header
Key:
Authorization
Value:
Bearer your_token

Where it says your_token, copy and paste your actual token that you got in Step 4. Don’t forget to put the word Bearer before your_token and there should be a space between Bearer and your_ token.

Here’s what your API request should look like when entered into Apipheny, if you’re following the same example as us or using a similar endpoint:

Figma API request entered into the Apipheny add-on in Google Sheets

Step 7.) Run the Figma API request in your Google Sheet

Finally, the last step is to click the Run button at the bottom of the Apipheny add-on and then wait for the Figma API data to be imported into your Google Sheet.

Here’s what our request looked like when completed:

Figma data imported into Google Sheets using the Apipheny add-on

That’s it! You’ve successfully connected your Figma account to Google Sheets using the Figma API, Google Sheets API, and the Apipheny add-on.

After making a successful request to the Figma API, try querying a different Figma API endpoint, or try using one of the more advanced features in the Apipheny add-on.