Sync your icons with Figma API

Problem

Adding or editing assets often requires two people to make the change: designer and developer. They have to sync after every update, which is often quick but interrupts other work.

Solution

Figma API makes it possible to extract almost any data from design files into your project.

One obvious integration many projects can benefit from is syncing your svg files with Figma. I will use figma-api-exporter, it is still an early version, but it was already tested in production. Feel free to contribute.

Requirements

• Figma Access Token - follow the instruction
• Figma File with icons changed to components
• figma-api-exporter installed in your project

Downloading icons as svgs

const figmaApiExporter = require('figma-api-exporter').default;

const exporter = figmaApiExporter(YOUR_ACCESS_TOKEN);

exporter
  .getSvgs({
    fileId: FIGMA_FILE_ID,
    canvas: 'Icons',
  })
  .then(async svgsData => {
    await exporter.downloadSvgs({
      saveDirectory: './figmaIcons',
      svgsData: svgsData.svgs,
      lastModified: svgsData.lastModified,
      clearDirectory: true,
    });
  });

Save it as YOUR_NAME.js file and run with node YOUR_NAME.js. You should see files appearing in figmaIcons directory.

Displaying all available icons (ex. in Storybook)

By default there is no easy way to import all files from directory. However, you can use create-index to generate index.js file with files exported as modules after every sync.

const { writeIndex } = require('create-index');
const path = require('path');

...

  await exporter.downloadSvgs(...)
  writeIndex([path.join(__dirname, './figmaIcons')], {
    update: true,
    extensions: ['svg'],
  });   

index.js will look like this:

export { default as Icon1 } from './Icon1.svg';
export { default as Icon2 } from './Icon2.svg';
export { default as Icon3 } from './Icon3.svg';

Then in Storybook you can import all svg files and iterate over them:

import * as allSvgIcons from './figmaIcons';

Making it work in production

Option 1: Plug it into CI

Make your script run on every deployment. Every deployment will update the icons to the latest version. The downside is an increased build time.

Option 2: Sync and push

If you are concerned about your deployment time you can run script locally and push new/updated files to repository. It is a less preferred option, as its removes most of the automation. You have to still perform some action after designer updated the icons.

---

I'm regularly publishing my insights on web development.
Consider subscribing to my newsletter.
Visit my blog at slawkolodziej.com to find out more interesting content.
Follow me on Twitter.