Mike Coomber

Front End Developer

Zeta Icon Library

Lead Frontend Developer

    Figma APIsFigma APIs
    Github ActionsGithub Actions
    ReactReact

"As part of Zebra's new Zeta Design system, I created a new workflow to make the icon library maintainable by designers and more accessible to developers by leveraging Figma's API and Github actions. I also created a web app in React to display the contents of the icon library and make it easily accessible for developers."

img

The Problem

Originally, Zebra's icon library was maintained by developers. This made it hard for the designers to keep track of what icons had gone in the library, and every time a new icon was created a developer had to add it to the source code of the site and redeploy it. On top of this, Zebra had component libraries in both Flutter and React, and each of those repositories was maintaining it's own icon library.

The Solution

Our designers already had an icon library in Figma. By treating this as a single source of truth for all of our component libraries and the website, we could ensure that any developer using our new Zeta components could have access to all the icons that the designers did. Additionally, it meant the icon library would be maintained solely by the design team and take the responsability off of developers.
img

Figma's APIs

To start with, I investigated Figma's REST API to see if this was even possible. Thankfully, there were two very useful endpoints I could leverage. The first was an endpoint which fetched an entire Figma file described as one large JSON object. The second accepted an ID of a Figma node and returned a download link to an image of that node.

Implementation

Once I knew the capabilities of the API, I set to work on writing a script which would be used in the GitHub action. The script would fetch the Figma document, identify all the nodes representing icons and download an svg for each icon and its variants (the icons have both rounded and sharp variants). I also created a manifest file to keep track of all the icons and their names, search terms and paths to their variants.

Find me

github logoGithubgithub logoLinkedIn
This site was made using NextJs and deployed with Vercel. You can view the source code here.