Skip to main content

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 and perform one or more actions. Users and organizations take advantage of plugins to customize their experience and create more efficient workflows.

Plugins are created using two common languages of web development: JavaScript and HTML. You’ll need an understanding of these languages to develop plugins. You’ll write the functionality of your plugins in JavaScript and build your user interface (UI) using HTML. Explore required knowledge →

Plugins interact with Figma's editors using the dedicated Plugin API. They can also leverage the external web APIs available in most modern browsers. You can build plugins that run immediately when invoked by the user, or that require users to input information via custom 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 quickstart 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 access to Figma’s editors, 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 interact with, first and foremost, the content of files. 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.

Figma files are loaded dynamically. This means that pages are only loaded by the editor as needed (for example, when a user navigates to a page). Plugins must use asynchronous APIs to access parts of the file that are outside of the currently-viewed page.

There are some limitations to what plugins can 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. The Plugin API can only access editor fonts that have been loaded via loadFontAsync(). This doesn't apply to fonts that you 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.

Plugins can behave differently depending on what the user is doing, such as whether they're in Figma Design Mode, Dev Mode, or FigJam. Plugins running in Dev Mode have certain differences that are important to understand. 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 or FigJam file, every DocumentNode will have PageNodes that represent each page in that Figma file. There is only one DocumentNode per browser tab and each of its children are PageNodes. Because Figma files are loaded dynamically, not all PageNodes are immediately loaded and available to a plugin. Developers can use the Plugin API to load and traverse additional PageNodes as needed.

FigJam files are not currently loaded dynamically; however, they will be in the future so it is best practice to assume not all pages are always loaded.

The DocumentNode can 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 →

Asynchronous

The Plugin API is designed to be used asynchronously, and Figma encourages plugin developers to utilize the asynchronous methods provided by the Plugin API. A number of critical operations for Figma plugins, like loading pages and working with fonts and images, are asynchronous. Asynchronous Tasks →

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>, which means 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.

You can choose whether your plugin runs immediately, or if users can enter in parameters.

Plugin UI 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 speed up plugin development and helps you create a UI that's mirrors Figma's own UI. While we don't provide these components as part of the core Figma Plugin API, 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 that in many cases 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()](/plugin-docs/api/properties/nodes-setrelaunchdata/) function.

manifest.json:

"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 Dev Mode, relaunch buttons appear in the Inspect panel.

In FigJam files, the relaunch button appears in the properties menu for a node. 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. You’ll also be able to update the plugin’s security disclosure form if you’ve changed your plugin’s data practices. 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.

On this page