Improve the built-in UI Editor

As a Roblox developer, it is currently too hard to use the built in UI editor for fine detail and extensive development.

The UI editor that is built into studio is currently only useful for basic GUI design and manipulation. It allows the position and sizing of GUIs, and the editing of text. All three of these features are helpful, however, they are limited in a multitude of ways. The inability to edit more essential parts of an interface (Image objects and their properties, background/text colors, fonts, etc.) without the use of the properties panel interrupts the workflow quite a bit, and leads to situations where it is much easier to simply use the properties panel. In addition to this, the sizing and positioning of elements, while being useful due to the snapping feature, does not work for fine manipulation and must be both double checked in the properties window to ensure accuracy and be further edited in the properties window for pixel-perfect precision (offsetting an exact amount away from another object or the edge, for example, as opposed to simply going for it).

These lack of features and issues combine to make a situation wherein the properties window or an external GUI creation suite is preferable to the built in editor. There are a few options to fix this.

The preferable one would be to simply add the ability to edit more properties from within the editor and to make the movements themselves more precise. The ideal scenario would be the ability to adjust everything about a GUI from within this editor, as it should be a reasonable alternative to just using the properties panel for GUI creation. There’s no clear cut way to do this, but a more complicated interface may be in order to do so.

The other option is to simply add a method for ‘hooking’ into the editor and allow users to add on to it. This would be wonderful as its own feature, as it would resolve any future issues people had with the editor as well, but it by itself would be helpful to the current lackluster quality of the UI Editor.

A must, however, is changing the accuracy of the snapping and the way GUIs are selected. It is currently all but impossible to use the UI editor for nested GUI objects, as it always selects the GUI directly under the mouse, which is not ideal. Sometimes you want to select what’s under the text label, you feel me?

As for the snapping… It’s just not very good. There’s not much to say: The edges of elements often overlap when they’re snapped to, and when you snap to the edge of the screen there’s a chance you’ll get something slightly off. I got a position of -0 once.

Oh also this thing isn’t really documented on the wiki so that’s awkward because it’s not really abundantly clear what you can and cannot do with it. :man_shrugging:

24 Likes

Support.

As a UI designer who uses Roblox Studio almost every day, I never use this feature.
I used it once, went ‘eugh’ and went back to my previous workflow.

It does have some useful features (e.g. selecting stuff via the viewport, not the explorer), but that also requires the actual UI editor that I didn’t like in the first place. It’d be great if we could have a keybind (similar to alt + click for models) that allows you to select UI elements in the viewport – but that’s a different feature request for another day.

7 Likes

i think its fine

1 Like

Isn’t this something that a lua widget would be perfect for?

It would be nice to have, but there’s no reason why someone can’t just make a plugin for the same functionality. I’d rather development time be spent on stuff we can’t make ourselves.

3 Likes

It would be awesome to have a UI editor like Unreal Engine 4 where you can drag things around with the mouse, etc.

9 Likes

Thus the second option. I would love to make a plugin for this, but there’s not currently a way to accurately both have the UI editor selected (allowing for the selection of GUIs in an accurate manner, which is awful to do via Lua due to the way ZIndex works) and to have another plugin working.

6 Likes