Introduction
Welcome to the Plugin API!
Plugins are programs or applications created by the Community that extend the functionality of Figma's editors. Plugins run in files, perform one or more user actions, and allow users to customize their experience or create more efficient workflows.
Plugins are powered by web technologies. You’ll need an understanding of these technologies to develop plugins. You’ll write plugins in JavaScript and build any UI using HTML. Explore required knowledge →
Plugins interact with Figma's editors via a dedicated Plugin API. They can also leverage external Web APIs. You can build plugins that run immediately after user invokation, or build plugins that require user’s to input information via a user interface (UI). Explore how plugins are run →
The API reference and this accompanying documentation has the information you need to build plugins. To ask questions, give feedback, or connect with other plugin developers: Join our community-driven Discord server →
Our setup guide takes you through the process of setting up your environment and running a sample plugin. Get started with the plugin API →
Plugin API access
The Plugin API supports both read and write functions, allowing developers to view, create, and modify the contents of files. You can access most of the plugin API through the figma global object.
Plugins expose, first and foremost, the contents of a file. That's anything that exists in the layers panel and any properties associated with those layers in the properties panel. Plugins can view and modify aspects of these layers (or nodes), like the color, position, hierarchy, text, etc.
The plugin API doesn't allow you to access anything outside of the current file it's running in. Plugins can't access:
- Styles and components from any team or organization libraries. The Plugin API can only access styles, components, and instances that are currently in the file, or have been imported into the file via a function like
importComponentByKeyAsync() - External fonts or web fonts accessed via a URL. Plugins can only access fonts that are accessible in the editor, which includes Figma's default fonts, shared organization fonts, or fonts stored locally on your computer. You'll be required to load any fonts you want to use in your plugin. This doesn't apply to fonts you want to use in your plugin's UI.
- Other file metadata like the file's team or location, permissions, or any comments associated with that file. The includes the version history of that file. You can get read access to these aspects of a file via Figma's REST API.
info
Plugins in Dev Mode can only to read contents from the current page of the file it's running in, and can only write certain metadata such as pluginData and relaunchData.
Learn more in our Working in Dev Mode → guide
Document structure
Every file in Figma consists of a tree of nodes, and at the root of every file is a DocumentNode. The DocumentNode is how you access and explore the contents of a file.
In a Figma design file, every DocumentNode will have a PageNode that represent each page in that Figma file. There can only be one document node per browser tab and each of its children must be PageNodes.
As FigJam files don't support pages, there won't be any PageNodes to explore. Instead, the children of the DocumentNode will be the layers and objects on that board.
The DocumentNode can then have any number of child nodes. Each subtree that stems from the DocumentNode represents a layer or object on the canvas. There are specific nodes or classes for different types of layers in Figma — like frames, components, vectors, and rectangles.
Nodes have a number of properties associated with them. Some of these are global properties, that exist on every node, whereas other properties will be specific to the type of node.
You can create plugins for a specific editor type, for multiple editors, or build plugins that perform different actions in different editors. While some node types can only be created in a specific file or editor type, you will generally be able to read and modify most nodes, regardless of the editor type, unless your plugin is running in Dev Mode. Working in Dev Mode guide →
Browser based
Figma is predominantly browser-based software, which means it can be run on all full desktop operating systems (MacOS, Windows, Linux, etc), as well as Chrome OS .
Like Figma, plugins are powered by web technologies. Part of the plugin API runs in an <iframe> meaning you can also access browser APIs. This includes making network requests, opening local files, and using functionality like <canvas>, WebGL, and WebAssembly, etc. How Plugins Run →
User actions
Plugins run in files and perform one or more user actions. These user actions are usually short-lived and must be initiated by the user.
- Users can only run one plugin and one action at a time.
- It’s not possible to build plugins that run in the background.
Plugin UI
You can choose whether your plugin runs immediately, or if users can enter in parameters.
A plugin can also open a modal as an <iframe> and write HTML, CSS and JavaScript inside that <iframe>. You're free to create any UI you want inside that modal. Create a user interface →
Being able to pull from a library of components that match Figma's design system can significantly speeds up plugin development and helps you create a UI that's mirrors Figma's own UI. We don't provide these components as part of the core Figma Plugin API. However, Figma employee and plugin developer, Tom Lowry, has put together a library of React components which you can use to build the UI of your plugin. Open the GitHub repo →
Plugin parameters
Developers can create plugins with parameters that allow plugins to accept input from users via the quick actions menu.
Adding parameters means you don't need to build a custom UI. It also provides a streamlined experience for users of the plugin, who can run a plugin directly from the quick actions menu using their keyboard.
Relaunch plugins
When building a plugin, you have the option to create buttons in Figma's UI that allows users to relaunch your plugin. This makes it easier to run a plugin multiple times and allows collaborators to relaunch the plugin from the same file. You can do this using the setRelaunchData() function.
"relaunchButtons": [
{"command": "edit", "name": "Edit shape"},
{"command": "open", "name": "Open Shaper", "multipleSelection": true}
]
In Figma design files, the relaunch button will appear in the Properties panel. In FigJam files, the relaunch button appears in the properties menu for a node. And in Figma design's Dev Mode, relaunch buttons appear in the Inspect panel.
info
Relaunch buttons are not available on page or document nodes in FigJam.
Multiple relaunch buttons can be added to the same node. If multiple relaunch buttons from the same plugin are added to the same node, they are grouped together into one button with submenus. The order of buttons is determined by the order of the elements in the manifest's relaunchButtons array. Learn more in the plugin manifest documentation →
Plugin management
Support
Figma does not provide support for third-party applications. As the plugin's developer, it's your responsibility to assist your plugin's users with technical issues. You need to add a Support contact when you submit your plugin for approval. This can be an email address users can contact, or a link to a website or help center. Manage plugins as a developer →
Versioning
Once Figma approves your plugin, you don't need to submit your plugin for further review. This means you can publish any updates immediately. You'll be able to added a detailed description of any changes or updates in the plugin's Version history. When you publish an update, Figma will update the plugin for every user. It's not possible for users to revert to a previous version of the plugin. If you need to roll back any changes, you can republish an earlier version of the plugin.
Analytics
Figma doesn't currently provide any analytics or reporting around plugin usage or error/crash reporting. We recommend using your own analytics or crash reporting service to monitor your plugins performance. Figma will send plugin developers a notification each week about any engagement they've gotten from users in the Figma Community.