figma.widget
figma.widget
register(component: FunctionalWidget<any>): void
Used to register your widget. This is the main entry point to widgets.
This function expects a widget function that describes the widget and returns a Figma element (eg. one of the components AutoLayout, Frame, Text etc).
useWidgetId(): string
The useWidgetId hook gives you a way to reference the active widget node in event handlers like onClick. It returns a node id which can be used to retrieve and identify the active WidgetNode via the plugin API (eg. figma.getNodeById).
useSyncedState<T>(name: string, defaultValue: T | (() => T)): [T, (newValue: T | ((currValue: T) => T)) => void]
The useSyncedState hook lets you declare that your widget relies on some state. You give useSyncedState a storage key and a default value and it returns the current value stored and a function to update the value.
useSyncedMap<T>(name: string): SyncedMap<T>
The useSyncedMap hook works similarly to useSyncedState, but each value within the map is updated last-writer-wins, instead of the entire map being overwritten last-writer-wins.
usePropertyMenu(items: WidgetPropertyMenuItem[], onChange: (event: WidgetPropertyEvent) => void | Promise<void>): void
The usePropertyMenu hook lets you specify the property menu to show when the widget is selected (See image below).
useEffect(effect: () => (() => void) | void): void
The useEffect hook can be useful for running code that should run anytime the state of a widget changes or a widget is interacted with. You can use it to do data fetching when a component mounts (by using it with waitForTask ) or keeping state in sync between an iframe and the widget.
useStickable(onStuckStatusChanged?: (e: WidgetStuckEvent) => void | Promise<void>): void
This API is only available in FigJam
useStickable is a hook that makes your widget stick to other nodes when dragged over them. This behavior is similar to how stamp nodes work in Figma.
useStickableHost(onAttachmentsChanged?: (e: WidgetAttachedStickablesChangedEvent) => void | Promise<void>): void
This API is only available in FigJam
useStickableHost lets your widget run a callback when a stickable is added or removed to your widget. By default all widgets are already stickable hosts so you don't have to call this if you just want stamps to stick to your widget.
waitForTask(task: Promise<any>): void
The waitForTask function is useful for doing asynchronous work (eg. data fetching) in useEffect. It takes a promise and keeps the widget alive until the promise is resolved (or if there’s an explicit call to figma.closePlugin).
colorMapToOptions(colorPalette: { [key: string]: string }): WidgetPropertyMenuColorSelectorOption[]
This API is only available in FigJam
The colorMapToOptions takes in a ColorPalette, a map from color names to values, and returns WidgetPropertyMenuColorSelectorOption[]. This helper function enables developers to use figma.constants.colors.*, official FigJam color palettes, in the PropertyMenu.