Figma plugin with JSZIP

Plugin and Widget API Questions
1

Hi
Could I ask how can I use JSZIP library along with figma in a plugin?
When I add both in single typescript project I am getting conflict errors.

Cannot redeclare block-scoped variable ‘console’

2

What are your build settings for the bundler you are using? Also if you are trying to use it on the plugin backend, it’s a limited environment so it might not work, so try using it in the plugin UI and then pass the data to the backend.

3

I did as below.

  1. Created a figma file in figma desktop
    image

  2. Created a figma plugin with UI

  3. Opened the created plugin folder in Visual studio code

  4. In terminal, npm install --save-dev @figma/plugin-typings

image
it created this additional packages

  1. Did run build task then tsc watch

  2. Ran plugin in figma file and created orange rectangles!

  3. I downloaded JSZIP npm i jszip

  4. updated tsconfig.json
    {
    “compilerOptions”: {
    “target”: “es6”,
    “lib”: [“es6”,“dom”],
    “noImplicitAny”: false,
    “strict”: true,
    “typeRoots”: [
    “./node_modules/@types”,
    “./node_modules/@figma”
    ]
    }
    }

Then error starts

image
image1299×595 58 KB

it is coming after the lib dom is added

4

Ah I see. Make sure you are using the latest version of typings, try uninstalling them and installing again. This is not related to jszip library. See this issue. But also in order to use the library you’ll need to switch over to using bundlers such as Webpack, Esbuild, or other.

5

Thank you, it seems with the help of you that error gone. I am closer to my solution. It’s running but during run, I get another error.

Syntax error on line 7: Unexpected token

export interface ExportableBytes {
name: string;
setting: ExportSettingsImage | ExportSettingsPDF | ExportSettingsSVG;
bytes: Uint8Array;
}
image

Will search community forum

6

You don’t need to reinstall typescript, only the plugins API typings (npm install --save-dev @figma/plugin-typings)

1 Like