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 inParameterValues
. - 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 acommand
property. This creates a user-clickable submenu item. Thename
property is displayed to the user in the menu. Thecommand
property is never exposed to the user but is rather exposed to your plugin through thefigma.command
javascript property. You can choose any string value forcommand
. - A
separator
property with the valuetrue
. This creates a separator in the menu. A separator is not selectable by the user. - A
name
and amenu
property. This creates a nested submenu. Thename
property is displayed as name for the submenu. Themenu
property contains an array of menu items following the same format of the top-mostmenu
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 thefigma.command
that will be supplied when the plugin is run after the button is pressed. This command must match the command supplied in thesetRelaunchData
API call for the button to display. - A
name
property that gets displayed as the text of the button. - An optional
multipleSelection
property (defaulting tofalse
) that enables the relaunch button and description to appear when multiple nodes are selected. WithoutmultipleSelection
set totrue
the relaunch buttons will only appear when a single node is selected. Even whenmultipleSelection
istrue
, the relaunch buttons will only display if all of the selected nodes have relaunch data attached with the samecommand
.
info
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" |
"fileusers"
info
activeuser
: lets your plugin use thefigma.activeUser
apicurrentuser
: lets your plugin use thefigma.currentUser
apifileusers
: lets you use theStampNode.getAuthorAsync
method.
capabilities?: 'textreview'[]
This allows you to specify what capabilities your plugin has access to. At the moment the only applicable capability is 'textreview'
.