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 = require('figma-exportor').default;
const client = new FigmaExporter("<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.collectNodes(filter)
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.getNodeImageUrls('png')
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.writeImages('./data');
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 = require('figma-exportor').default
const client = new FigmaExporter("<your_figma_token>", "<file_id>");
const filter = {
name: [
'Splashscreen',
'Contact'
]
}
const nodes = await client.collectNodes(filter);
const nodesWithImages = await client.getNodeImageUrls('svg');
const nodesWithImages = await client.getNodeImageUrls('pdf');
const result = await client.writeImages();