Figma React Template

This is a starting template for building a Figma app using React.

Getting started

This project uses Yarn workspaces, so you will need to have Yarn installed before proceeding.

Install packages

yarn

Run dev environment

yarn dev

Assets will be placed in dist/dev.

Open in Figma

Follow instructions here to open your plugin in Figma. You do not need to create a new plugin from template. The manifest is located in dist/dev/manifest.json.

Your changes will be updated via the watch scripts, but you will need to manually update the plugin within Figma using Plugins > Run last plugin.

Publishing

To do a production build, run:

yarn build

Project structure

This is an Nx package-based monorepo.

• iframe - Code that can access the browser APIs
  • Built using vite
  • Note that vite dev doesn't output files, so we have to use vite build
• sandbox - Code that can access the Figma "scene"
  • Built using esbuild
  • Note that the sandbox js is incompatible with module and import syntax, so we can only load the script using IIFE
  • Parcel 2 and SWC have been considered, but do not support IIFE
• common - Common code to be shared between the iframe and sandbox

See here for more information on Figma plugin architecture.