This is a (working) example of how to use the Figma API to pull assets like SVG images, directly into your codebase. Through several requests to the Figma API, we parse the Figma document to drill down to the - in our case - Icon components that we want to export as SVG elements. We then download each SVG from the Figma AWS instance.
Consider the following structure in Figma:
As you can see, we group our icons onto a single page
. We then have different frames
for our different Icon sets as we want to clearly distinguish them. Finally, each frame contains a lot of icons, each of which is defined as a component
in Figma.
We are using multiple fetches to the API to grab what we need. A good thing to keep in mind here is that everything in Figma has a node_id
which can be used to query their API services, so regardless of a component
/frame
/page
, they will all have a unique ID. An overview:
- So first things first, we fetch the entire document from the Files API. We then loop over its direct children which are the pages as defined in Figma. For our needs, we just need the
Iconography
page so we match this name to grab thenode_id
of that page. - With that
node_id
we now grab just thepage
and it'sframes
from the Files API. The direct children are now the frames that are defined within thispage
. Because we have frames with guidelines and such, we match the frame name to beweb-*
so we can grab the frames of our icon sets (web-32
in the example). - For each
frame
, we again query the Files API with the respectivenode_id
. We now get access to acomponents
key in the returned object. This contains an array with all thecomponents
defined in thisframe
. We concatenate these in one long string (id1,id2,id3,etc
) . - With the concatenated string we query the Images API, this gives us an object with for each supplied
node_id
, a URL which refers to an AWS instance of Figma, containing the SVG of that icon. - We fetch each icon and save it locally in
./icons/<frame_name>/<component_name>.svg
A small overview:
(While writing this, I realise the data requested with the 2nd step and API call; should be available during the first call so this might be refactored)
To tinker around with the script, pull the repo and install with your preferred package manager. Then simply run the script by calling fetch
. We do rely on chalk
for logging and axios
for querying but besides that, no further dependencies.
Do make sure that you create a local .env
file containing a API_KEY
for your Figma account as well as a ID
of your Figma document. (Click share in Figma to get an URL with your document ID). In ./src/constants.js
you can fiddle around with the settings of the page name and the regex that is used to identify the required frame. Of course, you can also alter the code directly if you have your Figma set up differently.
yarn install
yarn fetch