Warning
Plugma is currently in alpha. Your feedback is greatly appreciated!
Plugma simplifies Figma plugin development.
Create a plugin from a template using the following:
npm create plugma@latest
The frameworks currently supported are React
, Svelte
, Vue
and vanilla JavaScript
.
To install the CLI globally.
npm install plugma -g
To use these with the pre-made template just pass the arguments with --
, for example node run dev -- -p
.
Start a server to develop your plugin.
--port
,-p
: Specify a port number for the plugin preview.--toolbar
,-t
: Show the developer toolbar within the plugin UI.
Create a build ready for publishing.
--watch
,-w
: Watch for changes and rebuild automatically.
You can either place a manifest.json
file in the root of the project or add a plugma.manifest
field to the package.json
file.
You may see the following warning.
Message from plugin UI ignored due to missing pluginId in message.
This occurs because Plugma redirects the plugin UI to a local dev server during development. Figma needs a pluginId
in messages from the plugin UI when coming from an external URL.
To fix this, use a wildcard as the pluginId
in your message:
// ui
parent.postmessage({
{
pluginMessage: "Your message",
pluginId: "*"
},
"*"
})
Plugma uses Vite to bundle Figma plugins and is configured to inline all styles and scripts into one file. It uses a local server for development, that passes messages from Figma's main thread to the local server using web sockets.
I would like to thank Yuan Qing Lim's Create Figma Plugin for the inspiration for this project.