Plugma NPM | npm.io

Plugma

This project is currently in alpha so some things might not work as expected

Plugma is a small framework and CLI that makes it easier to develop and maintain Figma plugins.

Features

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

Example

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();
        })
    })
})

Usage

State Management

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
}

Menu Commands

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)
})

Message Handling

There is a simple method for listening for messages from the UI using plugin.on().

plugin.on('buttonPressed', (message) => {
    console.log('do something!')
})

Version Tracking

Easily communicate new features with your users by keeping track of changes via the plugma CLI.

plugma version [patch|minor|major] -m "New feature"

Injecting Data

Using the -i or -b flag, Plugma will inject plugin verison data into the compiled main code defined in your manifest. so you can target documents and nodes created by past versions of your plugin.