Studio Design Refresh - Docking Overhaul & Ribbon Upgrade

Hello developers,

We want to make creation using Roblox Studio even easier and more adaptive to each creator’s unique workflow. We’re excited to share some of the improvements coming to the default Studio experience which will begin rolling out… starting today!

We’re introducing two new Studio design updates today which will unlock new customization options and give Studio a refreshing and intuitive new look! We hope these changes allow you to accelerate and customize your workflows to your liking.

This will be a slow rollout starting with just 5% of Roblox Studio users today. The new Studio design updates will be rolled out to more developers in the coming weeks as we receive and incorporate your feedback.

Upcoming Studio Design Refreshes

There are two major releases which will refresh the look, feel, and responsiveness of Studio this year. As the first step, we are launching the new Studio Ribbon and Docking Overhaul. Later on, we will launch new icons and high DPI capabilities.

  • Releasing This Week: Docking Overhaul, Ribbon Upgrade
  • Coming Late 2022: New Icons, High DPI Capabilities

Here’s a quick look at the updates that are coming in this release:

Docking Overhaul

We’ve made many improvements with regards to docking, including an indicator widget as docking marker, a new Auto Hide feature, easier more granular docking and grouping options, side-by-side capabilities, and more.

Using these new docking features, we hope you’re able to easily customize your Studio layout to your liking. Everyone’s workflow is a little bit different, so make good use of docking to focus on what’s important to you by hiding or grouping any unnecessary distractions.

GIF showing the user interface for docking in Studio. There are different docking options and the GIF shows someone moving the window around to be docked in different ways

New docking experience that allows you customize your Studio layout

You will be able to dock multiple scripting editor windows in Studio, which makes comparing and inspecting the code much easier than before.

GIF showing how you can grab a scripting tab and move it to dock next to another scripting tab

Side-by-side scripting that helps you compare and inspect code easily

Ribbon Upgrade

We’ve upgraded the Ribbon display to improve usability with a more adaptive and responsive toolbar. The upgraded Ribbon toolbar is more responsive to your needs and will adapt better to different screen sizes, includes gallery views, and allows for high DPI compliance.

GIF showing more responsive and adaptive new Ribbon bar collapsing icons down as the Studio window shrinks

New Ribbon bar experience that is more responsive and adaptive

Please note: As part of this release, we removed the Devices and UI Visibility toggles from the tab bar. You can still access them from the Ribbon bar under Test and View, or add them to your Quick Action bar for similar support.



Huge thanks to @iriszh @RobloxTuesdays0611 @ElephantMesh @PoshKiwi @dougawhole @dawnpatrolob @aloe_lujah @GeneralRelish for making this possible, and many of you from the community who have shared incredibly valuable feedback along the way. Let’s make Studio better together!

538 Likes

This topic was automatically opened after 4 minutes.

I am begging the Studio team to not leave it at just a “UI Visibility” toggle but to also be able to entirely disable the UI Editor feature, I hate it so much and don’t want it to exist. A Studio design overhaul feels like a good time to revisit this with the features team so we can have both the button available and the underlying technical parts addressed to remove it.

189 Likes

This is cool!! I think this will generate a very nice experience in Studio, as I will be able to multi script easily!! Thank you so much for this

20 Likes

I cant thank you all enough for this - studio looks super bad and I’m extremely excited to have these updates!

17 Likes

This looks great! I’m so excited for the new docking features especially. I get frustrated at the current docking system a lot, and I hope this fixes a lot of my current issues!

Edit: I’m also SUPER excited for the new icons!!! A lot of people including me think they could use a refresh. It would be nice if instead of forcing the new icons, there was an option to change icon themes in settings and revert to the old ones. Maybe you could have your own custom themes like vanilla without replacing the icons files or using a mod manager,

30 Likes

This is cool and somewhat useful but, can we have an option to disable actual tabs / buttons in the top bar? The majority tabs in there I don’t a use and it’s takes up a lot of space.

For example — It’s still an issue that the visual gui editor or whatever it’s called keeps annoying the hell out of me when I touch any gui. There’s no way for me to disable it. It’s baked in. Even when I don’t want to use it.

Seriously hurts my workflow and my brain…

25 Likes

This looks awesome! To clarify, has the docking behavior changed substantially, if at all? Or is it purely a visual overhaul to better indicate where widgets will dock?

10 Likes

Been waiting a long time to see the release of this, excited for new docking and panel hiding behavior. Hopefully the overabundance of widgets I’m subjected to will be more manageable.

Also want to bring up this issue again, now is a good time to do a pass over all built in widgets to reduce their minimum sizes so we can better control our layouts: Reduce minimum height for most built in widgets

Does this address any issues with the plugin bar perchance? (i.e. icons randomly being sized up or down, in random order, etc.)

Have issues with the Quick Access Bar occasionally losing user customization after updates been fixed? That’s a big reason why I stopped using it months ago. With the device emulator and UI toggle being removed from the tab bar, having this fixed is more important than before. Even worth considering if these should be in the bar by default.

20 Likes

Nice! Does this mean that Roblox has upgraded to a newer version of QT too, which should support high DPI screens, or was this all built in house?

20 Likes

Sounds great!

those docking features were 100% inspired by Windows 11s (think it has UI that shows up to dock windows when dragging, idk since I’m a Windows 10 user)

In all seriousness, I’ll probably only use the script editor docking. The new ribbon toolbar is pretty cool though!

13 Likes

Can we get the ability to customise the Ribbon bar like you can in other programs such as Microsoft Office

Technically, we already can customise it but its not possible to move plugin toolbars around, and I’d rather have a widget in Studio that officially supports doing this.

Currently, if we modify it using RobloxStudioRibbon.xml we cant do the following:

  • Its not possible to move any Plugin Toolbars, both internal and developer ones
  • Discovering the internal QtAction IDs requires doing a difficult process of using the registry and other roundabout ways of getting internal action IDs
  • Any customisations to the ribbon are lost as soon as Studio is updated
  • Removing the Script and Plugins tabs instantly crashes Studio.

Please make it an official feature

13 Likes

Actually the docking widget is the same as in popular IDEs like Visual Studio. This is fairly industry standard.

13 Likes

Really looking forward to this! And it will be really cool to use Script Editor!

Definitely look forward to the new icons too!

8 Likes

This is a great change but it’d be nice to have the UI visibility button back in the viewport. As someone who works with huge teams everyday and this includes UI designers. Having this toggle was really useful when I am working on a build and I can just take a fraction of a second to not have UI move across my screen. Now I’d need to get out of what I am working on just to disable something. Please, bring it back! It was such a great placement for it.

10 Likes

As noted in the post, if you’re someone who needs the Device Emulator or UI Visibility Toggle frequently you can add it to the quick access bar for similar ease of access (You can even add buttons from community plugins to the quick-access bar, a very underused capability!):
image

22 Likes

FWIW it seems like this should be in that bar by default, designing for mobile or even just various screen sizes is an extremely critical aspect of serious game development on Roblox.

10 Likes

love love love love this. these small changes make the biggest impact on my workflow. now’s my chance to ask for a 2nd explorer window :grin:

15 Likes

Wouldn’t that involve having two properties windows?

6 Likes