Plugin window questions (docking and window size)

This is a question for plugin developers…

Is there a min/max width and height for the dimensions of a plugin window? For example is it possible to make the plugin window very narrow (like 40 pixels for example), and make its height fill the height of the Figma application viewport?

Also, is it possible to “dock” the plugin window to either side (right, left, top, or bottom) of the Figma UI, so that it’s basically attached to one of these sides.

3 Likes

width: The width of the UI. Defaults to 300. Minimum is 70. Can be changed later using Figma.ui.resize(width, height)

height: The height of the UI. Defaults to 200. Minimum is 0. Can be changed later using Figma.ui.resize(width, height)
showUI | Plugin API

Yes you can. Just provide the required parameters in the above method.

You can specify the plugin’s modal window position in the above method, but not dock because Figma doesn’t natively have this feature.

2 Likes

Thanks for the quick response!

Re: specifying the plugin’s modal window position, can it be specified in a relative manner, or only in an absolute manner. In other words:

  1. Relative: 250px from the the right side of the Figma application viewport, and 25px from the top of the Figma application viewport.

  2. Absolute: 500px to the right, and 25px down, from the top left corner of the application viewport.

Also, can a plugin poll the current Figma application viewport’s dimensions? And if so, reposition itself accordingly?

position: The position of the UI window. Defaults to the last position of the iframe or the center of the viewport. If specified, expects an X/Y coordinate in the canvas space (i.e matches x/y values returned by <PluginNode>.x and <PluginNode>.y)

Yes, sure. You can check the viewport and reposition the plugin window. But I believe that the user himself should decide where the plugin window should be.

See developer documentation:

Got it.

Well, it depends on what the plugin does :slight_smile: I have an idea for a plugin but in order for it to work well and have a good UX, it needs to behave more like a toolbar. That’s why I was asking about it being very narrow, and “docked” to a side of the Figma viewport.

But this is promising. I think the only limitation might be that only one plugin can run at a time. Hopefully Figma can take away that limitation, and allow maybe a few plugins to run at the same time (at least two lol).

Docking will be “possible” if you do it manually like you described. All we’re waiting for is for figma.ui.reposition() to officially become available and we’re good. (This will also allow for left edge window resizing.)

I’ve actually had everything prepared for docking in my plugin’s current dev version for a while, just waiting for this function. :stuck_out_tongue:

The next step is to let us remove the plugin window’s shadow and give it a panel-like border, so that it looks like a docked panel. :stuck_out_tongue:

1 Like

Cool, good to see other folks wishing for a bit more versatility in how a plugin integrates with the rest of the Figma UI. Is your plugin out yet (the undocking version)? What does it do?

Hey, it’s this one: Generator | Figma Community. Lets you work with colors using a node graph.

2 Likes

I found a way to dock a plugin using the reposition api. See it in use in my Plugin for Translation managment - Parrot.
Sadly there is a bug in the reposition function in Figma and there is no easy and robust way to get the xy position of the plugin atm - see Retrieve plugin UI position? and Get relative position of plugin UI window to main Figma window
So the solution i come up with involves a lot of little tricks. I am currently cleaning up the code and plan to publish it as a little library soon.

1 Like

@parrot Did you ever end up sharing your code for docking anywhere? Curious to see how it works.