Figma and FigJam Widgets

Widgets are custom interactive objects that run in Figma design and FigJam files.

You can create standalone widgets that don’t need to anything else to run, such as our sample counter widget. In this situation, you can use the Widget API without the Plugin API.

You can also create widgets that pull data from external resources or applications, or interact with and edit other layers in the file. For those types of widgets, you’ll need to use both the Widget API ↓ and the Plugin API ↓.

In this guide we’ll walk you through a few things to consider when it comes to Figma design and FigJam files.

tip

📝 Note: Both the Plugin and Widget APIs treat Figma design and FigJam files as different editor types. For your widget to work, you need to tell Figma which editor types your widget can run in. Setting editor type →

The Widget API allows you to build a widget node that responds to user interaction. Build the widget using components, then manage its state through functions and hooks. How widgets run →

You can access a majority of the Widget API in both editor types. This includes components and their supported properties. There are still a few things to consider when building your widget.

Stickable interactions [FigJam only]

One aspect that's unique to FigJam files, and isn’t supported in design files, is stickable hooks. Stickable widgets can attach to other nodes, like stamps. Stickable host widgets allow you to attach other stickables to it.

If you set the editorType to "figma" only, or run the widget in a Figma design file, you can’t access either of these hooks:

Dark mode [Figma design only]

Figma designs supports both light and dark themes. FigJam only supports a light theme.

If you plan to use figma.showUI to show additional UI, you can enable the themeColors option. This allows you to use CSS variables that contain theme-specific colors. Your iframe UI will then adapt to the user’s current theme.

For the widget itself, you still need to assign explicit fill, stroke, and opacity values to components.

Plugin API

The Plugin API allows you to view, create, and edit the contents of Figma design and FigJam files.

If you want your widget to open an iframe, or interact with other layers in the file, you’ll need to use the Plugin API.

The editor type impacts which objects, nodes, and functions are available in the Plugin API. Explore what’s supported in the Plugin API →