aarongarciah / figma-plugin-typescript-boilerplate

Figma plugin TypeScript boilerplate to start developing right away.

Quick start

1. 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.

2. Install dependencies

   npm install

3. 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.

Development

To develop a Figma plugin you need to install the Figma desktop app. Learn more in the Figma Plugin docs.

Available commands

Development

• 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.

Production build

• 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.

Test

• npm run test runs tests via Jest. This script runs before build.
• npm run test:watch runs tests via Jest in watch mode.

Lint

• 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.

What this boilerplate does for me?

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 and test commands.

Having problems?

Take a look if someone already opened a similar issue or open a new one.

Roadmap

• Add FAQ to README.
• Add bin executables to create templates via npx.

License

MIT

Made with ♥️ by Aarón García Hervás