Platform Overview

The Figma developer platform gives you multiple ways to extend and integrate with Figma. Choose the right tool for your use case.

Platform Components

Plugins
Widgets
REST API
Webhooks

Plugins run inside the Figma editor and can manipulate the document, create UI panels, and respond to user actions.

Best for: Custom tools, importers/exporters, lint rules, design automations.

// A simple plugin that renames the selected node
figma.currentPage.selection.forEach(node => {
  node.name = "Renamed by Plugin";
});
figma.closePlugin("Done!");

Widgets are interactive objects that live directly on the Figma canvas. They have their own state and can respond to clicks.

Best for: Voting tools, sticky notes, status trackers, embedded data displays.

const { widget } = figma;
const { Text, AutoLayout, useSyncedState } = widget;

function VoteWidget() {
  const [count, setCount] = useSyncedState("count", 0);
  return (
    <AutoLayout onClick={() => setCount(count + 1)}>
      <Text>{count} votes</Text>
    </AutoLayout>
  );
}
widget.register(VoteWidget);

The REST API lets you read and write Figma files programmatically from any server or script.

Best for: CI/CD pipelines, asset export, design token sync, reporting dashboards.

curl -H "X-Figma-Token: $TOKEN" \
  "https://api.figma.com/v1/files/FILE_KEY"

Choosing the Right Approach

Extend the editor?

Use Plugins for in-editor tools, or Widgets for canvas-based interactivity.

Build external integrations?

Use the REST API for data access and the Webhooks for real-time events.

Architecture Overview

The Figma developer ecosystem is built on these layers:

Layer	Technology	Access
Plugin API	TypeScript, runs in sandbox	Editor context
Widget API	React-like JSX, declarative	Canvas context
REST API	HTTP/JSON	Server-side
Webhooks	HTTP callbacks	Server-side
Code Connect	CLI + config files	Local development

Plugins and widgets run client-side in a sandboxed environment within Figma. The REST API and webhooks are server-side integrations that require authentication.

Key Concepts

Every Figma file is structured as a tree of nodes. Understanding the node hierarchy is essential for working with any part of the platform:

Document — The root node
Page — Top-level canvas containers
Frame — Layout containers (like div in HTML)
Component — Reusable design elements
Instance — A linked copy of a component
Text, Rectangle, Ellipse — Primitive nodes

Start with the Quickstart to build your first plugin, or jump to the REST API overview if you’re building a server-side integration.