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 | Promise<void>): void

Parameters

Parameter	Description
onStuckStatusChanged	An 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);

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.