3.2.1 Figma Plugin
A Figma plugin is a custom extension that adds features or automates tasks within Figma’s design editor. Plugins are created by third-party developers using Figma’s Plugin API. They allow users to tailor Figma’s functionality to their specific workflows beyond the built-in tools.
Plugin API Constraints
For this thesis, it is essential to understand the constraints imposed by the Figma Plugin environment, as they directly shaped the architectural and implementation decisions described in the following chapters.
Figma plugins are written primarily using JavaScript and HTML, using Figma’s Plugin API. Plugins can run in both the desktop and browser versions of Figma, but they follow a strict execution model for performance and security.
The main plugin code runs in a sandboxed main thread with access to the Figma scene, while an optional UI runs in a separate iframe with access to browser APIs. Communication between these two contexts occurs via postMessage, enabling the exchange of data and commands (see Figure 2).
The main thread supports modern JavaScript (ES6+), but browser APIs such as XMLHttpRequest or direct DOM access are unavailable. Because browsers only execute JavaScript, the plugin entry point must always be a .js file (Figma, n.d.-h).
Plugin development and testing require the Figma desktop app, as Figma must load the plugin code from local files. When creating a new plugin in the desktop app, Figma generates a starter project containing a manifest.json . This file defines the plugin’s metadata and execution details, such as name, version, main script, optional UI file, permissions, and allowed network domains.
{
"name": "MyPlugin",
"id": "737805260747778092",
"api": "1.0.0",
"editorType": ["figma", "figjam"],
"main": "code.js",
"ui": "ui.html",
"documentAccess": "dynamic-page",
"networkAccess": {
"allowedDomains": ["none"]
}
}One of the most important fields is "main", which points to the JavaScript file that will be executed in the plugin’s main thread. Another relevant field is "ui", which defines the HTML file loaded when the plugin interface is shown using figma.showUI(). While the manifest file offers a simple entry point for defining plugin structure, it also introduces certain limitations. Figma plugins must specify exactly one "main" script and, if needed, a single "ui" file. This means that all plugin logic for each context must be bundled into a single JavaScript and HTML file. While this is manageable for small projects, it becomes increasingly difficult to maintain as complexity grows and the codebase expands. To solve this, Figma recommends using a tool like Webpack to bundle multiple JavaScript and CSS modules into one optimized file, making it possible to maintain a modular codebase while still conforming to Figma’s single-file constraint.
Additionally, Figma strongly recommends using TypeScript for development, as static type checking reduces errors when working with the diverse node types in the Plugin API. Although the manifest must reference JavaScript, all TypeScript code is compiled to JavaScript via the TypeScript compiler (tsc).
While plugins can be written in plain JavaScript, the default starter project is configured to use Node.js and npm. This setup manages dependencies such as TypeScript, Webpack, and @figma/plugin-typings. As a result, development typically involves running npm install to retrieve these dependencies before compiling and testing the plugin.
These architectural and technical foundations are crucial to understanding the constraints and decisions presented in the following solution chapters. For full technical documentation and development guides, refer to the official Figma Plugin API documentation.
Last updated