useWidgetId
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
).
Signature
useWidgetId(): string
Remarks
caution
Note that figma.getNodeById
shouldn’t be called when rendering a widget (this will throw an error). Instead, this should be used inside event handlers where using the plugin API is allowed. See the Rendering Code for more details.
Usage Example
useWidgetId example
const { widget } = figma
const { Text, useWidgetId } = widget
function UseWidgetIdExample() {
const widgetId = useWidgetId()
return (
<Text
onClick={() => {
const widgetNode = figma.getNodeById(widgetId) as WidgetNode;
const clonedWidget = widgetNode.clone();
// Position the cloned widget beside this widget
widgetNode.parent!.appendChild(clonedWidget);
clonedWidget.x = widgetNode.x + widgetNode.width + 50;
clonedWidget.y = widgetNode.y;
}}
>
Make a copy
</Text>
)
}
widget.register(UseWidgetIdExample)