Get relative position of plugin UI window to main Figma window

Is it possible to get the position of custom plugin UI windows relative to the main Figma window?

I’m working on a drag-and-drop plugin, and calculating the right offset relative to the position of the plugin UI itself against the canvas viewport and the main Figma window would be really helpful to more precisely place the object on dragEnd.

I think also in general, outside of drag-and-drop scenarios, this would be useful to be able to query from the API.

I know that you can get Figma window size from the plugin UI with the following:

let width = window.outerWidth
let height = window.outerHeight

So maybe look into some window properties? If that’s not going to work, I think simply placing objects in the center of the screen would be an ok solution. :grimacing:

Yes, I did look at window properties - I think the ones I want to access are blocked for security/cross-site reasons? This is an error I typically see when looking through the property tree for window from the console:

DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at invokeGetter (<anonymous>:1:142)

At the moment, I just place objects always at 64, 64 (and take into consideration zoom level). It works fine for now, but would be ideal to drop an object at the dragEnd position, especially when one is working on a larger canvas.

I think you might be able to capture the plug-in window using the following:

window.YOUR-FIGMA-NAME_plugins_activated

Then you could look to capture its x/y position potentially.

Is that a known/documented object? Also, is YOUR_FIGMA_NAME the username? Not sure how that would work in a distributed plugin.

Not documented that I know but a standard JavaScript object for detecting window events.

The Figma name is because a distributed plugin is under your name. That can be replaced by the organisation name if it’s an org that distributes and should still work :blush:.

If you want to center the UI with the Figma viewport, you have to take into account the UI size, the viewport size, and apparently the zoom level of the viewport:

const zoom = figma.viewport.zoom;
let w = 800
let h = 700
let centerX = figma.viewport.center.x-(w/zoom)/2;
let	centerY = figma.viewport.center.y-(h/zoom)/2;
const options = {"position":{"x":centerX, "y":centerY}, width:w, height:h}
figma.showUI(__html__, options);
figma.ui.resize(w, h);

Thanks - I’m not having an issue centering the UI. I’m trying to get the top X/Y of the custom Figma UI frame so that I can drag an element with it to the canvas.

1 Like

not sure to understand : do you mean the name in manifest and what is “_plugins_activated” a suffix ?
let say the name is “GO Plugin” should I use window.GO_Plugin

I’m interested for dev and prod.

I have the same question

Wanted to see if this issue got resolved. When I drop an element outside the plugin UI it uses coordinates relative to the plugin, not the overall browser window. However, the Figma API expects coordinates that are relative to the browser view. Any ideas why?