Figma Exporter
NodeJS library that helps with exporting Figma project.
Install
npm i figma-exporter
Usage
-
Before you get started, generate a Figma access token. This will be used to authenticate with the Figma API and get access to the files you want to export.
-
You will also need your file id so the module knows which to run the export on.
const FigmaExporter = default;const client = "<your_figma_token>" "<file_id>";
- Then, declare the list of Figma nodes in your project you want to export. The module accepts both node names and node ids and can handle
PAGE
,CANVAS
, andFRAME
types. The example below will collect information about 6 Figma nodes:
const filter = name: 'Onboarding' 'Footer' id: '1:24' '31:25' '1:100' '1:47' ; let nodes = await client
This outputs the following format:
id: '1:419' name: 'Onboarding' images: id: '31:7299' name: 'Footer' images: id: '1:24' name: 'Header' images: ...
- Then, you can request the image urls in a format of your liking. Supported formats are
jpg
,png
,svg
pdf
;
let images = await client
This outputs the following format:
id: '1:419' name: 'Onboarding' images: imageUrl: '<url>' imageFormat: 'png' id: '31:7299' name: 'Footer' images: imageUrl: '<url>' imageFormat: 'png' ...
- Finally, write the images and metadata (
data.json
) to a folder. The default folder for this is./figma-export
.
let result = await client;
This outputs the following format, which corresponds to the data that is written to data.json
:
id: '1:419' name: 'Onboarding' images: imageUrl: '<url>' imageFormat: 'png' fileName: 'Onboarding.png' id: '31:7299' name: 'Footer' images: imageUrl: '<url>' imageFormat: 'png' fileName: 'Footer.png' ...
Full example that export Splashscreen
and Contact
to both svg and pdf:
const FigmaExporter = defaultconst client = "<your_figma_token>" "<file_id>";const filter = name: 'Splashscreen' 'Contact' const nodes = await client;const nodesWithImages = await client;const nodesWithImages = await client;const result = await client;