Tools to help you programmatically interact with your Figma files.
yarn add figma-tools --dev
npm install figma-tools --dev
Please note: you must include a
personal access token in
a .env
at the root of your project or as an environment variable in order for the following functions to work.
fetchImages: (ImageOptions) => Promise<Array<Image>>
Fetch components in a file and export them as images.
Watch a file for changes.
Determine the differences between two files.
Once your token has been set you can use any of the provided functions in a Node script. In a simple example, we will create an icons.js
file:
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'jpg',
}).then(images => {
console.log(images)
})
Now we can call our function and fetch images from our Figma file 💰:
node icons.js
It's that easy! This script can hook into a build script or be used in conjunction with the watchFile
function whenever you need to refresh your assets.
const fs = require('fs')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'jpg',
}).then(images => {
images.forEach(image => {
fs.writeFileSync(path.resolve(`${image.name}.jpg`), image.buffer)
})
})
const fs = require('fs')
const path = require('path')
const svgtojsx = require('svg-to-jsx')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'svg',
}).then(async svgs => {
const jsx = await Promise.all(svgs.map(svg => svgtojsx(svg.buffer)))
const data = svgs
.map((svg, index) => {
return `export const ${pascalcase(svg.name)} = () => ${jsx[index]}`
})
.join('\n')
fs.writeFileSync(path.resolve('icons.js'), data)
})
const fs = require('fs')
const path = require('path')
const { parse } = require('svgson')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'svg',
}).then(async svgs => {
const json = await Promise.all(svgs.map(svg => parse(svg.buffer.toString())))
const data = svgs.reduce(
(data, svg, index) => ({
...data,
[svg.name]: json[index],
}),
{}
)
fs.writeFileSync(path.resolve('icons.json'), JSON.stringify(data, null, 2))
})