Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svanboxel/figma-exporter
NodeJS library that helps with exporting images from your Figma project.
https://github.com/svanboxel/figma-exporter
exporter figma
Last synced: about 2 months ago
JSON representation
NodeJS library that helps with exporting images from your Figma project.
- Host: GitHub
- URL: https://github.com/svanboxel/figma-exporter
- Owner: SvanBoxel
- Created: 2020-05-31T20:31:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T20:06:58.000Z (over 1 year ago)
- Last Synced: 2024-10-30T15:54:45.866Z (3 months ago)
- Topics: exporter, figma
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/figma-exporter
- Size: 24.4 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figma Exporter
[](https://www.npmjs.com/package/figma-exporter "View this project on npm")
> NodeJS library that helps with exporting Figma project.
## Install
```bash
npm i figma-exporter
```
## Usage
1. Before you get started, [generate a Figma access token](https://www.figma.com/developers/api#access-tokens). This will be used to authenticate with the Figma API and get access to the files you want to export.
2. You will also need your file id so the module knows which to run the export on.
```js
const FigmaExporter = require('figma-exportor').default;
const client = new FigmaExporter("", "");
```
3. Then, declare the list of [Figma nodes](https://www.figma.com/plugin-docs/api/nodes/) in your project you want to export. The module accepts both node names and node ids and can handle `PAGE`, `CANVAS`, and `FRAME` types. The example below will collect information about 6 Figma nodes:
```js
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:
```js
[
{ id: '1:419', name: 'Onboarding', images: [] },
{ id: '31:7299', name: 'Footer', images: [] },
{ id: '1:24', name: 'Header', images: [] },
...
]
```
4. Then, you can request the image urls in a format of your liking. Supported formats are `jpg`, `png`, `svg` `pdf`;
```js
let images = await client.getNodeImageUrls('png')
```
This outputs the following format:
```js
[
{
id: '1:419',
name: 'Onboarding',
images: [{
imageUrl: '',
imageFormat: 'png'
}]
},
{
id: '31:7299',
name: 'Footer',
images: [{
imageUrl: '',
imageFormat: 'png'
}]
},
...
]
```
5. Finally, write the images and metadata (`data.json`) to a folder. The default folder for this is `./figma-export`.
```js
let result = await client.writeImages('./data');
```
This outputs the following format, which corresponds to the data that is written to `data.json`:
```js
[
{
id: '1:419',
name: 'Onboarding',
images: [{
imageUrl: '',
imageFormat: 'png',
fileName: 'Onboarding.png'
}]
},
{
id: '31:7299',
name: 'Footer',
images: [{
imageUrl: '',
imageFormat: 'png',
fileName: 'Footer.png'
}]
},
...
```
Full example that export `Splashscreen` and `Contact` to both svg and pdf:
```js
const FigmaExporter = require('figma-exportor').default
const client = new FigmaExporter("", "");
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();
```
## Development
## License