Quick start

Pre-requisites#

Bootstrapping a new plugin/widget from a template#

$ npx --yes create-figma-plugin

You’ll then be prompted to select from the following templates:

Configuring the plugin/widget#

Configuration options for your plugin/widget go under the "figma-plugin" key of your package.json file.

A Figma plugin (eg. plugin/preact-rectangles) would be configured as follows:

{
  "figma-plugin": {
    "editorType": [
      "figma"
    ],
    // ...
    "name": "Rectangles",
    "main": "src/main.ts",
    "ui": "src/ui.tsx"
  }
}

See that:

  • "main" is set to src/main.ts, which is the main entry point for the plugin.
  • "ui" is set to src/ui.tsx, which is the plugin’s UI implementation.

A FigJam widget (eg. widget/notepad) would be configured as follows:

{
  "figma-plugin": {
    "editorType": [
      "figjam"
    ],
    "containsWidget": true,
    // ...
    "name": "Notepad",
    "main": "src/main.tsx",
    "ui": "src/ui.tsx"
  }
}

Because this is a FigJam widget, see that:

See all the supported configuration options.

Building the plugin/widget#

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

{
  "scripts": {
    "build": "build-figma-plugin --typecheck --minify",
    "watch": "build-figma-plugin --typecheck --watch"
  }
}

The build-figma-plugin CLI is powered by esbuild, which enables extremely fast, sub-second builds. When the --typecheck flag is specified, your TypeScript code will also be compiled and type-checked by the TypeScript compiler.

To build the plugin/widget:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin/widget. (To customize the output directory for the manifest.json and JavaScript bundles, use the --output flag when invoking the build-figma-plugin CLI, eg. --output my-plugin.)

(Configuring your plugin/widget must be done via package.json. Avoid manually editing the manifest.json file. Because the manifest.json file is always regenerated on build, any changes you make will always get overridden.)

To watch for code changes and rebuild the plugin/widget automatically:

$ npm run watch

Learn how to:

Installing the plugin/widget#

  1. In the Figma desktop app, open a Figma/FigJam document.
  2. Search for and run Import plugin from manifest… or Import widget from manifest… via the Quick Actions search bar.
  3. Select the manifest.json file that was generated by the build script.

Debugging#

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

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

Publishing to Figma Community#

Figma will generate a unique ID for you when you first try to publish your plugin/widget. Copy and paste that ID into the "figma-plugin" configuration (under the "id" key), then run the build script again to regenerate the plugin/widget’s manifest.json file.

See also#

Official docs and code samples from Figma:

Community: