Plugin Setup

This guide covers project configuration, the manifest file, bundling, and publishing your plugin.

Project Setup

Initialize the project

Create a new directory and initialize with npm:

mkdir figma-plugin && cd figma-plugin
npm init -y
npm install -D typescript @figma/plugin-typings

Configure TypeScript

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "typeRoots": ["./node_modules/@figma"]
  },
  "include": ["code.ts"]
}

Create the manifest

Every plugin needs a manifest.json:

manifest.json

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"],
  "capabilities": [],
  "permissions": ["currentuser"]
}

manifest.json

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "code.js",
  "editorType": ["figma"]
}

Write your plugin code

Create code.ts with your plugin logic:

// Access the current selection
const selection = figma.currentPage.selection;

if (selection.length === 0) {
  figma.notify("Please select at least one layer");
  figma.closePlugin();
} else {
  for (const node of selection) {
    if ("fills" in node) {
      node.fills = [{ type: "SOLID", color: { r: 0.63, g: 0.35, b: 1 } }];
    }
  }
  figma.notify(`Updated ${selection.length} layers`);
  figma.closePlugin();
}

Build and run

Compile TypeScript and load the plugin in Figma:

npx tsc

In Figma: Plugins > Development > Import plugin from manifest and select your manifest.json.

Manifest Reference

Field	Type	Description
`name`	`string`	Display name in the plugin menu
`id`	`string`	Unique plugin ID (assigned by Figma)
`api`	`string`	Plugin API version
`main`	`string`	Path to compiled main thread code
`ui`	`string`	Path to UI HTML file (optional)
`editorType`	`string[]`	`"figma"`, `"figjam"`, or `"dev"`
`capabilities`	`string[]`	Special capabilities like `"codegen"`
`permissions`	`string[]`	Required permissions

The id field must match the ID assigned by Figma when you create the plugin. Using the wrong ID will prevent your plugin from loading.

Bundling with esbuild

For production plugins, use a bundler to handle imports and optimize output:

npm install -D esbuild

import { build } from "esbuild";

build({
  entryPoints: ["code.ts"],
  bundle: true,
  outfile: "code.js",
  target: "es2020",
  format: "esm",
}).catch(() => process.exit(1));

Add a "build": "node build.mjs" script to your package.json for quick builds during development.