/figma-export

A CLI tool to bulk export Figma, FigJam, and Figma Slides files

Primary LanguageTypeScriptMIT LicenseMIT

figma-export

figma-export is a CLI tool for bulk exporting Figma, FigJam, and Figma Slides files to your local desktop in Figma's proprietary .fig/.jam/.deck format. figma-export supports downloading by team, project, and even drafts.

This tool leverages Figma's REST API and Playwright to automate discovering Figma files and downloading them.

Table of contents

Requirements

  • node (v20.15.x)
  • npm (v10.7.x)

Other versions may work, but have not been officially tested.

You will also need a Figma access token that you can generate through your Figma user profile settings.

Installation

  1. Clone the repository or download the latest release
  2. cd into the repository
  3. Run npm install

Usage

Environment variables

Create a .env file at the root of the repository:

FIGMA_EMAIL="email@example.com"
FIGMA_PASSWORD="hunter2"
FIGMA_ACCESS_TOKEN="figd_abcdefghijklmnopqrstuvwxyz"
DOWNLOAD_PATH="/Users/anonymous/Downloads" # Absolute path where files will be downloaded to
WAIT_TIMEOUT=10000 # Time in ms to wait between downloads

If you are using SSO to log in to Figma, you can either manually set a password (see wiki) or you can provide your Figma auth session cookie through FIGMA_AUTH_COOKIE in lieu of FIGMA_EMAIL and FIGMA_PASSWORD:

FIGMA_AUTH_COOKIE="my-auth-cookie-value"
FIGMA_ACCESS_TOKEN="figd_abcdefghijklmnopqrstuvwxyz"
DOWNLOAD_PATH="/Users/anonymous/Downloads"
WAIT_TIMEOUT=10000

The value for FIGMA_AUTH_COOKIE should be the value of the __Host-figma.authn cookie. Please refer to the wiki on how to grab this value.

Generating files.json

files.json determines which Figma files within your account will be downloaded.

Tip

Drafts are just a hidden project in Figma so you can absolutely download them with figma-export. Check out the wiki to learn about how to grab the drafts project ID.

It is recommended that you use one of the built-in commands to generate files.json:

  • npm run get-team-files {team_ids ...} - Gets all files for all projects within given team IDs (space separated)
    • Example: npm run get-team-files 12345 67890
  • npm run get-project-files {project_ids ...} - Gets all files for given project IDs (space separated)
    • Example: npm run get-project-files 12345 67890

To find your Figma team ID, navigate to your Figma home, right click your team in the left sidebar, and then click Copy link. The last segment of the URL that you copied will contain your team ID: https://www.figma.com/files/team/1234567890.

To find a project ID, navigate to your team's home, right click the project, and then click Copy link. The last segment of the URL that you copied will contain the project ID: https://www.figma.com/files/project/1234567890.

You are free to manually construct this file as long as it follows this structure:

[
  {
    "name": String,
    "id": String,
    "team_id": String?,
    "files": [
      {
        "key": String,
        "name": String
      },
      ...
    ]
  },
  ...
]

This is a modified structure from the return value of Figma's GET project files endpoint.

Starting the downloads

Once you have generated files.json, you can then run npm run start to start the downloads. The status of each download will be shown in the console.

Each file will be downloaded to your specified DOWNLOAD_PATH in a folder named with the project's name and ID. Each file will be saved as the file's name and ID (key). The folder structure will look something like this:

Project A (12345)/
├── File X (123).fig
└── File Y (456).fig
Project B (67890)/
└── File Z (789).fig

If you ran get-team-files, your files.json will also have references to the team ID(s) so projects will be placed in a folder named after the team ID. In which case, the folder structure will look something like this:

1029384756/
├── Project A (12345)/
│   ├── File X (123).fig
│   └── File Y (456).fig
└── Project B (67890)/
    └── File Z (789).fig
5647382910/
└── Project C (45678)/
    └── File W (012).fig

Parallel downloads

Parallel downloads are disabled by default. To enable them, update the following properties in playwright.config.ts:

export default defineConfig({
  ...
  fullyParallel: true,
  workers: 3, // The maximum number of parallel downloads
  ...
});

Retrying failed downloads

If you encounter downloads that fail, you can attempt to re-run only those failed downloads using the npm run retry command.

Note that downloads may fail due to any number of reasons, but typically it is due to reaching the Playwright timeout. You can increase this timeout by updating the timeout configuration in playwright.config.ts.

Commands

The following commands are available via npm run:

Command Description
get-team-files Generates files.json from Figma team ID(s)
get-project-files Generates files.json from Figma project ID(s)
start Starts downloads
retry Retries failed downloads from last run
dry-run Lists files that will be downloaded
report Show an HTML report of the last run

At any time, you can press ctrl+c to stop a command.

Known issues

  • Two-factor authentication is not supported (suggest temporarily disabling two-factor authentication)
  • You must have editor access to a file in order to download it
  • Some downloads may take a long time (large file size, slow internet connection, etc.) which can trigger the Playwright timeout and lead to a failed download (suggest increasing the timeout in playwright.config.ts)
  • Rate limiting may occur as it is not clear if Figma will throttle based off of how many files you download (suggest using WAIT_TIMEOUT)