This repo has been deprecated. Please see https://github.com/gavinmcfarland/plugma instead.
Plugma is a small framework and CLI that makes it easier to develop and maintain Figma plugins.
- Convenient methods for message handling, menu commands, showing and posting to UI and more
- A single reference for managing plugin state more easily throughout your code
- Find documents and nodes created by past versions of your plugin
- Keep track of changes using the CLI
Below is an example of how you can create Figma plugins with plugma.
// code.ts
import plugma from 'plugma'
plugma((plugin) => {
plugin.ui = {
html: __html__,
width: 250,
height: 400
}
plugin.command('createRectangles', ({ui, data}) => {
ui.show(data)
plugin.on('create-rectangles', (msg) => {
const nodes: SceneNode[] = [];
for (let i = 0; i < msg.count; i++) {
const rect = figma.createRectangle();
rect.x = i * 150;
rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
figma.currentPage.appendChild(rect);
nodes.push(rect);
}
figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
figma.closePlugin();
})
plugin.on('cancel', () => {
figma.closePlugin();
})
})
})
The framework provides a plugin
reference which gives you the state of the plugin at any given time. This is useful for keeping consistancy like, UI state and when the plugin should close.
// plugin properties
plugin.ui {
html: __html__,
width: 250,
height: 500
}
Simplified developer experience for managing commands. Each command has access to the state of the plugin, including the name of the command used to start it.
plugin.command('createRectangle', ({ui, command, version, data}) => {
ui.show(data)
})
There is a simple method for listening for messages from the UI using plugin.on()
.
plugin.on('buttonPressed', (message) => {
console.log('do something!')
})
Easily communicate new features with your users by keeping track of changes via the plugma
CLI.
plugma version [patch|minor|major] -m "New feature"
Using the -i
or -b
flag, Plugma will inject plugin verison data into the compiled main
code defined in your manifest. Allowing you to target documents and nodes created by past versions of your plugin.
plugma version -b
This includes:
figma.cilentStorage.setAsync()
figma.root.setSharedPluginData()
node.setSharedPluginData()
Plugma will look for a manifest file located at either ./
or ./public
.
Install plugma as a dev dependency.
npm install plugma --save-dev
To install:
npm install
To develop:
npm run dev