natemoo-re / create-figma-plugin

:seedling: A comprehensive toolkit for developing Figma plugins

Create Figma Plugin

A comprehensive toolkit for developing Figma plugins

Features

• Initialize a new Figma plugin using a template
• Build your plugin, with support for multiple menu commands that each have their own UI implementation
• Utility functions for common plugin operations
• A library of Preact components that replicate the Figma UI design

Quick start

To start, read the Figma plugin basics doc to understand how a Figma plugin actually works, and to learn about what’s currently possible (and not possible) in a Figma plugin.

Pre-requisites

• Node.js
• Figma desktop app

Initialize a new plugin

First:

$ npx create-figma-plugin figma-hello-world --yes

Then:

$ cd figma-hello-world
$ ls -a
.gitignore  README.md  node_modules  package-lock.json  package.json  tsconfig.json  src
$ ls src
main.ts

src/main.ts is the main entry point for our plugin:

// src/main.ts

export default function () {
  figma.closePlugin('Hello, World!')
}

See that in package.json, we’re pointing to src/main.ts on the "main" key under "figma-plugin":

  {
    ...
    "figma-plugin": {
      ...
      "name": "Hello World",
+     "main": "src/main.ts"
    }
  }

(This example only scratches the surface of what this toolkit provides. See the recipes section below, or jump to the ones for adding a UI to a plugin command, or specifying multiple commands in the plugin sub-menu.)

Build the plugin

In package.json, we also have build and watch scripts set up to invoke the build-figma-plugin CLI:

  {
    ...
    "scripts": {
+     "build": "build-figma-plugin",
+     "watch": "build-figma-plugin --watch"
    },
    ...
  }

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing a JavaScript bundle for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Installing the plugin

In the Figma desktop app:

1. Open a Figma document.
2. Go to Plugins → Development → New Plugin….
3. Click the Click to choose a manifest.json file box, and select the manifest.json file that was generated.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console in the Figma desktop app, go to Plugins → Development → Open Console.

Docs

• Figma plugin basics
• Configuration
• Utility functions
• Preact component library (Storybook)

Recipes

• Specifying multiple commands in the plugin sub-menu
• Adding a UI to a plugin command
• Passing data between the plugin command’s main and UI contexts
• Configuring relaunch buttons
• Customizing the underlying Webpack configuration

See also

• Figma plugin API docs
• yuanqing/figma-plugins

Prior art

Create Figma Plugin’s configuration API is heavily inspired by skpm’s.

License

MIT