Figma plugin TypeScript boilerplate to start developing right away.
-
Get the boilerplate choosing one of these methods:
- Fork this repo.
- Execute these commands in your terminal:
mkdir my-plugin cd my-plugin npx degit https://github.com/aarongarciah/figma-plugin-typescript-boilerplate
- Download the repo and extract it into your empty plugin folder.
-
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 thesrc
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 thedist
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 beforebuild
.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 beforebuild
.
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).
- Compiles TypeScript.
- Inlines JS and CSS code into the HTML for the UI. That's because the Figma plugin UI must be a unique HTML file and can't reference any other assets like CSS or JS with relative paths. You can load any external asset (e.g. a file hosted in a CDN) but not relative paths.
- Provides setup and config for: TypeScript, webpack, ESLint, Stylelint, Prettier, Jest, EditorConfig, etc.
- Lints and formats the code in a pre-commit hook.
- Provides boilerplate to send messages between the worker and the UI.
- Contains a helper to close the UI if you hit the ESC key outside of an input.
- Testing environment configured with Jest. Every test file under a
__tests__
folder or ending with.spec.*
or.test.*
will be picked up by Jest. - Contains a GitHub action to run the
build
andtest
commands.
Take a look if someone already opened a similar issue or open a new one.
- Add FAQ to README.
- Add bin executables to create templates via
npx
.
MIT
Made with