Figma Plugin Development
Build plugins that extend Figma's functionality using the Plugin API.
Architecture
Figma plugins run in two threads communicating via postMessage:
-
Main thread (sandbox): Plugin API access, node manipulation, figma.* calls
-
UI thread (iframe): HTML/CSS/JS interface, no Figma API access, npm packages allowed
Key Principles
-
Main thread handles all Figma document operations
-
UI thread handles user interface and external APIs
-
Communication between threads via figma.ui.postMessage() and onmessage
-
Plugins must be performant — avoid blocking the main thread
Quick Start Checklist
-
Set up project with manifest.json (name, id, main, ui)
-
Create main thread code (code.ts ) with plugin logic
-
Create UI (ui.html ) with interface elements
-
Wire up postMessage communication between threads
-
Test in Figma development mode
-
Publish via Figma Community
References
Reference Description
project-structure-and-build.md Manifest, TypeScript setup, build configuration
development-testing-and-publishing.md Dev workflow, testing, publishing, troubleshooting
api-globals-and-nodes.md Global objects, node types, components
api-rendering-and-advanced.md Paints, effects, auto layout, styles, variables, events
ui-architecture-and-messaging.md iframe UI, postMessage, typed messages, plain HTML
ui-react-and-theming.md React setup, hooks, Figma theme colors
ui-patterns-and-resources.md Loading states, tabs, color pickers, file downloads
selection-traversal-and-batching.md Selection handling, node traversal, batch operations
colors-and-text.md Color conversion, manipulation, text operations
layout-storage-and-utilities.md Positioning, alignment, storage, error handling, utilities