React Figma Plugin Boilerplate

Boilerplate for easily getting started building custom Figma plugins with React using react-figma.

Development

Run Development Server:

pnpm install
pnpm dev

Open and run the plugin in a local Figma environment:

Setup Guide

In development, a separate server is run outside of the Figma plugin which allows utilizing Fast Refresh for preserving editing React state when editing components. Visit the development server to see the plugin in action:

http://localhost:9000//ui.html

Please note, there's a bug right now in the web socket server where it will get stuck and not end the process correctly. This is a quick guide to kill the running port if that happens.

Acknowledgements

Thank you to the following resources for providing inspiration for this library:

react-figma boilerplate

How to build Figma plugins 10x faster