Figma plugin TypeScript boilerplate to start developing right away
MIT License
Figma plugin TypeScript boilerplate to start developing right away.
Get the boilerplate choosing one of these methods:
mkdir my-plugin
cd my-plugin
npx degit https://github.com/aarongarciah/figma-plugin-typescript-boilerplate
Install dependencies
npm install
Develop 😄
npm run dev
You'll need Node and npm installed to use this boilerplate. It has been tested in Node 12, 14, and 16.
To develop a Figma plugin you need to install the Figma desktop app. Learn more in the Figma Plugin docs.
npm run dev
starts the watcher for changes. Modify the files under the src
folder and the code will be compiled automatically. Then, go to the Figma app and run your development plugin.npm run build
generates the production build in the dist
folder. Important: run this command before releaseing a new version of your plugin. Before generating the build, it checks TypeScript, JavaScript and CSS files for linting errors.npm run test
runs tests via Jest. This script runs before build
.npm run test:watch
runs tests via Jest in watch mode.npm run lint
lint TypeScript and JavaScript files with ESLint and CSS with Stylelint.npm run lint:fix
lint and apply automatic fixes to TypeScript, JavaScript and CSS files. This script runs before build
.It's highly recommended to take a look at the Figma plugin development docs before developing a plugin.
A plugin has two parts: a mandatory worker file (a JavaScript file which has access to the Figma document) and an optional UI (an HTML file).
__tests__
folder or ending with .spec.*
or .test.*
will be picked up by Jest.build
and test
commands.Take a look if someone already opened a similar issue or open a new one.
npx
.MIT
Made with ♥️ by Aarón García Hervás