🧩 A figma plugin boilerplate, that simplifies building plugins with React + Vite!
CC-BY-SA-4.0 License
Logical Sides in Mind: Figma plugins that render a UI work on two different processes (split into code.js and index.html in Figma docs). This boilerplate keeps the sides separated by allowing them to share code (under ./src/common/).
Intercommunitive: Logical sides should be able to communicate with each other without creating huge and unscalable nested if statements. This boilerplate solves it by declaring isolated messages and handlers (under ./src/common/network/messages/
)! (Using the Monorepo Networker library)
Easy to Build: Configure the figma.manifest.ts
config with your plugin credentials once, then just build with your everyday npm run build
command! The /dist
folder will be ready to publish already!
Bundled into One File: Figma plugins only accept a single file for main
(js) and ui
(html), which makes deployment of multiple files linked to each other impossible. This boilerplate is configured to bundle/inline most of the things you need like rasterize/vector image asset imports, CSS URL statements, and of course, source code imports.
SVG as Component: Yes, you can import SVGs as inlined sources with *.svg?url
, but what about actually importing them as React components? Easy! You can import an SVG file as a React component with *.svg?component
(See /src/ui/app.tsx
for examples) (Using the vite-plugin-react-rich-svg plugin)
Sassy: A classic, this boilerplate supports Sass/Scss/Less and modules! Check out /src/ui/styles/
for 7-1 Sass Template and /src/ui/components/Button.module.scss
for module examples.
npm install
Plugins > Development > New Plugin...
. You can also type "New Plugin...
to the global search (Windows: CTRL + P, Mac: ⌘ Command + P)Default
or Run once
layout, because you'll only need to save the manifest (for the plugin id it generates). Click "Save as", and save it to a temporary place. Then click "Open folder" to navigate to the folder it generatedid
field from the manifest.json
it generated.figma.manifest.ts
, and replace the id
with the id you noted down. Then configure the manifest there as you like. (See Official Figma Plugin Manifest doc)Development is very straight forward. Just run the dev command, and it will start compiling your files as you code.
npm run dev
Once dev is ran, dist/
folder will be created, which includes your manifest.json
. You can load it in Figma, by Right Click > Plugins > Development > Import plugin from manifest...
[!TIP] You can turn on the
Hot reload plugin
option in Figma, to automatically reload when files indist/
changes.
If you like developing your UI first, then integrating with Figma context; you can run your UI code in browser just like your every other Vite project by running:
npm run dev:ui-only
[!NOTE] Since Figma context is not available in "ui-only" mode, any attempt to Figma API/SDK calls will look like a crash on your inspector/console.
Building with the following command line will yield with a dist
folder, which is ready to be used by Figma:
npm run build
Then, dist/manifest.json
can be used to load the plugin. In Figma, right click while you're in a design file. Follow Plugins > Development > Import plugin from manifest...
. You can also type "Import plugin from manifest...
to the global search (Windows: CTRL + P, Mac: ⌘ Command + P). Then select dist/manifest.json
After building, built dist
folder is going to contain every artifact you need in order to publish your plugin. Just build, and follow Figma's Official Post on Publishing Plugins.
src
src/common/
: Sources that are intended to be used both by plugin and ui logical sides.
src/common/network/
: Networking logic & message declarations used by Plugin - UI logical sides' intercommunication. Whenever a new message type is needed, declare and register here.src/plugin/
: Sources of the plugin logical side. Place everything that interracts with figma here.src/ui/
: Sources of the ui logical side, a classical Vite + React source base.scripts
scripts/vite/
: Potential custom vite plugins written for your projectscripts/windows/
: Potential custom Windows OS scriptsscripts/macos/
: Potential custom Mac OS scriptsfigma.manifest.ts
- A module that exports Figma Plugin Manifest for the build scriptsImporting image assets other than .svg
is easy. However, when you are importing .svg
, by default it will load as a base64 data-uri, to import as a React component, you must add the query string ?component
.
import MyImage from "@ui/assets/my_image.svg?component"; // <MyImage />
import myImage from "@ui/assets/my_image.svg?url"; // "data:svg+xml,..."
import myImageRaw from "@ui/assets/my_image.svg?raw"; // "<svg>...</svg>"
...
<MyImage className="something" />
<img src={myImage} />
<div dangerouslySetInnerHTML={{ __html: myImageRaw }} />
© 2024 Taha Anılcan Metinyurt (iGoodie)
For any part of this work for which the license is applicable, this work is licensed under the Attribution-ShareAlike 4.0 International license. (See LICENSE).