Skip to main content

Hi I have a selected Figma node item’s as an array of image byte arrays in the ui. It is an html file. I have installed JSZIP via npm install jszip.

But when I try to refer jszip, it gives error.

I tried as below



Blockquote



<html>

<head>

  <title>Zip Images</title>

<script src="node_modules/jszip/dist/jszip.min.js"></script>

</head>

<body>

<script>

  function ui_f5_zipIt()

      {

        console.log(array_image_bytes)

        const zip = new JSZip(); ///THROW ERROR HERE



      }

</script>



Error is 

VM489:83 Uncaught ReferenceError: JSZip is not defined

    at ui_f5_zipIt (<anonymous>:83:21)

    at window.onmessage (<anonymous>:21:13)





Please note I am working in figma desktop

You can’t directly use NPM modules in browser applications. This is true for any browser webapp, not just Figma plugins. You’ll need to use a bundler that combines NPM module source code with your code. See our guide to bundling here:


figma.com

I am already using Webpack

@tank666 ??

I am easily getting all the selections in Figma into converted image bytearray. I am using webpack based project. But when I try to initialze the jszip object, it gives compile error.


If it is not possible, can I send this Bytearray to a HTTP request? So that if another program is running in c# or java can access it locally? Basically I wish to save this image arrays to png images. Even if I am running Figma desktop, I think I am running the plugin in Figma server… Correct?

@Gleb could you please give a suggestion?

I am also trying to set jszip to a Figma plugin but unsuccessfully. I’m am running out of ideas on how to solve this and currently stuck.


I managed to select all images in the project and set the download (although only one is downloaded) — which is why I believe I need the jszip.


I suspect the problem might be in the tsconfig.json file.

It sounds like you’re trying to include JSZip inside the UI side of the plugin. You’ll want to make sure that you’re using HtmlWebpackPlugin to ensure that the NPM modules are being correctly bundled for the UI. Using a script tag that references node_modules won’t work.


Here’s an example of a Figma plugin that uses webpack and imports NPM dependencies (in this case, React) into the plugin UI code:


github.com

So are you suggesting if I use ui.tsx and try jszip inside that, it may work?

Hi @Nidhin_Kuttikkattu_Rajeevan, did you find a solution for this? I am facing same problem

Reply


Terms & ConditionsCookie settings