Widgets are custom, interactive objects you place in a Figma or FigJam file to extend functionality.
Widgets are written in a declarative style similar to React components, so developers can define what a widget looks like using a component-based API similar to React. If you have written React before you should feel right at home.
A widget is just a “pure function” that returns what gets rendered inside of a node. They can also have their widget run arbitrary code in response to various user interactions, such as click events. Widgets also have custom property menus similar to FigJam objects.
So far developers have built widgets for people to use together — like voting, polls, and on canvas games. You can see a full list of published widgets here.
Ready to make you first widget? Check out our developer docs to get started!
A simple counter widget that showcases <Frame>, <Text>, useSyncedState, usePropertyMenu, and onClick.
A widget that showcases the Input component to get user input directly on the canvas.
A widget that makes use of <Image> and figma.currentUser.photoUrl.
A simple table widget that showcases useSyncedMap to support concurrent updates to the widget and the key prop.
A multiplayer-safe counter widget that uses useSyncedMap and figma.activeUsers[0].sessionId
Demonstrating how to use a UI to send messages to a widget.
A simple widget for creating inline-editable annotations. It is published to the community.
A widget that demonstrates stickable and stickable host.
A widget that demonstrates how to listen for document change events in a widget context.
An template widget that opens an iframe whose contents is rendered using React. This mainly serves to demonstrate how to structure code for non-trivial widgets and their iframes.