Figma JSON to PNG/JPG/JPEG/etc (aka exporting Figma JSON)?

[nicolasespinoza]

Hello! Thanks for this tool. As part of a project, I am trying to automate generating millions of images based off of a Figma file. So far, using this tool, we are able to generate the appropriate Figma JSON, and modify it as we intend. However, we also need to export this resulting JSON to an image to push to production. Do you happen to have a tool for Figma JSON to PNG/JPG/JPEG/etc? Any guidance or help would be greatly appreciated, thansk!

[yagudaev]

Hi Nicolas,

That's a great question. I've thought about it a lot and was trying to do something similar at one point.

I even tweeted about this: https://twitter.com/yagudaev/status/1572071404551520258?s=20&t=NHXmTClnGXD-VOgO5wvDoQ

The gist is you want to go from Figma JSON => SVG and change the text in SVG and then render the SVG to PNG/JPEG/WebP/etc. You can cache the SVG export from Figma and is a node.exportAsync plugin API as well as a GET v1/images/:key from the restful API: https://www.figma.com/developers/api#get-images-endpoint.

You'd want to keep the SVG renderer really fast and experiment with different libraries and hardware configurations (e.g. GPU accelerated Canvas/WebGL renderers).

You'd also want svg_include_id on so you can target the node with CSS selectors or XPath.

Hope it help, please report back on the progress here. If you can open sources the process and share with the community it will be much appreciated

[nicolasespinoza]

Michael, thank you for the pointers!

The gist is you want to go from Figma JSON => SVG

I have the Figma JSON of my document. How can I convert that to an SVG? \ \ Separately, but related, I've done some exploration. Using the GET call you mentioned, I was able to get the SVG image (png version of the image, SVG contents here) of my document. However, even with the parameters you specified, I do not see a way to modify the 3 text fields (%item_name%, %item_uuid%, %item_type%, etc.) of my SVG image. If useful, here's the Figma JSON of my document.

Is there something I'm missing?

[yagudaev]

Figma lets you export to SVG from their RESTFul API. It should be exactly the same as exporting from their plugin API.

You will need to write a bit of code to target specific layers by IDs using a CSS Selector or XPath and then change them based on your data-source.

This is exactly what the POC did in my tweet for a project I was working on.

[nicolasespinoza]

Got it, thanks again Michael!!