Skip to main content

useStickable

info

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.

Signature

useStickable(onStuckStatusChanged?: (e: WidgetStuckEvent) => void): void | Promise<void>

Parameters

ParameterDescription
onStuckStatusChangedAn optional callback that is called whenever a widget is stuck or removed from a node. It takes a WidgetStuckEvent as an argument.

Remarks

Basic Usage

useStickable without callback
const { useStickable, Rectangle } = figma.widget;
function Widget() {
// This widget sticks to other nodes now!
useStickable();
return <Rectangle width={100} height={100} fill="#F00" />;
}
figma.widget.register(Widget);

Gif of widget sticking to a sticky note

Example

This example changes the color of the widget depending on what type of node it is stuck to.

useStickable with callback
const { useStickable, Rectangle, useWidgetId, useSyncedState } = figma.widget;
function Widget() {
const widgetId = useWidgetId();
const [color, setColor] = useSyncedState("color", "#000");

// This widget sticks to other nodes now!
useStickable(() => {
const widget = figma.getNodeById(widgetId);
const { stuckTo } = widget;
if (!stuckTo) {
// Set the color to black if the widget isn't stuck to anything.
setColor("#000");
return;
}

switch (stuckTo.type) {
case "STICKY":
// Make the widget red if we are attacked to a sticky
setColor("#F00");
return;
case "SHAPE_WITH_TEXT":
// Make the widget green if we are attached to a shape with text
setColor("#0F0");
return;
default:
// If we are attached to anything else make the widget blue
setColor("#00F");
return;
}
});

return <Rectangle width={100} height={100} fill={color} />;
}
figma.widget.register(Widget);

Other Rules

  • In FigJam a node is either a stickable or a stickable host, but never both.
  • You cannot call useStickable and useStickableHost in the same render of a widget; it can only be one or the other.
  • By default all widgets are stickable hosts and can let stamps and other stickables stick to them.