Skip to content

Complete beginner guide

Jump to bottom
Alex Chan edited this page Jan 2, 2025 · 5 revisions

This guide will walk you through how to set up all the prerequisites and how to configure and use figma-export itself.

Note

This iteration of the guide will focus on macOS, but I plan on writing a Windows specific guide as well.

Prerequisites

The required prerequisites are installing Node.js, npm, and Git.

Install Node.js and npm

We'll install Node.js and npm using nvm, a Node.js version manager.

  1. Open Terminal.app
  2. Run the following command to install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
  1. Once the installation finishes, run the following command to install Node.js and npm:
nvm install 20

Install Git

We'll install Git through XCode's command line tools.

  1. Open Terminal.app
  2. Run the following command to initialize the installation:
xcode-select --install
  1. A macOS prompt will appear. Click Install.
  2. Once the installation finishes, you can click Done

Generate a Figma access token

Go to https://www.figma.com/developers/api#access-tokens and follow the instructions on how to generate an access token for your Figma account. Your access token must have access to the file contents scope.

Keep this access token somewhere safe because we'll need it later.

Download figma-export

  1. Open Terminal.app
  2. Run the following command to download figma-export to your home folder:
git clone https://github.com/alexchantastic/figma-export.git
  1. Run the following command to navigate to where figma-export was downloaded in the prior step:
cd figma-export
  1. Run the following command to install figma-export's dependencies:
npm install

Configure figma-export

  1. Open Terminal.app
  2. Run the following command to create a .env file and edit it with TextEdit.app:
touch .env; open -e .env
  1. TextEdit.app should launch with .env ready to edit
  2. Paste the following into the .env file:
FIGMA_EMAIL="YOUR_FIGMA_EMAIL"
FIGMA_PASSWORD="YOUR_FIGMA_PASSWORD"
FIGMA_ACCESS_TOKEN="YOUR_FIGMA_ACCESS_TOKEN"
DOWNLOAD_PATH="YOUR_ABSOLUTE_DOWNLOAD_PATH"
WAIT_TIMEOUT=10000

Note

If you are using SSO to log into Figma and thus do not have a password, please reference the wiki guide on how to set a password. If you are stuck on SSO for whatever reason, you will need to use the FIGMA_AUTH_COOKIE method which will not be covered in this guide.

  1. Replace YOUR_FIGMA_EMAIL with the email you use to log into Figma
  2. Replace YOUR_FIGMA_PASSWORD with the password you use to log into Figma
  3. Replace YOUR_FIGMA_ACCESS_TOKEN with your Figma access token
  4. Replace YOUR_ABSOLUTE_DOWNLOAD_PATH with the absolute path to where you want your downloaded files to be saved to
  5. Your .env file should now look something like this:
FIGMA_EMAIL="[email protected]"
FIGMA_PASSWORD="hunter2"
FIGMA_ACCESS_TOKEN="figd_abcdefghijklmnopqrstuvwxyz"
DOWNLOAD_PATH="/Users/anonymous/Downloads"
WAIT_TIMEOUT=10000
  1. Save your .env file

Determine the Figma files to download

figma-export supports gathering Figma files by team(s) or by project(s).

Note

If you are looking to download your drafts, please refer to this wiki page.

By team

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.

  1. Open Terminal.app
  2. Run the following command to generate a files.json file of the Figma files to download (replace YOUR_TEAM_ID with your team's ID):
npm run get-team-files YOUR_TEAM_ID

Tip

If you would like to download from multiple teams, you can use a space separated list of team IDs (e.g., npm run get-team-files 1234 5678 9012).

By project

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:

  1. Open Terminal.app
  2. Run the following command to generate a files.json file of the Figma files to download (replace YOUR_PROJECTID with your project's ID):
npm run get-project-files YOUR_PROJECT_ID

Tip

If you would like to download from multiple projects, you can use a space separated list of project IDs (e.g., npm run get-project-files 1234 5678 9012).

Start downloads

  1. Open Terminal.app
  2. Run the following command to start downloading the Figma files listed in files.json:
npm run start

Important

Downloads may take a while depending on how large your files are, how many files are being downloaded, and your internet connection speed.

The status of the downloads will be shown in Terminal.app. Your Figma files will be download to the folder path that you specified in the .env file.

If you run into an issue, please refer to the known issues before opening a GitHub issue.

Clone this wiki locally