Figma x CRA Plugin Template

This is a simple Figma plugin template & example.

There are two parts to a Figma plugin: the Figma sandbox (plugin) and the plugin UI (ui). The sandbox is used to interact with Figma files via the Figma API. The plugin iframe is used to display the UI, make network requests, and access browser APIs. The sandbox and iframe communicate via window.postMessage(). Learn more about How Plugins Run.

Most templates & guides I've seen bundle the UI JavaScript locally (alongside the plugin JavaScript) and load this via the __html__ Global Object. However, it's also possible (and sometimes preferable) to load the UI JavaScript from a server rather than locally. This also means the UI & plugin can be completely decoupled.

UI

The ui folder (the 'plugin iframe' referenced above) is a React app representing the user interface of the plugin. It's just a vanilla create-react-app project (created using yarn & typescript: yarn create react-app my-app --template typescript). It can be run in the usual way; cd into the ui folder and yarn start. The boilerplate README.md generated by CRA is also available in that folder, for more information about the React app.

Plugin

The plugin folder contains just two files: code.ts and tsconfig.json. This is the Figma sandbox. The tsconfig borrows the Figma type definitions from the React app. To build & watch the plugin: tsc -p ./plugin --outDir ./dist --watch. This output directory referenced here is as defined in manifest.json. Read more about the Plugin Manifest. Typescript must be installed globally to run tsc from the command line.

DIY

This is all fairly trivial to set up from scratch, and you don't really need to clone this repo. Just:

1. Create a new folder for your plugin, e.g. my-figma-plugin, and create a manifest.json inside that (see the corresponding file in this repo for an example)
2. cd into that folder and run: yarn create react-app ui --template typescript
3. Create a plugin folder with code.ts and tsconfig.json (see the corresponding folder in this repo for examples of those files)
4. Start the UI: yarn start from ui
5. Build & watch the plugin: tsc -p ./plugin --outDir ./dist --watch
6. Import manifest.json in Figma and run the plugin

Publish

To publish to production:

1. Deploy the React app, e.g. to Netlify
2. Update window.location.href in code.ts to refer to the production URL of the React app
3. Rebuild the plugin: tsc -p ./plugin --outDir ./dist
4. Publish in Figma