Figma Import

Import any frame from Figma as an image. Uses the Figma API, so you can import private files too.

Instructions

This component has two required options, the file URL and the Figma API access token.

Finding the file URL

This component is able to render a single frame selection in Figma as an image, given a link to that selection. Here’s how to find the proper URL:

On Figma desktop:

Click “Share” in the top right corner, then copy the file link with “Link to selected frame” checked.

On Figma web:

Make a frame selection. Info about the current selection should update automatically in the address bar.

Make sure that node-id appears in the URL, somewhere near the end. To be more exact, it should be part of the query string.

Finding the Access Token

The easiest way to obtain an API key is through Figma’s developer documentation. Keep this token in a safe place!

---

All Options

Figma URL: a URL to a Figma file, query param node-id=<STRING>. You can get this by clicking “Share” in the top right corner, then copying the file link with “Link to selected frame” checked.

Access Token: your Figma access token. If you don’t have one you can go to Figma’s developer documentation to generate an access token.

Scale: A number between 1 and 4, the image scaling factor. Defaults to 2x.

Format: The image file format—either .PNG, .SVG, or .JPG. Defaults to .PNG.

Force Reload: Disables caching of Figma API requests. Set this to False if you don’t know what this means.

Questions?

Contact me on Twitter: @lilytried