Skip to content

FigJam widget code examples & starter projects using the FigJam Widget API

Notifications You must be signed in to change notification settings

figma/widget-samples

Repository files navigation

Figma and FigJam Widget Samples

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!

Widgets

Widget Counter

A simple counter widget that showcases <Frame>, <Text>, useSyncedState, usePropertyMenu, and onClick.

Counter Widget

Widget Notepad

A widget that showcases the Input component to get user input directly on the canvas.

Notepad Widget

Widget UserBadge

A widget that makes use of <Image> and figma.currentUser.photoUrl.

UserBadge Widget

Widget Table

A simple table widget that showcases useSyncedMap to support concurrent updates to the widget and the key prop.

Table Widget

Widget Multiplayer Counter

A multiplayer-safe counter widget that uses useSyncedMap and figma.activeUsers[0].sessionId

Multiplayer Counter Widget

Widget Toast

Demonstrating how to use a UI to send messages to a widget.

Toast Widget

Widget Simple Annotate

A simple widget for creating inline-editable annotations. It is published to the community.

Simple Annotate widget usage video

Widget Stickables

A widget that demonstrates stickable and stickable host.

Stickables widget usage video

Widget Document Change

A widget that demonstrates how to listen for document change events in a widget context.

create-widget-app

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.