Figma plugin project setup using Figsvelte boilerplate

Introduction

I always find working with Javascript framework on a Figma plugin project to be at a certain point an over-engineering choice that brings more maintenance cost without a real added value, at least from my point of view, at the same time it also brings a lot of ready to use features that make using it in a project appealing but still the tradeoffs were against it, yes I used the past because I think differently now, after discovering Svelte the tradeoffs turned in favor of using Javascript framework without sacrificing simplicity.

Install Figsvel

Start by installing Figsvel boilerplate as so:

npx degit thomas-lowry/figsvelte figma-plugin
cd figma-plugin
npm install

Update dependencies

Even though you can work on your Figma plugin without updating dependencies I prefer to update it, so if you're the same this is how it's done.

1- Installing npm-check-updates with npm i -g npm-check-updates

2- Inside your project folder run ncu --upgrade

3- Before updating our node_modules with the new dependencies let's do one more thing, replace rollup-plugin-typescript with @rollup/plugin-typescript.

4- Just to make sure no strange error emerge remove node_modules directory and run npm install

Done

Update manifest.json

Lastly update public/manifest.json that the current version in Figsvelte repo lack a config update needed by Figma to run correctly the plugin which is: "editorType": ["figma"]

You can learn more about it in the Figma plugin doc.

Conclusion

Congratulation, you're good to go for your next Figma plugin with Svelte framework without sacrificing the simplicity of JavaScript nor the advanced features a Framework can bring.