Skip to main content
Question

Get relative position of plugin UI window to main Figma window


c5inco

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.

11 replies

Gleb
  • Power Member
  • 4706 replies
  • February 10, 2021

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. 😬


c5inco
  • Author
  • 7 replies
  • February 10, 2021

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)

c5inco
  • Author
  • 7 replies
  • February 10, 2021

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.


Karl_Koch
  • 14 replies
  • April 22, 2021

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.


c5inco
  • Author
  • 7 replies
  • April 23, 2021

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


Karl_Koch
  • 14 replies
  • April 30, 2021

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 😊.


Andrei_Patriciu

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);

Chris_Sinco
  • New Member
  • 3 replies
  • November 4, 2021

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.


lepdev
  • 57 replies
  • May 18, 2022

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.


shijia.me
  • New Member
  • 14 replies
  • July 12, 2022

I have the same question


Bryan_Wong

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?


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings