# Figma Plugin API

> Complete documentation for building Figma and FigJam plugins using JavaScript and HTML. Plugins extend editor functionality by reading and writing to the currently open file.

Plugins run in a sandboxed environment within the Figma editor. The plugin code runs on a main thread with access to the document via the `figma` global object, while the optional UI runs in an iframe with access to browser APIs. Communication between the two uses `figma.ui.postMessage()` and `figma.ui.onmessage`.

Every Figma file is a tree of nodes rooted at a DocumentNode. Plugins traverse this tree to read and modify design content. Nodes have types (FrameNode, TextNode, RectangleNode, etc.) and properties (fills, strokes, layout, text content, etc.).

Key constraints: Plugins can only access the currently open file. Pages are loaded dynamically — use async APIs to access pages other than the current one. External fonts must be loaded via `loadFontAsync()` before modifying text. Styles and components from libraries are only available if imported into the file.

Plugins can target different editor modes: Figma Design, Dev Mode, FigJam, Figma Slides, or Figma Buzz. Each mode has different capabilities and available node types.

## Getting Started

- [Introduction](https://developers.figma.com/docs/plugins/): Overview of the Plugin API and what plugins can do
- [Prerequisites](https://developers.figma.com/docs/plugins/prerequisites/): Required JavaScript and HTML knowledge
- [Quickstart Guide](https://developers.figma.com/docs/plugins/plugin-quickstart-guide/): Set up your environment and run your first plugin
- [Setting Editor Type](https://developers.figma.com/docs/plugins/setting-editor-type/): Configure which editors your plugin supports

## Basics of Plugins

- [How Plugins Run](https://developers.figma.com/docs/plugins/how-plugins-run/): Plugin sandbox, main thread vs UI iframe, message passing
- [Accessing the Document](https://developers.figma.com/docs/plugins/accessing-document/): Navigate the node tree, find nodes, load pages
- [Async Tasks](https://developers.figma.com/docs/plugins/async-tasks/): Handle asynchronous operations in plugins
- [Editing Properties](https://developers.figma.com/docs/plugins/editing-properties/): Modify fills, strokes, text, layout, and other node properties
- [TypeScript](https://developers.figma.com/docs/plugins/typescript/): Using TypeScript with the Plugin API
- [Creating a User Interface](https://developers.figma.com/docs/plugins/creating-ui/): Build plugin UI with HTML in an iframe
- [CSS Variables](https://developers.figma.com/docs/plugins/css-variables/): Use Figma's CSS variables for consistent theming
- [Plugin Parameters](https://developers.figma.com/docs/plugins/plugin-parameters/): Accept user input via plugin parameters

## Development Guides

- [Making Network Requests](https://developers.figma.com/docs/plugins/making-network-requests/): Fetch external data from plugins
- [Working with Images](https://developers.figma.com/docs/plugins/working-with-images/): Handle image fills, exports, and image data
- [Working with Text](https://developers.figma.com/docs/plugins/working-with-text/): Create and modify text content and styles
- [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables/): Create, read, and bind design variables
- [Working with Rich Text](https://developers.figma.com/docs/plugins/working-with-rich-text/): Manage styled text segments and formatting
- [Adding Pattern Fills and Strokes](https://developers.figma.com/docs/plugins/adding-pattern-fills-and-strokes/): Apply pattern fills and strokes to nodes
- [Working in FigJam](https://developers.figma.com/docs/plugins/working-in-figjam/): FigJam-specific APIs and node types
- [Working in Dev Mode](https://developers.figma.com/docs/plugins/working-in-dev-mode/): Dev Mode-specific APIs and differences
- [Working in Slides](https://developers.figma.com/docs/plugins/working-in-slides/): Figma Slides-specific APIs
- [Working in Buzz](https://developers.figma.com/docs/plugins/working-in-buzz/): Figma Buzz-specific APIs
- [OAuth with Plugins](https://developers.figma.com/docs/plugins/oauth-with-plugins/): Implement OAuth authentication flows
- [Debugging](https://developers.figma.com/docs/plugins/debugging/): Debug plugins using browser dev tools
- [Frozen Plugins](https://developers.figma.com/docs/plugins/frozen-plugins/): Understand and handle frozen plugin states
- [TextReview Plugins](https://developers.figma.com/docs/plugins/textreview-plugins/): Build text review and linting plugins
- [Codegen Plugins](https://developers.figma.com/docs/plugins/codegen-plugins/): Build code generation plugins for Dev Mode
- [Requiring Payment](https://developers.figma.com/docs/plugins/requiring-payment/): Monetize plugins with payment requirements
- [Migrating to Dynamic Loading](https://developers.figma.com/docs/plugins/migrating-to-dynamic-loading/): Update plugins for dynamic page loading

## Using External Resources

- [Libraries and Bundling](https://developers.figma.com/docs/plugins/libraries-and-bundling/): Use npm packages and bundlers with plugins
- [Build Script](https://developers.figma.com/docs/plugins/build-script/): Set up a build pipeline for plugin development
- [Resource Links](https://developers.figma.com/docs/plugins/resource-links/): Useful libraries, tools, and community resources
- [Figma Components](https://developers.figma.com/docs/plugins/figma-components/): Use Figma's UI component library in plugin UIs

## Publishing and Other

- [Publishing](https://developers.figma.com/docs/plugins/publishing/): Publish your plugin to the Figma Community
- [Stability Updates](https://developers.figma.com/docs/plugins/stability-updates/): API stability guarantees and versioning policy
- [Proposed API](https://developers.figma.com/docs/plugins/proposed-api/): Preview upcoming API additions
- [Samples](https://developers.figma.com/docs/plugins/samples/): Example plugin projects
- [Get Help](https://developers.figma.com/docs/plugins/get-help/): Community resources and support channels

## API Reference

- [API Reference Overview](https://developers.figma.com/docs/plugins/api/api-reference/): Complete API reference index
- [Plugin Manifest](https://developers.figma.com/docs/plugins/manifest/): manifest.json configuration reference
- [Typings](https://developers.figma.com/docs/plugins/api/typings/): TypeScript type definitions
- [API Errors](https://developers.figma.com/docs/plugins/api/api-errors/): Error types and handling

## Global Objects

- [figma](https://developers.figma.com/docs/plugins/api/figma/): Main global object for accessing the document, viewport, and all API methods
- [figma.ui](https://developers.figma.com/docs/plugins/api/figma-ui/): UI iframe communication and management
- [figma.util](https://developers.figma.com/docs/plugins/api/figma-util/): Utility functions for color conversion, math, etc.
- [figma.constants](https://developers.figma.com/docs/plugins/api/figma-constants/): Constant values used across the API
- [figma.codegen](https://developers.figma.com/docs/plugins/api/figma-codegen/): Code generation API for Dev Mode
- [figma.timer](https://developers.figma.com/docs/plugins/api/figma-timer/): Timer utilities
- [figma.viewport](https://developers.figma.com/docs/plugins/api/figma-viewport/): Viewport control (zoom, scroll, focus)
- [figma.clientStorage](https://developers.figma.com/docs/plugins/api/figma-clientStorage/): Persistent local storage for plugins
- [figma.parameters](https://developers.figma.com/docs/plugins/api/figma-parameters/): Plugin parameter input handling
- [figma.textreview](https://developers.figma.com/docs/plugins/api/figma-textreview/): Text review API
- [figma.payments](https://developers.figma.com/docs/plugins/api/figma-payments/): Payments API for monetized plugins
- [figma.variables](https://developers.figma.com/docs/plugins/api/figma-variables/): Variables API for design tokens
- [figma.teamLibrary](https://developers.figma.com/docs/plugins/api/figma-teamlibrary/): Team library access
- [figma.annotations](https://developers.figma.com/docs/plugins/api/figma-annotations/): Annotations API
- [figma.buzz](https://developers.figma.com/docs/plugins/api/figma-buzz/): Figma Buzz API

## Node Types

- [Node Types Overview](https://developers.figma.com/docs/plugins/api/nodes/): Index of all node types in the document tree
- [DocumentNode](https://developers.figma.com/docs/plugins/api/DocumentNode/): Root node of every file
- [PageNode](https://developers.figma.com/docs/plugins/api/PageNode/): Page container node
- [FrameNode](https://developers.figma.com/docs/plugins/api/FrameNode/): Frame/auto-layout container
- [GroupNode](https://developers.figma.com/docs/plugins/api/GroupNode/): Group container
- [SectionNode](https://developers.figma.com/docs/plugins/api/SectionNode/): Section container
- [ComponentNode](https://developers.figma.com/docs/plugins/api/ComponentNode/): Reusable component definition
- [ComponentSetNode](https://developers.figma.com/docs/plugins/api/ComponentSetNode/): Component variant set
- [InstanceNode](https://developers.figma.com/docs/plugins/api/InstanceNode/): Component instance
- [TextNode](https://developers.figma.com/docs/plugins/api/TextNode/): Text layer
- [TextPathNode](https://developers.figma.com/docs/plugins/api/TextPathNode/): Text on a path
- [RectangleNode](https://developers.figma.com/docs/plugins/api/RectangleNode/): Rectangle shape
- [EllipseNode](https://developers.figma.com/docs/plugins/api/EllipseNode/): Ellipse/circle shape
- [PolygonNode](https://developers.figma.com/docs/plugins/api/PolygonNode/): Polygon shape
- [StarNode](https://developers.figma.com/docs/plugins/api/StarNode/): Star shape
- [LineNode](https://developers.figma.com/docs/plugins/api/LineNode/): Line
- [VectorNode](https://developers.figma.com/docs/plugins/api/VectorNode/): Vector/pen path
- [BooleanOperationNode](https://developers.figma.com/docs/plugins/api/BooleanOperationNode/): Boolean operation (union, subtract, etc.)
- [SliceNode](https://developers.figma.com/docs/plugins/api/SliceNode/): Export slice region
- [ConnectorNode](https://developers.figma.com/docs/plugins/api/ConnectorNode/): FigJam connector line
- [StickyNode](https://developers.figma.com/docs/plugins/api/StickyNode/): FigJam sticky note
- [ShapeWithTextNode](https://developers.figma.com/docs/plugins/api/ShapeWithTextNode/): FigJam shape with text
- [StampNode](https://developers.figma.com/docs/plugins/api/StampNode/): FigJam stamp
- [HighlightNode](https://developers.figma.com/docs/plugins/api/HighlightNode/): FigJam highlighter stroke
- [WashiTapeNode](https://developers.figma.com/docs/plugins/api/WashiTapeNode/): FigJam washi tape
- [CodeBlockNode](https://developers.figma.com/docs/plugins/api/CodeBlockNode/): FigJam code block
- [TableNode](https://developers.figma.com/docs/plugins/api/TableNode/): Table container
- [TableCellNode](https://developers.figma.com/docs/plugins/api/TableCellNode/): Table cell
- [EmbedNode](https://developers.figma.com/docs/plugins/api/EmbedNode/): Embedded content
- [LinkUnfurlNode](https://developers.figma.com/docs/plugins/api/LinkUnfurlNode/): Link preview/unfurl
- [MediaNode](https://developers.figma.com/docs/plugins/api/MediaNode/): Media (video/audio) content
- [SlideNode](https://developers.figma.com/docs/plugins/api/SlideNode/): Figma Slides slide
- [SlideRowNode](https://developers.figma.com/docs/plugins/api/SlideRowNode/): Figma Slides row
- [SlideGridNode](https://developers.figma.com/docs/plugins/api/SlideGridNode/): Figma Slides grid
- [InteractiveSlideElementNode](https://developers.figma.com/docs/plugins/api/InteractiveSlideElementNode/): Interactive slide element
- [TransformGroupNode](https://developers.figma.com/docs/plugins/api/TransformGroupNode/): Transform group
- [WidgetNode](https://developers.figma.com/docs/plugins/api/WidgetNode/): Widget instance on canvas
- [RemovedNode](https://developers.figma.com/docs/plugins/api/RemovedNode/): Placeholder for deleted nodes

## Shared Node Properties

- [Node Properties Overview](https://developers.figma.com/docs/plugins/api/node-properties/): Properties shared across multiple node types (fills, strokes, effects, layout, constraints, etc.)

## Data Types

- [Data Types Overview](https://developers.figma.com/docs/plugins/api/data-types/): Index of all data types (Paint, Effect, Variable, Transform, etc.)

## Optional

- [Plugin Updates](https://developers.figma.com/docs/plugins/updates/): Changelog for Plugin API updates
- [Samples](https://developers.figma.com/docs/plugins/samples/): Example plugin projects
- [Plugin Samples on GitHub](https://github.com/figma/plugin-samples): Official plugin sample repository