How to Download SVG Icons with Figma API using JavaScript

thumbnail for How to Download SVG Icons with Figma API using JavaScript

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 and added to a page
  • 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,
    });
  });

Change canvas: 'Icons' to your page name in Figma.

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.

You might also like

thumbnail for Tailwind CSS: The future of styling or just another CSS framework?
January 15, 2021
Tailwind CSS: The future of styling or just another CSS framework?
Tailwind CSS looked like the first framework I would enjoy using. I already saw how easily you can create beautiful UIs with it (thanks to Tailwind UI project).
thumbnail for My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer
December 28, 2020
My 2020 In Review: What I Learned and Accomplished as Senior Front-end Developer
With 2020 coming to an end (finally!) I decided to do a little summary of things I learned during this year.
thumbnail for Personal Story: My journey to find a perfect job as JavaScript Developer
November 16, 2020
Personal Story: My journey to find a perfect job as JavaScript Developer
I will tell you a story about my first 3 (almost 4) jobs as Front-end Developer. Only at the last one I felt like in the right place.

Hi friend,

Over the years working as a Front-end Developer in numerous projects I have gained a lot of experience. I've seen how choice of the right technology and architecture can affect the application and team behind it in a long run.

On this blog I want to share my experiance. I will show you solutions I discovered over the years. I want to teach you how to create better code and be successful developer.

Join the list of developers interested in web development

After signing up you will receive for free: Interview questions I ask as technical recruiter

newsletter