Next Gen Studio UI Preview is here! [Beta]

MeshOfPaul · July 18, 2024, 6:15pm

Today, we’re releasing a preview of the next-generation Studio UI. We’re rolling it out as a beta to gather your feedback to ensure that it will help you be more productive.

“Next Gen Studio” is a major effort guided by the following principles:

A simplified default UI that is more intuitive for new creators
A flexible UI system that is more customizable for experienced creators
Implementation of a structured design system with a consistent look and feel
A technical architecture that reduces the chances of hangs and improves plugin workflows

Here’s a comparison between today’s Studio and the Next Gen UI Preview:

Current Studio UI

Next Gen Studio UI

Noteworthy Features in this Release

New design language styling including color coded icons
The default ribbon tabs have been simplified
Completely new menu system (on Mac these will appear in the MacOS menu bar)
- Note: Items that were previously on the View tab will be In the View and Window menus
Script, UI tabs are always present – No more disappearing tabs!
Play Test controls are always present in the upper left
- Note: this replaces the Quick Access toolbar — we’ll be bringing back that functionality with custom tabs

More Than Just a New UI

For the past year, we have been working behind the scenes on what we call the “Modular Studio Framework” — a modern, multi-threaded architecture that makes it easier to build robust Studio functionality.

A few of these improvements have been deployed when possible but the current UI was too entangled with old, outdated patterns that have been the source of many hangs and crashes in Studio. To really clean things up and set the foundations for a true Next Gen Studio, we needed to completely revisit the core UI of Studio.

Moving to Luau

A couple of eagle eyed folks in the “New Studio UI” mega thread also picked up on the fact that this new UI has been implemented in Luau! We will continue to reduce the amount of UI implemented in Qt/C++. Not only does this give us a path towards a consistent and customizable UI, it also means as we make improvements to UI workflows will also benefit the community building UI for experiences.

This is all still under heavy development and we plan to keep updating the beta from week to week. It’s too early to say when we will take it out of Beta and it becomes the default UI but currently we are planning for early 2025.

We are continuing to work on:

Additional functionality and fixes (your feedback is important!)
Refinement on overall styling
Customization capabilities: change some Ribbon settings and create your own toolbars!

How to use the Beta

Go into File > Beta Features and turn on “Next Gen Studio UI”
Restart Studio
Give us feedback!

Known Issues

We have numerous known issues and missing functionality that we are actively working on. As mentioned above, we will keep updating the Beta over the coming months.

Some third party plugins may cause crashes or hangs
We have not yet fully optimized the performance for older hardware
Padding, spacing, and layout values are a work in progress
Local play test with multiple clients UI is not yet available
Editing and creating new ribbon tabs is not yet available
Collaborator presence UI is not yet available
The Script and UI tabs no longer disappear (by design) — the tools on those tabs may not disable properly
Changing between light/dark theme may not automatically reload the icons on the current tab
The background colors are not final — we had to compromise to accommodate old UI
Explorer and Properties have not yet been updated to new design system
There may be issues with icons when using multiple displays with different resolution scales
The ability to override icons with Custom Icon Directory setting is not yet supported
Many other small fixes and improvements are actively being worked on

system · July 18, 2024, 6:25pm

This topic was automatically opened after 10 minutes.

CSJeverything · July 18, 2024, 6:25pm

I like this update because it refreshes the old look of Studio and previews the modern future of Studio’s UI.

Here’s my feedback in more detail:

UI Ribbon

Quick Access Toolbar

Dropdown functionality

View Menu

Material Picker

New Menu Bar

New Studio Home Screen

Improved support for Files

Screenshot & Video tool

Dark mode for Tool Tips

Support for small windows

Support for collapsing the ribbon

CUSTOM THEMING

1. UI Ribbon

There’s way too much space here:

How about moving the menu bar to the window bar? Other programs also do not use the system window bar at the top. This takes up much less space.

A similar approach to Visual Studio Code and Blender.

