Skip to content

figma-tools/figma-tools

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Figma Tools

Tools to help you programmatically interact with your Figma files.

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: string) => DocumentStyles

Fetch library styles used in a file.

watchFile (fileId: string, callback: (file: FileResponse, previousFile: FileResponse) => void, delay: number = 5000)

Watch a file for changes.

diffFiles (fileA: FileResponse, fileB: FileResponse)

Determine the differences between two files. Uses a simple wrapper around jest-diff.

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

About

Tools to help you programmatically interact with your Figma files.

Resources

License

Stars

Watchers

Forks

Packages

No packages published