API Integration Tutorials

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

  1. By Apipheny Team

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:

  1. Install the Apipheny add-on
  2. Register a Figma application
  3. Generate a Figma API authorization code
  4. Generate a Figma API access token
  5. Choose a Figma API Endpoint
  6. Enter your Figma API request into Apipheny
  7. 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
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
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
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
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
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
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_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.

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:

Figma API documentation
Figma API documentation

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
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
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
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}}}

Related articles:

TAGS :

Related Posts

30 Aug

Zendesk API to Google Sheets: Zendesk Integration
Import Google Search Console Data into Google Shee

18 Nov

Gravity Forms API to Google Sheets: Import Gravity

API Basics

Apipheny Features