Widgets are custom, interactive FigJam objects you place in a FigJam file to extend FigJam's 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 other 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 opening an iframe to get additional user input and the useEffect hook.
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
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.