^ I made this in MS Paint

2. Quick Access Toolbar

I NEED THIS FEATURE BACK. IT WAS SOOOO USEFUL.

I never had to go to the File menu to save or publish my games. I need to be able to access these things with one click, no menu. Please, please, please put this super useful feature back!
This is my configuration of the bar.

3. Dropdown functionality

I do not like the functionality of the dropdowns, e.g. the ‘create a part’ button.

The gradient on the Part button looks weird.
I want to be able to select an option from the dropdown with a single click, instead of having to click again after opening the dropdown (by holding down the mouse).
If I accidentally click the Part button, move my mouse away while still holding down the button, and then release the button, it still creates a new part, even though my mouse was not on the button when I released the click.

4. View Menu

I have no idea where to find most of these settings in the new UI. I would appreciate it if this menu could be moved back to the main menu bar.

I cannot find these options in the new Studio UI.

5. Material Picker

The newly released Material Picker is nowhere to be found in the new Studio UI. Material Picker [Full Release]

6. New menu bar

I like the new menu bar, although it will take some getting used to.

7. New Studio Home Screen

The next thing we need is an updated Roblox Studio home screen with a new look. I remember when I first opened Studio, the start screen alone was too confusing (I don’t know how I didn’t fully understand it back then). It needs to be more introducing, modern and useful.

8. Improved support for files

Save to file

Download as file

9. Screenshot & Video Tool

Bring back the screenshot and video recording features of Studio, because they are very useful.

10. Dark mode for tool tips

The tooltips on hover are too bright for me .
Also they render on top of other windows.

11. Support for small windows

Improvements to make the main ribbon scrollable when the window is not wide enough.

12. Support for collapsing the ribbon

Sometimes we need as much of the screen as possible to view the viewport. Maybe also give windows users the option of full screen? not sure tho

13. CUSTOM THEMING

please allow us to set an accent color or even our own color palette that’d be awesome and definitely improve my development

Just imagine a dark studio with some purple accent to it

Overall, you - the team behind this update - have done a great job. I like where this is going, but I’d like to express that the features available are not going to satisfy my needs. I’ll continue to use the old Studio UI until (most of) these issues are resolved. I don’t want to point out what’s bad. I want to give feedback on what I want. Thank you @Saphirae_13, @MeshOfPaul & the rest of the team for your extremely active communication before the beta, now, and in the future.

xChris_vC · July 18, 2024, 6:25pm

Excited to see what’s coming! Especially customizability is an important feature to me and now’s the best time to think about that.

My biggest issue with the new UI is the use of screen space. I prefer dense UI than a UX where I need multiple clicks to accomplish a basic task. I suppose we can give it time since this is all WIP.

I believe it’s worth mentioning how amazing the communication on this was, thanks so much for keeping us in the loop in this topic!

oinkyk · July 18, 2024, 6:25pm

This looks pretty sleek, I love it! Hopefully it will help my friends work around studio faster unlike how it took me minutes just to help them navigate throughout the Studio UI… Thank you Roblox Engineers!

RaterixRGL · July 18, 2024, 6:25pm

I’m sorry, but I can’t use this in it’s current state. Too many missing features, and it feels way too cramped. A lot of wasted space for less functionality.

The awful docking system is still here and I just hate it, the buggy docking mess (even with the beta enabled) is gross.

The lack of features makes this beta unusable for production, nobody, and I mean nobody on my team will be using this interface due to the lack of collaboration UI.

Do not use this as the base framework, do not keep it how it is. It isn’t just “I don’t like it”, it’s functions that used to be here are missing.

I also was expecting the terrible explorer, which causes severe lag on giant places, to be improved. Unfortunately, with the usual constant line of disappointments, it isn’t out yet. Infact, it isn’t even being mentioned, I would like some progress reports about it.

ittrgrey · July 18, 2024, 6:25pm

