Figma Plugin Template

Plugin Configuration

The manifest

Your plugin's identity is defined in apps/design-plugin/figma.manifest.ts:

export default {
  name: "My Plugin Name",
  id: "your-plugin-id-from-figma",
  api: "1.0.0",
  main: "plugin.js",
  ui: "index.html",
  capabilities: [],
  enableProposedApi: false,
  editorType: ["figma", "figjam"],
};

Getting a plugin ID

  1. Open figma.com
  2. Go to Plugins > Manage plugins > Create new plugin
  3. Copy the plugin ID from the URL or the plugin settings page
  4. Replace "your-plugin-id-from-figma" in the manifest

For development, you can use any ID. You only need a real ID when publishing.

Changing the window size

In apps/design-plugin/src/plugin/plugin.ts, find the figma.showUI call:

figma.showUI(__html__, {
  width: 400,    // Width in pixels
  height: 500,   // Height in pixels
  title: "My Plugin",
});

Common sizes:

  • Small utility: 300 x 200
  • Standard plugin: 400 x 500
  • Full panel: 800 x 650

Editor types

The editorType array controls where your plugin appears:

  • ["figma"] — Only in Figma design files
  • ["figjam"] — Only in FigJam boards
  • ["figma", "figjam"] — Both (default)

Capabilities

The capabilities array enables special features:

capabilities: ["codegen"],     // Code generation panel
capabilities: ["inspect"],      // Design inspect mode
capabilities: ["textreview"],   // Text review suggestions

Most plugins leave this empty.

On this page