gavinmcfarland/plugma

CLI that simplifies creating Figma plugins

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.

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.