How to create shapes near a widget? Or just get the x,y position of the widget?

Plugin and Widget API
1

I’m creating a FigJam widget with functionality that creates shapes on the board, but I can’t find a way for the shape to appear in a position that’s relative to the widget. Does anyone know how to create shapes where their position is relative? All I’ve been able to find is how to set the x,y coordinates respective to the board, but not the widget.

2

Get the widget’s position using the x, y, relativeTransform or absoluteTransform properties, and based on the values of these properties, change the position of your shapes.

3

Thanks @tank666, I appreciate you digging in! :smiley: I’ve looked at these docs this week, but I can’t get past useWidgetId. The big issue I’ve got is that I’m new to widget dev and the examples given on that page unfortunately don’t work as some functionality has been deprecated.

I believe I have my widget’s id, though I had to get it using useWidgetNodeId() instead of useWidgetId(). The hurdle I’m facing now is that I seem to be struggling to actually get the WidgetNode object. When I tried the code in the example, using figma.getNodeById(), I learned that it’s deprecated and I’m supposed to use figma.getNodeByIdAsync(). When I use that function it returns a Promise<BaseNode | null> and errors when I try to set it as WidgetNode, like this:
const widgetNode = figma.getNodeByIdAsync(widgetNodeId) as WidgetNode

I did get my code to run by adding as unkown first with this line:
const widgetNode = figma.getNodeByIdAsync(widgetNodeId) as unknown as WidgetNode
… but it doesn’t seem to work as I expect it to. When I follow that line with this one:
figma.notify(widgetNode.x + "," + widgetNode.y)
… I then see a toast pop up with “undefined,undefined”

TL;DR: Does anyone know of a proper way to convert a <Promise<BaseNode | null> to a WidgetNode?

4

Okay, I’m still curious if I can create a variable to properly hold the resulting WidgetNode, but I did get a suggestion from the Friends of Figma Discord server that wound up solving the crux of my issue with this approach:

const widgetNodeId = useWidgetNodeId()

figma.getNodeByIdAsync(widgetNodeId).then((node) => {
   shape.x = node.x + node.width + notePadding + (shapeCount - (Math.trunc(shapeCount/notesInRow) * notesInRow)) * (noteWidth + notePadding)
   shape.y = node.y + Math.trunc(shapeCount/notesInRow) * (noteHeight + notePadding)
   console.log("widget x,y,width:", node.x, node.y, node.width)
})

I have some local variables (shape, shapeCount, notesInRow, notePadding, noteWidth, and noteHeight) in there. I was trying to generate shapes that would land in a grid that’s notesInRow columns AND that grid would appear relative to the placement of the widget. This allows for multiple widgets to be on a board generating grids of shapes and not overlap.

5

Both of these hooks do the same thing. Only Figma hasn’t mentioned the first one in the developer docs yet.

You need to wait until the async function to complete before accessing the node’s properties.

You don’t need to convert anything, just wait for the promise to be resolved or rejected.

One way you mentioned here:

Another way is to use async and await:

// Inside an async function
let widgetNode = await figma.getNodeByIdAsync(widgetNodeId);

Please learn how to work with asynchronous functions and promises.