Bundling Figma Plugin With Esbuild

Build a plugin for Figma with esbuild, the extremely fast JavaScript bundler.

Photo by Uillian Vargas on Unsplash

I recently published a new open source plugin to export Figma frames to DeckDeckGo slides.

As I like to benefit from my experiences to learn and try new concept, instead of using a bundler as described in the Figma documentation, I decided to give a try to esbuild.

The least I can say, I loved it ❤️.

Foreword

Following solution is the one I set up for my plugin. It does work like a charm but, notably because it was the first time I used esbuild, it might need some improvements. If you notice improvements or issues, let me know, I would like to hear from you!

Contributions to my plugin and PR are also welcomed 😉.

Setup

In a Figma plugin, install both esbuild and rimraf .

npm i esbuild rimraf --save-dev

rimraf might not be needed, if you only build your project in a CI, nevertheless, for a local build, I think it is safer to delete the output directory before any new build.

In package.json add, or modify, the build script.

"scripts": {
  "build": "rimraf dist && node ./esbuild.js"
}

You might notice that the last command target a script called esbuild.js . This file will contain our bundling steps, therefore create such a new file at the root of your project.

touch esbuild.js

Finally, in this newly created file, import esbuild .

const esbuild = require('esbuild');

Sandbox

A Figma plugin run (see documentation) in a combination of a sandbox, to access to the Figma nodes, and an iFrame, for the presentation layer. We set up firstly the sandbox’s build.

// sandbox

esbuild
  .build({
    entryPoints: ['src/plugin.ts'],
    bundle: true,
    platform: 'node',
    target: ['node10.4'],
    outfile: 'dist/plugin.js'
  })
  .catch(() => process.exit(1));

In the above script, we bundle the plugin.ts , the sandbox’s code, to its JavaScript counterpart…