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 and FigJam. Plugins run in Figma or FigJam files and perform one or more user actions. They allow users to customize their experience or create more efficient workflows.

Like Figma and FigJam, 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 the Figma application via a dedicated Plugin API. They can also leverage external Web APIs. You can build plugins that run immediately, 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 for Figma and FigJam. 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 Figma design and FigJam files.

In both Figma and FigJam, 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 that layer 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 in that file that's outside the canvas. 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 local to that file.
  • External fonts or web fonts accessed via a URL. Plugins can only access fonts that are accessible in the editor. This 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, users, 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.

Document structure

Every file in Figma consists of a tree of nodes and at the root of every Figma or FigJam file is a Document node. The document node is how you access and explore the contents of a file.

In a Figma design file, every DocumentNode will have 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 document node will be the layers and objects on that board.

The document node can then have any number of child nodes. Each subtree that stems from the document node 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, both editors, or build plugins that perform different actions in each editor. 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.

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 files, and using functionality like <canvas>, WebGL, WebAssembly, and audio APIs, etc.

The Plugins API doesn't support desktop-specific APIs. While Figma has desktop applications, not everyone accesses Figma via the desktop. We want plugins to be as accessible and cross-platform as Figma itself. There are also security concerns which require a thorough and considerate approach.

Browsers already come with APIs such as reading files and saving files. Browser engineers have already put a lot of hard work into creating secure APIs, and we are content to follow their lead.

Core API

We built the Plugin API around a set of fixed controlled endpoints. There's a lot of extra functionality we could provide via the Plugin API, including helper functions that perform or automate a sequence of functions or events.

We made a conscious decision to keep the core Plugin API as contained as possible. This reduces the risk of us introducing code-breaking changes to the API and makes it easier for plugin developers to maintain plugins.

This means that we don't include any helper functions that developers can write using existing functions available in the Plugin API.

User actions

Plugins run in Figma or FigJam 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 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. You can decide if the modal is dismissed on, or can stay open within the file. Create a user interface →

Being able to pull from a library of components of Figma buttons, color picker, etc, 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. Figmate and Figma 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.

Relaunch plugins

When developing a plugin, you have the option to include a relaunch button. Since it isn't possible to set keyboard shortcuts for plugins, this makes it easier to run a plugin multiple times and allows collaborators to relaunch the plugin from the same file.

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 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 about relaunch in the plugin manifest →

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. Users who have already installed your plugin will only have access to the latest version of your plugin. 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 Community activity. This includes the total number of likes and installs for that week.

On this page