Plugma

[!WARNING] Plugma is currently in alpha. Your feedback is greatly appreciated!

Plugma simplifies Figma plugin development.

Start from a template

Create a plugin from a template using the following:

npm create plugma@latest

Requirements

• Node.js
• Figma desktop app

The frameworks currently supported are React, Svelte, Vue and vanilla JavaScript.

Install

To install the CLI globally.

npm install plugma -g

Commands

To use these with the pre-made template just pass the arguments with --, for example node run dev -- -p.

plugma dev

Start a server to develop your plugin.

Options

• --port, -p: Specify a port number for the plugin preview.
• --toolbar, -t: Show the developer toolbar within the plugin UI.

plugma build

Create a build ready for publishing.

Options

• --watch, -w: Watch for changes and rebuild automatically.

Manifest

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.

Troubleshooting

Posting messages

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: "*"
    },
    "*"
})

How does it work?

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.

Acknowledgments

I would like to thank Yuan Qing Lim's Create Figma Plugin for the inspiration for this project.