Migrating an existing plugin
This guide outlines the steps to update your Figma plugin to work seamlessly with Plugma. While Plugma is compatible with React, Svelte, Vue, and vanilla JS/TS, compatibility with other frameworks may vary.
Steps to migrate
Step 1: Install Plugma
Add Plugma as a dependency in your project.
npm install plugma@latest
Step 2: Update package.json
scripts
Add Plugma commands in the scripts section to handle development, building, previewing, and releasing.
"scripts": {
"dev": "plugma dev",
"build": "plugma build",
"preview": "plugma preview",
"release": "plugma release"
}
Step 3: Update file paths in manifest.json
Update the main
and ui
fields in your Figma plugin manifest to point to your source files.
{
// ...
"main": "src/main.ts",
"ui": "src/ui.ts"
}
Step 4: Allow development network access
To allow local development with live reloading and WebSocket support, add the following domains to the networkAccess.devAllowedDomains
field in your manifest.
"networkAccess": {
// ...
"devAllowedDomains": [
"http://localhost:*",
"ws://localhost:9001"
]
}
Step 5: Wrap your main
code in a default function
Plugma requires that your main
code is wrapped in and exported as a default function, so that it can enable certain features during development.
export default function () {
// Your Figma plugin main code here
}
Step 6: Add TypeScript definitions for Figma
If your project uses TypeScript, install the necessary type definitions for Figma
npm install @figma/plugin-typings
And add the following to your tsconfig.json
file.
{
// ...
"compilerOptions": {
"typeRoots": ["node_modules/@figma"]
}
}
Step 7: Build and import the plugin in Figma
Run the build
command to create a dist
folder with it's own manifest.json
file, and import it into Figma.
npm run build
Use Figma's Actions menu (Cmd + /
) to search for "Import plugin from manifest..." and select the new manifest.
Additional considerations
Since Figma plugins must be bundled into a single main
file and a ui
file, ensure all assets are either inlined or hosted externally and must be included in the networkAccess
field of your manifest.