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:
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
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:
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:
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:
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:
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:
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:
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!
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:
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.
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:
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.
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:
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:
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:
Related articles: