Command line tool for batch output of Figma projects, frames and nodes

Sometimes you want to export a batch of files created in Figma as a PDF, png or other format. For example, you may want to search for a memo you wrote on a sticky somewhere among several FigJams. This kind of search does not work because FigJam’s search does not look at the contents of the file, although it can search for file names and people.

At least you can know which file you wrote it in, so if you export all your project files as PDFs, you can manage the rest. Using the OS’s full-text search of files or cloud storage searches such as Dropbox is a solution. Automation is essential to establish this kind of workflow, as Figma fortunately uses an API to handle these export processes, I have integrated the functionality into my own open source tool watermint toolbox.

This tool is a command-line tool, so it may seem difficult for those unfamiliar with it, but once you automate it, you can’t go back, so it’s not too much of a loss to learn it.

Commands for Figma

The watermint toolbox provides commands for several supported services, such as Dropbox and Github, to perform the process. Commands for Figma include.

Usage

Figma has the following structure from an API perspective.

Team -> Project -> File -> Page -> Frame -> Node

Each is managed by an ID number, and to export a file or page, you first need to know the starting team ID. The team ID can be found in the URL of the link to the team, which is the number following the team/ in the address when you select a team in Figma and copy the link.

Download the latest version of the watermint toolbox. Extract the downloaded zip file and you will find an executable file called tbx or tbx.exe, which should be placed in an easily accessible location, such as a desktop folder.

Open PowerShell for Windows or Terminal.app for macOS. Once opened, cd Desktop to the desktop (or the folder with the tbx executable) and execute the command as follows.

./tbx services figma project list -team-id xxxxxxxxxxxxxxxxxxxxx

(replace xxxxxxxxxxxxxxxxxxxxxxxxxxxx with the team ID you have just obtained from the team address).

The first time you run the application, you will be asked to authorise it as follows, so press Enter to launch the browser.

If you are happy, authorise the application. Then, when “Success” is displayed on the screen, authentication is complete.

% watermint toolbox 122.8.52
==========================

© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.

Testing network connection...
Done

Opening the authorization URL:
https://www.figma.com/oauth?client_id=XXXXXXXXXXXXXXX&redirect_uri=http%3A%2F%2Flocalhost%3A7800%2Fconnect%2Fauth&response_type=code&scope=file_read&state=XXXXXXXX

Please press ENTER to open the auth page on the browser.

When execution is completed, a list of projects and their IDs will be displayed as follows. If there are a large number of projects, some will be omitted, so please refer to the CSV or xlsx file in the path displayed at the end of the run.

% ./tbx services figma project list -team-id xxxxxxxxxxxxxxxxxxxxx

watermint toolbox 122.8.52
==========================

© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.

Testing network connection...
Done


| id       | name          |
|----------|---------------|
| xxxxxxxx | Design System |
| xxxxxxxx | Workspace     |
| xxxxxxxx | toolbox       |

Similarly, if you want to get a list of the project’s files, run the following command.

% ./tbx services figma file list -project-id xxxxxxxx

watermint toolbox 122.8.52
==========================

© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.

Testing network connection...
Done


| key                    | name         | thumbnailUrl | lastModified |
|------------------------|--------------|--------------|--------------|
| xxxxxxxxxxxxxxxxxxxxxx | essentials   |              |              |
| xxxxxxxxxxxxxxxxxxxxxx | web          |              |              |

If you have the required file, get the key of this file and run the following command. This will export the file as a PDF in the folder where you run it. You can also choose to output png, svg or jpg with the -format option.

% tbx services figma file export page -key xxxxxxxxxxxxxxxxxxxxxx -path ./

watermint toolbox 122.8.52
==========================

© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.

Testing network connection...
Done

1 page(s) found in the Figma file
               page 00:02 [==========================================================================]      1/    1 DONE
The command finished: 7.302s

This command is per file, but there are also commands to output nodes and to export all files under the team, so you can use them as needed.