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…