Roblox Studio UI/UX Design Best Practices

Build Roblox interfaces that hold up on phones, tablets, and monitors by using ScreenGuis, scale-based layouts, clear button feedback, and safe-area settings, then put it all together in a small score-and-button HUD.

Players see your UI before they understand your game. If the score is cut off on a phone, or a button sits under the player’s thumb, the game feels broken even when the code is fine.

This guide covers the habits that prevent that, then walks you through a HUD with a score display and one button. Class and property names come from the Roblox Creator Hub. Studio’s layout changes from time to time, so if a panel looks different, search the Creator Hub for the current steps.

Where on-screen UI lives

On-screen UI goes inside a ScreenGui. You build it under StarterGui in the Explorer. When a player joins, Roblox copies the contents into that player’s PlayerGui, which is where it runs.

That means each player has their own copy. A LocalScript inside the ScreenGui runs on that player’s device and can only change their copy of the interface.

Keep one rule from scripting in mind here: the UI displays state, it does not own it. If your score lives on the server, as it should, the HUD reads the score and shows it. It never decides what the score is.

Scale versus offset

Every GuiObject’s Position and Size use a UDim2, which has two parts per axis:

• Scale is a fraction of the parent’s size. A width scale of 0.5 means half the parent’s width.
• Offset is a fixed number of pixels, added on top of the scale.

A layout built only from offset looks fine on the screen you built it on and wrong everywhere else. A 400-pixel panel can fill a small phone and look tiny on a large monitor.

Use scale for the main size and position of panels and buttons. Use offset sparingly, for small fixed gaps or borders. In Studio’s Properties window, you can type all four values separated by commas, such as 0.25,0,0.1,0.

Scale has one weakness: a square button stretches into a rectangle on a wide screen. Fix that with constraints. The Creator Hub documents three:

• UIAspectRatioConstraint locks width to height. An AspectRatio of 1 keeps a button square.
• UISizeConstraint sets a minimum and maximum size in pixels.
• UITextSizeConstraint sets a minimum and maximum font size. The docs recommend not going below 9 for the minimum.

Insert a constraint as a child of the object it controls.

AnchorPoint: position from the right corner

AnchorPoint decides which point of an object its Position refers to. The default of (0, 0) is the top-left corner. Set it to (1, 0) and the Position now refers to the top-right corner, which makes right-aligned UI easy: a Position X scale of 1 places the object flush with the right edge instead of off the screen.

Set AnchorPoint before you set Position. It saves a lot of nudging.

Keep UI out of the notch and the top bar

Phones have notches and cutouts, and every Roblox game has its own controls along the top of the screen. The ScreenGui’s ScreenInsets property controls which of these areas your UI avoids.

• CoreUISafeInsets, the default, keeps your UI clear of both device cutouts and Roblox’s top bar controls. The Creator Hub recommends it for anything interactive or important.
• DeviceSafeInsets avoids cutouts but not Roblox’s controls.
• None ignores all insets. Use it only for non-interactive backgrounds, such as a full-screen image.

The mobile-safe habit is simple: leave ScreenInsets at CoreUISafeInsets for your HUD. If you turn on IgnoreGuiInset, the docs explain that ScreenInsets switches from CoreUISafeInsets to DeviceSafeInsets, so your UI can slide under the top bar controls. Only do that on purpose.

Two more mobile notes from the Creator Hub. The default touch controls occupy the bottom-left and bottom-right corners, so do not put important buttons there. And comfortable thumb reach differs between phones and tablets, so test both rather than guessing.

Buttons that feel responsive

A button should do three things: look pressable, react when touched, and confirm that something happened.

• Look pressable. Give buttons a distinct color and enough size for a thumb. A short, clear label beats an icon nobody recognizes.
• React. GuiButton has an AutoButtonColor property that changes the button’s color on interaction. For a size change, the Creator Hub suggests a UIScale object, which you can tween to grow a button slightly on hover.
• Confirm. Change something visible after the press: open the panel, change the label, or play a short sound.

For the click itself, connect to the button’s Activated event rather than a mouse-specific one, and check the GuiButton reference for how it handles different input types.

Build the HUD

You will make a score display in the top-left and a Help button on the right that opens a small panel. The score reads the Coins value from the leaderboard you built in our first Roblox game tutorial. If your game uses a different value, change that one line.

Step 1: Create the ScreenGui

In Explorer, insert a ScreenGui under StarterGui and name it HUD. Leave ScreenInsets at its default.

Step 2: Add the score panel

1. Insert a Frame in HUD. Name it ScorePanel.
2. Set its AnchorPoint to 0, 0, Position to 0.02,0,0.02,0, and Size to 0.2,0,0.08,0.
3. Insert a UIAspectRatioConstraint into it and set AspectRatio to 3, so it stays a wide bar on any screen.
4. Insert a TextLabel into ScorePanel. Name it ScoreLabel, set Size to 1,0,1,0, and turn on TextScaled.
5. Insert a UITextSizeConstraint into the label and give it sensible minimum and maximum sizes.

Step 3: Add the button and panel

1. Insert a TextButton in HUD. Name it HelpButton and set its Text to Help.
2. Set AnchorPoint to 1, 0.5, Position to 0.97,0,0.5,0, and Size to 0.1,0,0.1,0.
3. Insert a UIAspectRatioConstraint with AspectRatio 1 so it stays square.
4. Insert a UIScale into the button. Leave Scale at 1.
5. Insert a Frame in HUD named HelpPanel. Center it with AnchorPoint 0.5, 0.5 and Position 0.5,0,0.5,0, add a TextLabel with a short tip, and turn its Visible property off.

Step 4: Write the LocalScript

Insert a LocalScript into HUD:

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local hud = script.Parent
local scoreLabel = hud.ScorePanel.ScoreLabel
local helpButton = hud.HelpButton
local helpPanel = hud.HelpPanel
local buttonScale = helpButton.UIScale

-- Show the score the server owns
local coins = player:WaitForChild("leaderstats"):WaitForChild("Coins")

local function updateScore()
    scoreLabel.Text = "Coins: " .. coins.Value
end

coins.Changed:Connect(updateScore)
updateScore()

-- Hover feedback
local quick = TweenInfo.new(0.1)

helpButton.MouseEnter:Connect(function()
    TweenService:Create(buttonScale, quick, { Scale = 1.08 }):Play()
end)

helpButton.MouseLeave:Connect(function()
    TweenService:Create(buttonScale, quick, { Scale = 1 }):Play()
end)

-- Press: toggle the panel and confirm with the label
helpButton.Activated:Connect(function()
    helpPanel.Visible = not helpPanel.Visible
    helpButton.Text = if helpPanel.Visible then "Close" else "Help"
end)

The script only reads Coins. It never changes it. The server keeps control of the score, and the HUD just reports it.

The hover tween gives mouse users feedback. Touch players get feedback from the label switching to “Close” and the panel appearing, which works on every device.

Test on more than one screen

Press Play and collect a coin. The score should update right away. Click Help and the panel should open and close.

Then test other screens. The Creator Hub’s testing page describes Device Simulator, which previews your game at a chosen device’s screen size and with touch input. Older guides may call it the Device Emulator. Try a small phone, a tablet, and a wide desktop resolution, in both orientations if you support them.

Look for three things on each: nothing clipped, nothing under the top bar or the touch controls, and text you can still read. If something fails, fix the scale values or add a constraint rather than nudging pixels for one device.