Plugin Manifest

Each plugin must define a manifest.json file that describes the plugin. If you use the "Create new plugin" dialog, Figma will automatically create a simple manifest for you. You can extend this generated manifest to take advantage of additional features, for example, to declare a submenu for your plugin.

Example:

{
  "name": "MyPlugin",
  "id": "737805260747778092",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html"
}

name: string

The name of the plugin, as it will appear in the menu.

id?: string

The plugin ID to publish updates to. This ID will be assigned to you by Figma and is typically obtained using the "Create new Plugin" feature, which will generate a manifest file with a new id. You can also get a new plugin ID at the time of publishing your plugin.

This property is required to use some features of our API such as setPluginData.

api: string

The version of the Figma API used by the plugin. We recommend updating to the latest version whenever possible to get the latest features, bug fixes, and documentation. However, we don't auto-upgrade the api version of plugins give you the chance to test your plugin against the new version.

main: string

The relative file path to the Javascript code of your plugin.

ui?: string

The relative file path to the HTML file used in the iframe modal, if you choose to have one. The contents of this file will be available as a string in the Javascript code via the constant __html__ which you can then use to call figma.showUI.

menu?: ManifestMenuItem[]

This allows you to specify a submenu for your plugin, enabling the plugin to contain multiple commands. Use the figma.command property to determine which command the user selected.

The menu property contains a nested list of menu items, menu separators and submenus to be displayed. Here's an example:

"menu": [
  {"name": "Create Text", "command": "text"},
  {"name": "Create Frame", "command": "frame"},
  {"separator": true},
  {"name": "Create Shape",
   "menu": [
     {"name": "Create Circle", "command": "circle"},
     {"separator": true},
     {"name": "Create Rectangle", "command": "rectangle"}
   ]
  }
]

Each item in the menu property must be one of the following three:

  • A name and a command property. This creates a user-clickable submenu item. The name property is displayed to the user in the menu. The command property is never exposed to the user but is rather exposed to your plugin through the figma.command javascript property. You can choose any string value for command.
  • A separator property with the value true. This creates a separator in the menu. A separator is not selectable by the user.
  • A name and a menu property. This creates a nested submenu. The name property is displayed as name for the submenu. The menu property contains an array of menu items following the same format of the top-most menu manifest property. The submenu itself can not be selected by the user, but items inside the submenu can be. Submenus can be nested arbitrarily deep.

More formally,

type ManifestMenuItem =
  // Clickable menu item.
  { name: string, command: string } |
  // Separator
  { separator: true } |
  // Submenu
  { name: string, menu: ManifestMenuItem[] }

relaunchButtons?: ManifestRelaunchButton[]

This configures the relaunch buttons that are set via the setRelaunchData API call.

Example:

"relaunchButtons": [
  {"command": "edit", "name": "Edit shape"},
  {"command": "open", "name": "Open Shaper", "multipleSelection": true}
]

Each relaunch button in the relaunchButtons array is an object with the following properties:

  • A command property that specifies the figma.command that will be supplied when the plugin is run after the button is pressed. This command must match the command supplied in the setRelaunchData API call for the button to display.
  • A name property that gets displayed as the text of the button.
  • An optional multipleSelection property (defaulting to false) that enables the relaunch button and description to appear when multiple nodes are selected. Without multipleSelection set to true the relaunch buttons will only appear when a single node is selected. Even when multipleSelection is true, the relaunch buttons will only display if all of the selected nodes have relaunch data attached with the same command.

Note that if the name of a command in the manifest changes or is removed, then all buttons with that command will disappear. This behavior can be used to remove buttons when a particular action is no longer supported by the plugin.

If multiple relaunch buttons are shown for a given node or selection of nodes, the order of the buttons is determined by the order of the elements in the manifest's relaunchButtons array.

More formally,

type ManifestRelaunchButton = {
  command: string
  name: string
  multipleSelection?: boolean
}

build?: string

Experimental! A shell command to run before we load the file specified in main and ui. This can be used to call build commands such as compiling with Typescript, running Webpack, etc. The command is run in the directory of the manifest.

← TypeScriptCreating a User Interface →