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.

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 to 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 | { [key: string]: string }

Used to specify HTML file/files that can be used in the iframe modal via figma.showUI, if you choose to have one.

  • If a single string is specified, this is the relative file path to the HTML file whose contents will be available as a string in the Javascript code via the constant __html__.
  • If a map is specified, each entry of the map will be available at __uiFiles__

parameters?: Parameter[]

Used to specify the list of parameters that your plugin accepts as input. Can also be defined on menu items. Here's an example:

"parameters": [
  {
    "name": "Icon name",
    "key": "icon-name",
    "description": "Enter the name of the icon you want to insert."
  },
  {
    "name": "Size",
    "key": "size",
    "description": "Enter the size of the icon you want to insert.",
    "allowFreeform": true
  },
  {
    "name": "Color",
    "key": "color",
    "description": "Enter the color of the icon you want to insert.",
    "allowFreeform": true,
    "optional": true
  }
]

Each parameter has the following properties:

  • A name property that specifies the name given to this parameter in the UI.
  • A key property that is a unique id used to identify the value of this property in ParameterValues.
  • An optional description property that gives a more detailed description that is displayed in the UI.
  • An optional allowFreeform property that allows the user to enter any value for this parameter, not just those suggested by the plugin.
  • An optional optional property that indicates the parameter can be skipped in the UI.

More formally,

interface Parameter {
  name: string
  key: string
  description?: string
  allowFreeform?: boolean
  optional?: boolean
}

parameterOnly?: boolean

Allows you to specify that your plugin can only be launched with parameters. You must also specify a valid parameter list: parameters. Can also be defined on menu items with parameters.

If true, users will always be prompted to enter parameters in the quick action UI before your plugin is run. If false, users will only be asked to enter parameters if they launch the plugin through the Quick Actions UI and hit the tab key. If the user launches the plugin through the context menu or the main menu, the plugin will be launched directly without displaying the parameter UI.

Defaults to true

editorType: ('figma' | 'figjam')[]

This allows you to specify the editor that your plugin is intended for and will impact which editor your plugin appears in.

The types we support currently are:

"editorType": ["figma"]
"editorType": ["figjam"]
"editorType": ["figma", "figjam"]

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, parameters?: ParameterList[], parameterOnly?: boolean } |
  // 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
}

enableProposedApi?: boolean

See Proposed API. Warning: This flag is only meant for development, and will not work in published plugins!

enablePrivatePluginApi?: boolean

This enables API that's specific to private plugins. Setting this will also enable local plugins to work with these APIs during development.

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.

permissions?: PluginPermissionType[]

This allows you to specify what permissions your plugin wants access to.

The possible PluginPermissionType are:

type PluginPermissionType =
 "currentuser" |
 "activeusers"

Note that activeuser must be specified if your plugin uses figma.activeUser. currentuser must be specified if your plugin uses figma.currentUser.

← TypeScriptCreating a User Interface →