Give developers control over customizing the studio ribbon layout

As a Roblox developer, it is currently too hard to work swiftly in Roblox Studio because the tools I need are spread across multiple tabs in far-away locations, or reliant on plugins.

Some history for context

Back in around 2015 Roblox moved away from its old SystemMenu studio layout and introduced the RibbonBar studio layout. While SystemMenu had all tools in one single view with little bars you could move around, the RibbonBar sorted tools into separate, static tabs. A sizable portion of the developer community were unhappy with the loss of controls, for example as seen in this old topic and this old topic.

As a result, feature requests were made to let developers customize the ribbon bar layout, for example as shown here and here. This eventually led to the feature request being added to the back-then public Trello board, as per this comment, but it never came to fruition.

Allowing full studio customization is a very large task so I understand it may not be a priority, but throughout the past 8 years it’s been brought up again and again and again.

Why the current layout is not good enough

Fitt’s law states that the time it takes to select a button depends on the distance from the cursor to the button and the size of the button. Currently, studio fills the ribbon bar with buttons from the top left corner to the top right corner. The most commonly used tools (select, scale, rotate, move) are almost always located in the top left corner. The quick access bar is placed even further into the corner with even smaller buttons which take longer to press. This slows down workflows.

Below is an image of the buttons I frequently press (highlighted in yellow) and there is a clear pattern that most of those buttons are located all the way on the left.

Below is an image of what my studio looks like, which I modified by editing the RobloxStudioRibbon.xml file.

I moved the tools I frequently need (select, scale, rotate, move) to the middle of the screen for easier access, all under a single tab as well. With this layout I am able to select things faster than before. This is what better customization would enable, however editing the RobloxStudioRibbon.xml file to achieve this is not great.

Editing the RobloxStudioRibbon.xml is not a great work-around

If you want to customize the ribbon bar, your only option at the moment is to edit the RobloxStudioRibbon.xml file. This is not great because:

  • You cannot edit the location of plugin buttons.
  • Every update (which on average is more than once a week) the file is ‘reset’.
  • You cannot keep reusing the same edited RobloxStudioRibbon.xml file because sometimes studio updates change the format of this file.
  • This is not officially supported and might break at any moment.

The process of replacing the file also requires you to navigate to some obscure hidden AppData folder which is invisible on operating systems by default. I ended up automating this process somewhat with a Python script, but most Roblox developers won’t want to go through similar efforts.

Why customization is important

Customization increases development speed

I personally save upwards to hours of time each week with my personally customized ribbon bar layout. The tools I use are easier to access and I have to switch tabs less frequently because I put all my important tools under the same tab. This also makes it easier to build a mental model of the layout. I know that the ‘top center’ of my screen is where I find my important buttons. Mental models are vital to a quick workflow as you’ll spend less time looking for buttons.

Customization brings new talent

The current tools Roblox provides by default in Roblox Studio are heavily catered towards certain audiences. Builders / artists / modellers have a whole ‘Model’ tab dedicated to them. Programmers also have their own tab - though it is only shown while a Script is open. But other talent like UI designers, animators and sound designers have maybe one useful button or plugin if they are lucky. Many of those creators have to keep switching to the plugin tab to access their tools.

No layout will ever suit all crafts. Thus, letting developers drag and drop plugins or buttons into other tabs decreases the friction certain audiences currently experience, letting them focus more on their craft.

Conclusion

There are very few developers who currently customize their ribbon layout by editing the RobloxStudioRibbon.xml file because the required approach is obscure and prone to breaking. Most developers are also unaware of this approach in the first place. However, once you do modify your layout a whole new world opens that is difficult to transition out of. You never know how good something can truly be if you haven’t experienced it yet.

A quick workflow will beat many strong tools when it comes to building games quickly. You can spend a long time coming up with a ribbon layout which averages out the friction across all different types of jobs, but you can also let developers personalize their own ribbon bar to optimize for their own needs. And as Roblox grows to attract an even wider audience of creators, these customization tools become a necessity.

12 Likes

The less ribbonbar tabs I have to navigate through to search for & click my desired button, the faster my workflow gets. I’m a big fan of the current “Advanced Customization…” that brings compact buttons to the top left and hope we maintain this level of customization and more with the new incoming layout.

My current hurdle with layouts is the Plugins bar randomizing the plugin locations for every new studio instance.

2 Likes

I’ve seen something on the Roblox roadmap addressing the ribbon. Is this what you are looking for?

There is a fully formed vision here which we’ve even implemented some parts of already:

7 Likes

That multiple view stuff looks really cool, hopefully plugins can create their own views (also InitialDockState.Main for plugin guis when)

Counter argument; Ctrl 1 Ctrl 2 Ctrl 3 Ctrl 4 F5 shift f5 f8 etc

Faster than pressing buttons for me.

(No this is not meant to be rude, I’m horrible at toning generally, just informing about the shortcuts)

Thank you for sharing this! I wasn’t at RDC this year so I only knew of the first screenshot shown in the video - assuming this is from this year’s RDC.

I made this feature request mainly because previous feature requests rarely included why customization is important. And the screenshot I saw still had important tools tucked away in the top-left corner with the ribbon being filled from left to right, which concerned me a little.

The video mentions ‘can be customized’ and ‘customizable tabs’. I also noticed the addition of a plus button next to the tabs which wasn’t explicitly elaborated on. I understand if this question cannot be answered yet, but I am assuming this button would allow users to add their own ‘customizable tabs’? If so, that would solve almost everything!

Thanks again for sharing this video. It’s some very important context I wasn’t able to find by myself.

Does this also include the ability to customize the icons?

Thank you for such a thoughtful and comprehensive request! I think you’ll be very happy with the work we are doing and this includes the ability to make custom tabs. :slight_smile:

2 Likes

I’ll been experimenting with adding a custom ribbon layout and was able to successfully add it.

If anyone wants to know how to do this, I just modified the RobloxStudioRibbon.xml file and then built Roblox Studio with that new modified file via Roblox Mod Manager.

Cool thing is that everything actually works as expected. The buttons below actually work.

image

I didn’t realize that they were already adding custom ribbons but if you want to have custom ribbons now, now you can.

I would only caution to not over-invest in this approach as the next gen UI will have proper customization support (with a UI) and the Ribbon xml is being completely refactored.

4 Likes