figma-tools v0.5.0

Install

yarn add figma-tools --dev

npm install figma-tools --dev

Exports

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.

FIGMA_TOKEN=personal-token-here

You must also import and initiate the dotenv package in order to load the .env file:

const dotenv = require('dotenv')
const { fetchImages } = require('figma-tools')

dotenv.config()

fetchImages({
  fileId: 'E6didZF0rpPf8piANHABDZ',
  format: 'jpg',
}).then((images) => {
  ...
})

fetchImages: (ImageOptions) => Promise<Array<Image>>

Fetch components in a file and export them as images.

fetchStyles: (fileId) => DocumentStyles

Fetch library styles used in a file.

watchFile (Coming Soon)

Watch a file for changes.

diffFile (Coming Soon)

Determine the differences between two files.

Types

ImageOptions

fileId

filter

image params

Image

name

description

buffer

pageName

frameName

groupName

Usage

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.

Recipes

JPG, PNG, SVG, or PDF

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)
  })
})

React Components

const fs = require('fs')
const path = require('path')
const svgtojsx = require('svg-to-jsx')
const { pascalCase } = require('case-anything')
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)
})

JSON

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))
})