New Updates for the UI Editor


#1

Hey Developers!

We’d like to announce some updates to the UI Editor that make it easier to use and also add new capabilities:

  • Added the ability to easily show/hide all UI - just click the eyeball in the top right
  • Added a new UI ribbon tab that appears when you select UI objects under StarterGui
  • Added easy creation buttons for common UI objects on the UI ribbon tab - try dragging and dropping them into the view!
  • Additionally, you can now click on any UI in view and start manipulating it - no need to find the UI Editor button and toggle it
  • The UI Editor button now takes you to the new UI ribbon tab, and is placed in the Insert category of the HOME ribbon tab
  • Added a shortcut to the Device Emulator feature in the top right, for easy access while testing UI

Check out the UI Editor in action in the following video:

Happy Developing!

UPDATE:
As we make improvements to Studio tools, our goal is to make the development experience better for everyone, whether you are just starting out or have been developing for many years. However for features like this with far reaching aspects, it’s sometimes difficult to predict all the possibilities. Thank You for those of you who are bringing forth your workflows and letting us know any issues you are experiencing. If you’ve already posted, great! We’re listening and will respond in those threads. If not, please try the new updates with your personalized setup and let us know what you think below!


Do not automatically open the UI tab when I click on StarterGui or some GuiObject descendant
#2

I think that toggling the UI editor is actually more efficient to me, and other developers. For instance, @asimo3089 uses UI elements to alter how his game looks. He cannot build because of the new editor capturing his clicks.


Other than that, this is an awesome feature. I know I will be using this when I make UI elements in my games.


#3

Yes!!!


#4

Does this tool use scale (as opposed to offset) for sizing/positioning? If it doesn’t (or doesn’t provide an option to) then it will be essentially useless to me.


#5

Having the ability to just click on any UI element to edit it feels like it could easily disrupt the workflow or flat out stop it for people who use full-screen GUIs. Just a thought.


#6

This feature has allowed developers to fast track the creation process and to produce immensely professional and aesthetically pleasing GUIs and so any improvements are welcome, however as pointed out by @AlreadyPro, there are some issues that could be resolved before introducing new features into this system.

Nevertheless, I really like this new update.


#7

This is really annoying to me in studio :frowning:

If I ever accidentally click on one of the GUI elements and move it a few pixels, then I either have to try and remember it’s original position or undo whatever I’ve done since I accidentally moved it.

I really don’t see why this has to be forced, at least have a toggleable central on/off switch that stops it coming up when you click on gui elements, and have it just work when you click the UI button on the Home tab.

(BUT I really like the editor itself.)


#8

Surely this is a cool feature, but I still find doing it manually in properties helps me create UI more accurately.


#9

Not clicking through to the 3D world under the UI could present some problems for people with full screen UIs. This better be toggleable.


#10

There are a ton of usability improvements and helpful new features for working with GUI, which is awesome! I’m especially liking the visibility and emulator toggles, those are incredible to have fast access too.

The new UI Ribbon and it automatically selecting seems like it doesn’t achieve what it was intended to achieve. The new tab is actually quite helpful if my intention is to insert new UI objects, but 90% of the time of working with GUI elements the main goal is to tweak; not to insert new objects. This makes the new tab have a very noticeable negative impact on my building workflow, as I have to re-configure my ribbon bar and plugins every time I select a UI element.

The behavior of the old UI editor, where developers could manually toggle the editor, was great and seems like it could fix these workflow issues. Simple toggles for behavior like “Automatically select the UI Ribbon Tab upon selecting a GUI object in the Explorer” would greatly help me to get back to the same level of productivity I had before this change was introduced.


#11

UI Editor doesn’t seem to play nice with UI constraints. Following example is two buttons in a UIListLayout:

Also, hard to see padding markers when they’re covered by handles. Would be nice if padding markers were shifted out of the way

image

Edit: Yeah, padding markers are obscured on pretty much every UI element I have in my game


#12

Something weird is happening here:


#13

Yes please! This is going to be super useful!


#14

I should be able to hold shift/alt/etc to ignore the snapping, and snapping should be available when I’m resizing elements (currently only available for dragging).

Also, sometimes UI element lags behind? Repro.rbxl (16.8 KB)


#15

I understand that there’ll be bugs since this is a brand new update that hasn’t totally been fleshed out yet, but so far I absolutely love this. As someone that primarily designed UI for the majority of their time on Roblox and still interacts with them on a daily basis, this is a major improvement. This is an amazing quality of life update for us developers :+1:


#16

It’d be nice if we had access to buttons for anchoring objects (either just changing their AnchorPoint or anchoring them to a point on the screen).

Additionally we should be able to switch between using scale and offset. Even if it’s just a converter for already-transformed elements, so we can make objects that scale, then that would give the functionality needed.

I really like how it is actually becoming viable now, though. Good work.


#17

I want to turn it off… please let me turn it off… I can’t see anything… my entire world is just yellow boxes, white handles and borders now…


#18

For someone who never uses the UI editor, such as myself, It’s rather frustrating how you can just drag them freely when you’d rather not have the functionality enabled at all. But since this tool is obviously useful to the majority but not everyone, please consider adding a toggle option.

Although, the UI tab will come in handy.


#19

Absolutely love the features in this new update!


#20

This has broken the Class Change plugin I use when trying to change the class of a GUI object to another class: https://www.roblox.com/library/894126686/Class-Change-by-tktech

Every time I try to click on the plugin’s interface while a GUI object is selected, the GUI object gets deselected.

Hopefully this new selection behavior can be made optional. I have no use for this behavior, right now it’s just getting in my way - I prefer to just use the explorer and properties menus to edit my UI. I appreciate how it gives new developers an easy way to edit simple UI, but it doesn’t yet have all of the tools (such as scaling options) to create serious UI for a game that will work on all screen sizes.

Edit: I’m able to use the plugin once I disable the UI editor. However, the editor probably shouldn’t be interfering with plugin usage regardless.