Skip to content

Latest commit

 

History

History
201 lines (124 loc) · 6.26 KB

README_NEW.md

File metadata and controls

201 lines (124 loc) · 6.26 KB

logos

Warning

The next release is still in progress, but comes with a lot of improved features including better web socket handling for previewing in the browser and the ability to bundle the main code using vite.config.js.

Plugma

Take Figma plugin development to the next level with browser previews, faster debuging and minimal boilerplate.

Requirements

Start from a template

Create a plugin from a template using the following:

# Use plugma@next for next release in progress
npm create plugma@latest

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

Commands

When using these with npm run you need to pass the arguments with a double dash --, for example npm run dev -- -p.

  • dev [options]

    Start a server to develop your plugin.

    Options

    • -p, --port: Specify a port number for the plugin preview.
    • -m, --mode: Specify a mode.
    • -ws, --websockets: Enable websockets to preview in browser.

  • build [options]

    Create a build before publishing.

    Options

    • -w, --watch: Watch for changes and rebuild automatically.
    • -m, --mode: Specify a mode.

  • preview [options]

    Preview the plugin in a browser preview.

    Options

    • -p, --port: Specify a port number for the plugin preview.
    • -m, --mode: Specify a mode.

  • release [version] [options]

    Build the plugin and release to GitHub.

    Version

    • alpha, beta, stable or an integer (optional)

    Options

    • -t, --title: Provide a custom title
    • -n, --notes: Provide release notes.

Further features

  • Developer Tools

    Plugma comes with several developer tools to make developing plugins easier. You can enable them by using keyboard shortcut Opt + Cmd + J.

  • Manifest Config

    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.

  • Blunding Config

    Vite is used to bundle both the main code and the UI. To configure how this works you can can modify the vite.config.js file in the route of your project.

  • Installing globally

    If you'd prefer to use the CLI globally you can install it using the following.

    npm install plugma -g

Troubleshooting

Posting messages

Warning

This will no longer be an issue in the next version when it releases.

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 Plugma work?

Plugma simplifies Figma plugin development by using Vite to bundle everything into a single file and managing the development environment with a local server. Here’s how it works:

  • Vite bundles styles and scripts into one file, and a local server is used during development, removing the need for rebuilding with every change. The plugin iframe is automatically redirected to this server.
  • Since the iframe is redirected, Plugma handles things like keyboard events, passing Figma’s CSS theme variables, and enabling browser previews via WebSockets. This all happens behind the scenes, so you don’t need to modify your plugin’s source code.
  • For the final build, only your plugin code is bundled, excluding any development boilerplate, and the code is minified.

Acknowledgments

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