referenceError: "blob" and "Buffer" is not defined

Hi folks. I’m trying to export frame to PNG and convert it to another format.

Library I use: webp-converter-browser

I use webpack to bundle all things. looks good.

But when I use the plugin on Figma environment, I always get the error:

referenceError: “blob” is not defined.

then I change from using blob to Buffer, I got:

referenceError: “Buffer” is not defined.

Sometimes it says “Unhandled promises” as well.

Please help me on this.

My steps:

  • export current frame to PNG using exportAsync ( → Uint8Array)
  • convert the pngBytes to pngBlob
  • convert pngBlob to webpBlob
  • Download webpBlob

(I was trying using pngBuffer but still got similar problem)

I am having the same problem. Did you manage to find a solution?

Figma sandbox is quite limited in what APIs it provides. You need to send the necessary data to the UI part of the plugin (iframe) which has access to pretty much all browser APIs and process the data there. Then you can send the result back to the Figma plugin backend code to be able to do actions based on this data on the Figma canvas if necessary.

Relevant documentation: Creating a User Interface | Plugin API

Thank you. I was indeed trying to use new Blob in the code.ts file