Plugins
Plugins Overview
Build Figma plugins that extend the editor with custom tools, automations, and integrations.
Figma plugins run directly inside the editor and can read, create, and modify design elements. They’re built with TypeScript and can include a custom UI.
What Plugins Can Do
Read & Modify
Access the document tree, inspect properties, and modify any node — colors, text, layout, styles, and more.
Generate Content
Create new nodes programmatically — rectangles, frames, text, components, and auto-layout containers.
Custom UI
Show modal dialogs or side panels with HTML/CSS/JS interfaces that communicate with the plugin sandbox.
Network Access
Fetch external data from APIs through the UI iframe — import content, sync with external tools, and more.
Plugin Architecture
Plugins consist of two parts:
| Part | Environment | Capabilities |
|---|---|---|
Main thread (code.ts) | Figma sandbox | Full access to the Plugin API and document tree |
UI thread (ui.html) | Browser iframe | DOM, network requests, any web API |
Communication between threads uses postMessage:
// Main thread → UI
figma.ui.postMessage({ type: "selection", count: 3 });
// UI → Main thread
parent.postMessage({ pluginMessage: { type: "update" } }, "*");The main thread cannot access the DOM, fetch, or browser APIs directly. All network requests must go through the UI iframe.
Plugin Types
- Design Plugins
- FigJam Plugins
- Dev Mode Plugins
Run in Figma Design files. Access the full Plugin API including auto-layout, components, and styles.
Ready to build? Follow the Plugin Setup Guide to configure your development environment.