Name		Name	Last commit message	Last commit date
parent directory ..
assets		assets
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
airtable_helpers.js		airtable_helpers.js
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json

README.md

Import list of Figma projects, files, and pages into Airtable

This code example can be used to update or insert ("upsert") your team's lists of Figma projects, files, and pages into Airtable. This can help you organize your design projects, their statuses, and tasks. You can schedule this script to run on a recurring schedule to keep your Airtable base "in sync" with Figma.

This code example is based on the generic airtable.js upsert example and uses Airtable.js (maintained by Airtable) to interact with the Airtable REST API and figma-js (community-supported, not by Figma) to connect to Figma's API.

The following screenshots show the gallery view of files and the base schema of the sample base linked to in the instructions below.

The software made available from this repository is not supported by Formagrid Inc (Airtable) or part of the Airtable Service. It is made available on an "as is" basis and provided without express or implied warranties of any kind.

Local setup

Clone/unzip code
Copy .env.example to .env and populate values.
- Explanations of each environment variable is available below
- Use this sample base which has the correctly named tables (Figma Projects, Figma Files, and Figma Pages) and fields.
Install Node dependencies using npm install
Run npm run sync to run the script

Key files and their contents

index.js is the main code file which is executed when npm run sync is run. At a high level, it:
- Loads environment variables, dependencies, and defines the table and field names that align with the template base linked to above.
- Retrieves all projects for the given team ID and upserts them to the 'Figma Projects' table in Airtable
- Loops through each project and upserts the list of files to the 'Figma Files' table in Airtable
- Optionally, loops through each file and upserts the list of pages to the 'Figma Pages' table in Airtable
airtable_helpers.js.js is referenced by index.js and contains helper functions to for upserting and batching record actions.
.env.example is an example file template to follow for your own .env file. The environment variables supported are:
- AIRTABLE_API_KEY - your Airtable personal access token with data.records:read and data.records:write scopes and access to the base ID below
- AIRTABLE_BASE_ID - the ID of your base; you can find this on the base's API docs from https://airtable.com/api. This will always start with app
- FIGMA_PERSONAL_ACCESS_TOKEN - your Figma Personal Access Token
- FIGMA_TEAM_ID - your Figma Team ID, which can be retrieved using these instructions
- POPULATE_PAGES_TABLE - a boolean string; when set to true, the 'Figma Pages' table in Airtable will be populated as well. Defaults to false since pages take significantly longer to retrieve than projects and files.