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.

Thanks @tank666, I appreciate you digging in! 😃 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?

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.