Introduction
Hi everyone! I’m peachcoolish, a UX Designer at Roblox! In this article, I’ll be going over points to consider when deciding what tools to use when designing interfaces for your game. While Studio is an amazing tool, sometimes an external application might suit your workflow and creative intents better. I will also drop in some tips and tricks to keep in mind if you are designing in an external application for better results.
While there are a lot of options out there, I will primarily focus on Adobe Photoshop (paid) and Figma (free) as the external applications discussed in this article. They are the most industry standard and the most popular amongst the design community.
This article assumes that you have some knowledge of exporting and importing your designs in Studio. If you don’t, keep a lookout for future content on user interfaces and design!
What we’re covering today:
- Using Studio’s UI Editor - Studio’s capabilities, typical workflows, and cool new features you might not be aware of!
- Using Third Party Softwares - Common third-party tools and features and workflows that can elevate your designs.
- Deciding Between Studio and Software - Key factors to consider when deciding on software and approach.
- Conclusion - A quick recap!
Using Studio’s UI Editor
Roblox Studio’s UI editor is quite powerful! You can create endless designs with built-in UI elements like Frame and TextBox and edit their appearance to your liking with UIComponents like UIStroke and UICorners. Here’s a design created with Studio components and decals from Toolbox only!
If you want to check out this UI, get it from the Creator Store, use the Get Model button to add it to your Toolbox. In your Toolbox > My Models, select the model to insert it to your workspace. Then drag the inserted ScreenGui to your StarterGui folder
New features are always being added to create more scalable and complex designs. I want to highlight the following two features that we added recently. These features can be an extraordinary functionality or customization addition to your project!
- Flex Feature Upgrade for UIListLayout allows for multi line wrapping, dynamic growing and shrinking, custom alignment options, and more. It’s a great tool for responsive, cross-platform UI development.
- The UIDragDetector component makes dragging inputs and interactions much easier to implement. It’s compatible with ScreenGuis and SurfaceGuis and is beginner friendly!
When starting a new project in Studio, I always start by wireframing the base layout of each interface with GuiObjects. Wireframing is like creating the blueprint of the interface. You’re deciding how information is surfaced, where points of entries are located, and what happens when the user interacts with an element. Typically, wireframes are barebone outlines so designers can focus on the user experience of the interface first before making it look pretty!
The great thing about wireframing in Studio is that the wireframe acts as the base layout, meaning you can immediately start fleshing out your designs. If you wireframe externally, you’ll have to start from scratch in Studio by setting up your basic GuiObjects and base layout hierarchy. Wireframing in Studio also makes changes very easy as the base design is not baked into image textures. Once the wireframe is finished, designs can be applied swiftly with UIComponents in Studio.
Three different stages of the same UI design from wireframe to finish - all done within Studio.
During the design process, you can also preview the design in different resolutions with Studio’s device emulator. Players from all different devices can play your game, so it’s important for your design to be user friendly on both small and big screens. Luckily, Studio makes it very easy! Go to the Test tab in Studio to choose between common device preset resolutions (or make custom ones).
Tip: Check out fellow Roblox Designer @uiuxartist’s section on designing UI with scale in Studio!
Test your UI across different screen resolutions and devices using Studio’s device emulator!
If you’re working with a designer, Studio allows you to collaborate live with your team and cuts out the need to send a file back and forth. And, if you’re multitasking, you can switch from designing UI to helping a friend graybox the map layout. And when you’re done with the design, handing off your work to a programmer is automatic since it’s all set up in your place file.
With Studio’s many UI tools, Studio may be all you need to take your design from concept to completion. However, don’t rule out third-party softwares yet! They can offer features that help you achieve more refined results easier, taking your design to the next level.
For some additional resources on Studio’s UI tools and features, see Roblox’s UI documentation.
Using Third-Party Software
If you’re looking to achieve certain visual styles, third-party softwares provides tools that can be more efficient. One popular option is Photoshop, who offers tools like brightness and contrast and hue, saturation, and lightness that allows you to modify your designs with precise control. Paired with blend modes, layer styles, and layer masks, you can create more elaborate designs with textures and dimensionality. These features can complement Studio’s powerful editor to create ornate and intricate designs that’s responsive, immersive, and scalable.
Third party software allows you to add unique UI details that might not be easily reproduced only using Studio.
Similarly, Figma has great tooling that makes prototyping and complex 2D designs a lot easier. Because Figma is vector-based, you can draw custom shapes and iconography that achieves your artistic vision. You can also add motion to your design with Figma’s prototyping tools without code and show your team visually how your UI flows from interaction to interaction.
Tip: Vector-based graphics editor uses math to draw paths that create lines and shapes, meaning that assets can be scaled infinitely big or small without loss in quality. Photoshop is bitmap, meaning it utilizes pixels to form shapes and lines. This can lead to unwanted loss in fidelity if scaled repeatedly.
An initial design in Studio improved in Figma with vector-based shapes, iconography, and patterns.
Keep in mind that designing in third party softwares requires you to export and import your design in Studio, which is the act of separating your design into building blocks and then uploading and reassembling the design. It’s highly recommended to identify common patterns in your design and make reusable components to maximize efficiency. Depending on the volume of interfaces you have to design, this can mean extra days of work that you can save.
Creating a reusable component maintains consistency and quality!
Understanding how to optimally design and export assets within Studio’s limitations is also highly recommended to limit engineering handoff complications. Let us know in the replies if you’re interested in learning more about exporting assets from third-party applications.
Deciding Between Studio and Software
Now that you know a bit more about using Studio and third-party softwares when designing UI, how do we actually decide between one or the other? Although there are many factors, here are some major points to consider:
Artistic Direction
Studio makes creating flat, 2D designs very easy, but it’ll need support from Photoshop to create textured 3D designs and Figma for stylized 2D designs. Similarly, if your game will require drop shadows or glows, ornaments, and custom icons, external applications are better suited for the job until those features get added to Studio.
Tip: Default Studio fonts can be found here and you can download additional fonts from the Creator Store here!
Let’s look at some real world examples! In Dragon Adventures, the highly stylized ornate header, frame, and close button indicate that it was mostly designed in Photoshop and then imported into Studio. On the other hand, Tower Defense Simulator’s UI is built mostly in Studio with GuiObjects with some third-party software support for unique shapes and shadows.
When choosing Studio, consider the following limitations…
- For shapes that are not rectangular or circles, you will need to create your own or find them in the Toolbox. This includes stars, triangles, non-uniform rounded-corner rectangles and more.
- Drop shadows, glows, and radial/angled gradients are currently not available in Studio and will need to be created in an external application.
- Programming knowledge is required to prototype motion and sound effects.
For third-party softwares…
- Remember that your font choices are limited to ones available in Studio! Avoid unsupported fonts so your design in Studio looks like what you created elsewhere.
- Don’t bake text into image textures as they should be localized for foreign audiences.
- Ensure that your drop shadows or glows are not massive to avoid input overlap and occlusion.
Big drop shadows baked into an image will cause input overlaps, especially when it isn’t visually afforded to users! (Colored outlines render the bounding box of the buttons with drop shadows.)
Scope
For larger projects, building with Studio’s native UI editor from the start can save significant time by avoiding importing. This is more effective if your project has many similarly structured interfaces as you can duplicate and modify previously completed designs instead of recreating each screen from scratch.
If your design requires third-party tooling, create a reusable library of components and assets like buttons, scrolling frames, and text. Streamlining your process with reusable components makes designing easier and faster. Plus, it also maintains visual and pattern consistency across your designs, making it more user friendly and supports collaboration with your team.
Similarly, it can be time consuming to design for each device resolution in third-party softwares. If you’re aiming to support many platforms, the emulator in Studio allows for much faster previews of the same design on different resolutions compared to its third-party counterparts.
Project Management
You may also want to consider the team you are working with. Are you collabing with other designers or will you be in charge of everything UIUX? If you are working with someone else, it may be better to use Figma or Studio as they have in-depth collaboration features suited for UI. Do your teammates have access to your external application if they are paid? Depending on your situation, it may be better for the collective team to pick one or the other!
You don’t necessarily have to stick to one software for the entire duration either. You may use Figma for early stage wireframing and feedback, Photoshop for asset design, and then Studio for cross-platform compatibility.
Lastly, take into consideration the timeline of your project. If you anticipate time-sensitive or UI-dense game updates, how you prepare your design can make or break the deadlines for you and your team. As we say at Roblox, take the long view!
Conclusion
All in all, Studio is incredibly flexible and offers powerful UI tooling that allows for design, wireframing, cross-platform usability emulation and testing, and live collaboration. When complemented with third-party applications like Photoshop and Figma, one can achieve stylized and complex designs. When deciding which software to use, make sure to consider everything from art direction to engine constraints to your teammate’s workflow.
If you guys have any questions or feedback, leave it in the replies and I’m happy to help when I see it! I also want to take the time to shout out Cake Off!’s UI. It uses motion and color really effectively and it’s one of my favorite interfaces on Roblox. Do let me know what’s your favorite UI design on Roblox! What UI topics are you interested in hearing more about?
