Syncing icons in Figma

How we used Figma's REST API to supercharge our icon workflow

---

Overview

Transferring icons from Figma to code can be both laborious and time-consuming. If you manually export icons and pass them to your engineering team, you're likely spending unnecessary time and struggling to keep everything synchronized with the codebase.

Nick Saunders and I tackled this challenge and are excited to introduce Figma Icon Getter. This TypeScript library and CLI tool leverages Figma's REST API to fetch icons directly from a Figma file and automatically sync your repository with updates. This approach streamlines the process and ensures everything stays in sync.

Designer experience

The process for designers is easy. Simply group your icons into component sets in Figma and add the desired properties.

The script retrieves the names of the component sets and the values of the properties, starting from the top and concatenates them together. For example, our output would be:

heart-filled-16.svg
heart-outlined-16-svg
heart-filled-24.svg
heart-outlined-24.svg

Developer experience

You can use either the CLI or the library—whichever you prefer. The setup is straightforward. To get started, you'll need your Figma file ID and personal access token. Using the CLI you’ll see which icons have been synced or removed.

---

---

Considerations

We recommend setting up a webhook using Figma’s REST API to listen for the PUBLISH_LIBRARY event. Once triggered, you can use a GitHub Action to run your scripts. For icon transformation, consider using SVGR.

Get started

To get started check out the NPM package or visit the repo home page on GitHub. If you have any questions reach out to Josh on LinkedIn or file an issue in the issues tab.