Ever wish it was as easy to build a Figma plugin as it is to build a website? Well no look no further! This template will allow you to develop your Figma plugin in your favourite browser while interacting with the Figma app. Use your favourite browser extensions such as React Developer Tools to help debug your issues faster, and take advantage of the built in hot-reloading to preview your changes instantaneously without having to constantly rebuild and relaunch your plugin.
-
yarn -
yarn preview:plugin -
In Figma load your plugin by right-clicking
Plugins > Development > New Plugin, and select the project'smanifest.jsonfile:
-
In another window run
yarn preview:browser -
To run the React app inside of Figma, run
yarn build:watch
Figma plugins interact with a Figma document by passing messages between the Figma app, and the plugin:
By adding a middleman between the two, we can decouple Figma and a plugin, so that we can build plugins outside of Figma, while still having access to the Figma sandbox. In this case, we run utilize a websocket server to forward messages between the Figma sandbox and the plugin being developed. Depending on the build commands run, the React app is built differently. Your React app is wrapped inside of a 'Preview App' component to render the plugin in a browser and to handle the message proxying logic to our websocket server. In Figma we run the 'Preview App' by itself to handle interacting message proxying and handling with the Figma sandbox.
- Ensure that only a single instance of the 'Preview App' is running in your browser and Figma. Multiple instances, can cause an infite feedback loop of messaages to occur.
- The indicator light on the 'Preview App' will turn red if the connection to the websocket server goes down. It will turn green once it reconnects
- If you wish to make changes to the 'preview-server.js' you will need to stop and rerun
yarn preview:browser