DOCSEARCHbyAlgolia
Submit Docs

Figma Plugin API

website·Indexed 19 days ago

https://developers.figma.com/docs/plugins/

Complete documentation for building Figma and FigJam plugins using JavaScript and HTML to extend editor functionality.

Tokens
754
Snippets
1
Records
5
Agent score
50%

What's inside Figma Plugin API

  1. Understand the Figma Plugin execution environment

    Figma plugins run in a sandboxed environment divided into two parts: the main thread and the UI iframe. The main thread has direct access to the Figma document via the figma global object. The optional UI runs in an iframe with access to standard browser APIs. Communication between the main thread and the UI is handled via asynchronous message passing using figma.ui.postMessage() and figma.ui.onmessage.

  2. Handle Figma Plugin API constraints and requirements

    When developing Figma plugins, be aware of the following critical constraints:

    • File Access: Plugins can only access the currently open file.
    • Dynamic Page Loading: Pages are loaded dynamically; you must use asynchronous APIs to access any page other than the current one.
    • Font Loading: Before modifying text, external fonts must be loaded using the loadFontAsync() method.
    • Libraries: Styles and components from libraries are only accessible if they have been imported into the current file.
    // Example: Loading a font before modifying text
await figma.loadFontAsync({ family: "Inter", style: "Regular" });

  3. Navigate and modify the Figma document node tree

    Every Figma file is structured as a tree of nodes rooted at a DocumentNode. Plugins interact with the file by traversing this tree to read or modify design content. Each node has a specific type (e.g., FrameNode, TextNode, RectangleNode) and associated properties such as fills, strokes, layout, and text content.

  4. Identify Figma Plugin global objects

    The Figma Plugin API provides several global objects to extend editor functionality:

    • figma: The primary entry point for accessing the document, viewport, and core API methods.
    • figma.ui: Manages the UI iframe and communication.
    • figma.util: Provides utility functions for math and color conversion.
    • figma.constants: Contains shared constant values.
    • figma.viewport: Controls zoom, scroll, and focus.
    • figma.clientStorage: Provides persistent local storage for the plugin.
    • figma.variables: API for managing design tokens and variables.
    • figma.codegen: Specific API for building code generation plugins in Dev Mode.

  5. Identify Figma Plugin Node Types

    Figma plugins interact with a document tree composed of various node types. Common nodes include:

    • Root & Containers: DocumentNode (root), PageNode, FrameNode (auto-layout), GroupNode, SectionNode.
    • Components: ComponentNode (definition), ComponentSetNode (variants), InstanceNode (instance).
    • Basic Shapes & Text: TextNode, TextPathNode, RectangleNode, EllipseNode, PolygonNode, StarNode, LineNode, VectorNode.
    • Advanced Nodes: BooleanOperationNode (union/subtract), SliceNode (export regions), TransformGroupNode.
    • FigJam Specific: ConnectorNode, StickyNode, ShapeWithTextNode, StampNode, HighlightNode, WashiTapeNode, CodeBlockNode.
    • Tables & Media: TableNode, TableCellNode, EmbedNode, LinkUnfurlNode, MediaNode.
    • Figma Slides: SlideNode, SlideRowNode, SlideGridNode, InteractiveSlideElementNode.
    • Other: WidgetNode (canvas widgets), RemovedNode (deleted node placeholders).