Please reduce the padding. Whilst I am keen on the visual font improvements, it is clear the new interface in its current form has been designed more for use by tablets than for PCs, despite the fact that Roblox Studio can only run on Windows and Mac.

On a separate note, the proposed icons appear to be a disaster for legibility and a massive regression towards what was initially proposed a number of years ago for the existing UI, prior to changes being made based on user feedback. Outline-centred icons are horrible for accessibility purposes. Please make adjustments even if this means looking back to the previous 2014-23 icon set.

The removal of the quick access toolbar in the top-left corner is another regression - it is designed to be quick and easy to access. For actions such as undo and redo, this is essential functionality. Please add it back.

Other than the above, this looks promising.

MagicalAnteater · July 18, 2024, 6:25pm

Yooo this is insanely cool! It’s been ages since we had Studio UI updates, now I wonder if there will be issues we had for years converning Dock UIs crashing Studio, etc. Thank you Roblox!

0Tenth · July 18, 2024, 6:25pm

Is there any plans to publicly release the components used for this new Luau based UI to the public, so that plugin authors and game developers can have a set of components consistent with Roblox’s design language?

Dekkonot · July 18, 2024, 6:25pm

The Luau team will be incredibly distraught to hear that you’re using Lua instead.

That aside, I am overall a big fan of the look of the new UI but it is far more wasteful of screen space than the old one. It has a lot more empty space than the old one, particularly the topbar. Why are the tabs so much larger vertically than the old UI? What was the rationale behind this?

I’m also not a big fan of the centered tabs. I’m a Windows guy. I like my stuff left-aligned. Any chance we can see that change or at least be configurable?

Dexzoro · July 18, 2024, 6:25pm

This is wonderful!!! Thank you Roblox for this!!!
Honestly I have waited for this update for a long time, and now that it’s finally here, my workflow will likely improve… and it feels so nice to look at too…
Anyway, time to make Blender 3d styled class icons but I think it would fit this UI a lot.

OptimisticSide · July 18, 2024, 6:25pm

While I believe the new user-interface is a nice refresh, I feel that it does not use space as well as the older interface did. In particular, I am talking about the toolbar at the top of the window. Maybe it would be better if buttons did not have as much space in between them?

Additionally, I did not see anything in particular that really needed changing. Roblox Studio has always been a development tool, and most people who use it primarily use it to get stuff done. Therefore, I believe that the main goal of the interface should be to be simple and straightforward for developers. Adding padding and making buttons bigger means developers have to shuffle through more menus to do what they would have otherwise been able to do by just pressing a button.

At the end of the day, I just believe that improving the superficial appearance of the program should not be the main goal, and that the goal should instead be to improve developer experience by making interactions with the interface simpler and more efficient.

CryBlania · July 18, 2024, 6:25pm

Dammmmmmmmm, great update, will use it!

synchronisedthreads · July 18, 2024, 6:25pm

Thank you Paul, for your cooperation in the original mega thread! We’re all excited about the new interface for Studio, especially with the full release coming in 2025.

2jammers · July 18, 2024, 6:25pm

When will the updated UI come out for the all of the other windows?

BizzarBlitz · July 18, 2024, 6:26pm

Why? I’m all for custom tabs but the point of the Quick Access toolbar is that it’s supposed to be quick. Putting them into tabs kinda defeats the point IMO.

dayflare · July 18, 2024, 6:26pm

I’m a bit confused…

So only the top bar has been re-skinned? It looks like this update was rushed… why not re-skin everything in one big update.

Right now it looks useable but definitely not something that should be shipped out of beta release, please re-skin all studio components.

teedahbluedee · July 18, 2024, 6:26pm

please add a feature to disable this once it rolls out because i dont see anybody getting used to this new ui

Velover3454 · July 18, 2024, 6:26pm

can you finally search the plugins?

WingedDash · July 18, 2024, 6:26pm

I have waited such a long time for this! The ability to have a consistent and great Studio UI will be a great addition.