Figma API to Google Sheets: Import Figma Data [Tutorial]

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 in Google Sheets

To pull data from the Figma API to Google Sheets, first install and open the Apipheny Google Sheets add-on.

Apipheny is a no-code API integrator for Google Sheets that you can use to make unlimited API requests, connect to unlimited API data sources, save API requests, schedule API requests, and more. Click here for more info about Apipheny.

1. Install Apipheny by opening the following link on desktop and then clicking the Install button on the page: https://gsuite.google.com/marketplace/app/apipheny/966163326746

Install Apipheny in the Google Workspace Marketplace

2. After you’ve installed Apipheny, open a Google Sheet and then click on the Add-Ons option in the top menu. In the add-ons menu, you should see Apipheny.

Click Apipheny > Import API to open the Apipheny sidebar in your Google Sheets, like so:

Open Apipheny in your Google Sheet after installing it

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=&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

Note: do not include the brackets “<>” around the values.

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 terminal 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_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: do not include the brackets “<>” around any of the values.

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.

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.

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>. There should be a space between “Bearer” and <your_ token>. Do not include the brackets “<>” around 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, such as:

Save and schedule your Figma API request
Make a POST request to the Figma API (if available)
Use the custom =APIPHENY() function to call the Figma API request inside your spreadsheet
Create an API request by referencing the value of a cell in your Figma API URL with three curly braces eg. {{{Sheet1!A1}}}

No Comments

API Integration, API Tutorial, Apipheny Tutorial, Google Sheets, Import API

Figma API to Google Sheets: Import Figma Data [Tutorial]

Step 1.) Install and open the Apipheny Add-on in Google Sheets

Step 2.) Register an application via your Figma account

Step 3.) Generate an authorization code

Step 4.) Generate an access token

Step 5.) Choose a Figma Endpoint

Step 6.) Enter your Figma API request into Apipheny

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

Related Posts

10 Nov

Airtable API To Google Sheets: Import Airtable Dat

08 Jun

Twitch API to Google Sheets: How To Import Twitch

29 Apr

Pipedrive API to Google Sheets: Import Pipedrive D