Widgets Overview

Widgets are interactive objects that live directly on the Figma or FigJam canvas. Unlike plugins (which run as modal tools), widgets are persistent, collaborative objects that multiple users can interact with simultaneously.

What Makes Widgets Special

Widget Lifecycle

A widget goes through several phases:

1. Registration — The widget function is registered with widget.register()
2. Render — Figma calls your widget function to get the UI tree
3. Interaction — User clicks trigger state updates
4. Re-render — State changes trigger a new render cycle

Building a Widget

Widgets use a React-like API with special Figma primitives:

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

function CounterWidget() {
  const [count, setCount] = useSyncedState("count", 0);

  usePropertyMenu(
    [
      {
        itemType: "action",
        propertyName: "reset",
        tooltip: "Reset counter",
      },
    ],
    ({ propertyName }) => {
      if (propertyName === "reset") setCount(0);
    }
  );

  return (
    <AutoLayout
      direction="horizontal"
      spacing={12}
      padding={16}
      cornerRadius={12}
      fill="#FFFFFF"
      stroke="#E5E5E5"
    >
      <AutoLayout
        onClick={() => setCount(count - 1)}
        padding={{ horizontal: 12, vertical: 8 }}
        cornerRadius={8}
        fill="#F3F0FF"
        hoverStyle={{ fill: "#E8E0F0" }}
      >
        <Text fontSize={16} fontWeight={600}>−</Text>
      </AutoLayout>

      <Text fontSize={24} fontWeight={700} width={60} horizontalAlignText="center">
        {String(count)}
      </Text>

      <AutoLayout
        onClick={() => setCount(count + 1)}
        padding={{ horizontal: 12, vertical: 8 }}
        cornerRadius={8}
        fill="#A259FF"
        hoverStyle={{ fill: "#B370FF" }}
      >
        <Text fontSize={16} fontWeight={600} fill="#FFFFFF">+</Text>
      </AutoLayout>
    </AutoLayout>
  );
}

widget.register(CounterWidget);

Available Primitives

Key Hooks

const [value, setValue] = useSyncedState("myKey", "default");