Skip to main content

Hi,


is there a proper or good way to save exported content on the computer? I have seen there is the exportAsync function, but that only packages the content into a variable without starting a download.

I found one method in the export zip plugin, but it feels unnecessarily complex and a bit hacky as well by starting a download via a html element. Also, the createObjectURL() seem to make trouble, when I tried it on a quick run.

That’s the method used by the export zip plugin:


   zip.generateAsync({ type: 'blob' })
.then((content: Blob) => {
const blobURL = window.URL.createObjectURL(content);
const link = document.createElement('a');
link.className = 'button button--primary';
link.href = blobURL;
link.download = "export.zip"
link.click()
link.setAttribute('download', name + '.zip');
resolve();
});

Thank you all for helping. 🙂

This is a fairly standard way to download files using JavaScript. And as a more advanced method, you can use the FileSaver.js library.

GitHub

Thanks for your answer. Seems to be a good way then.

I think I was hoping for a helper function from the Figma API to access local files as we had it with Sketch’s skpm/fs. Too bad. 😃


Hm I saw the link method online and thought there might be a more direct API within Figma. So then in the context of my script that is running with figma API vs the script from within my html/iframe… this package should be run from the iframe, right? Because the script that runs with the figma API doesn’t really have normal things like navigator and such, which the FileSaver.js errors on.


When I try using URL.createObjectURL(content), it gives back a weird value containing null such as blob:null/e0dfbbc2-7cb6-4cd5-9505-98c63fe812e6. When it triggers save, it comes back as bad jpeg. If I open it with binary editor it appears nested… ie:


{"buffer":{"type":"Buffer","data":d255,216,255


etc


The blob:null was apparently expected as it’s the origin that doesn’t exist in this context. It was a red herring as I was sending back data improperly before getting to this point. I ended up having my Figma script do figma.ui.postMessage({ image, type: "send-image" }); and then on the other side I handled it as Phil suggested.


Thanks all!


@Dave_Stein1 Great to hear that it works for you.

I extended the above code snippet by cleaning up the temporary process with


// clean up the blobURL and link element
window.URL.revokeObjectURL(blobURL);
link.remove();

Reply