Roblox GUI Size Guide 2026: Scale, Offset & Every Value

If your Roblox interface looks perfect in Studio and falls apart on a phone, the cause is nearly always a sizing decision made three hours earlier. Roblox GUI has no fixed resolution — it renders into whatever viewport the player has, from a 5-inch phone held sideways to a 34-inch ultrawide — so "size" is a rule, not a number.

This is the complete reference: the resolution to design against, when to use scale and when to use offset, the safe areas Roblox itself eats, mobile touch minimums, and the constraints that keep everything honest.

Quick reference

If you remember one line: lay out in scale, detail in offset, and test on a phone before you ship.

Design resolution

Design against 1920×1080. It is not a canvas Roblox enforces — it is a reference frame so that when you say "this panel is 60% wide", you have a mental picture of what 60% looks like.

Anything you produce as an image for the UI — an icon, a background, a banner inside a panel — should be authored at 2× the size it will display at, so it stays sharp on high-DPI phones and tablets. A 64×64 icon slot wants a 128×128 source image.

UDim2, in full

UDim2.new(XScale, XOffset, YScale, YOffset) — four numbers, two axes.

-- Half the parent's width, plus 20 fixed pixels.
UDim2.new(0.5, 20, 0.3, 0)

-- Pure scale (the common case).
UDim2.fromScale(0.5, 0.3)

-- Pure pixels (for details).
UDim2.fromOffset(200, 48)

The scale part is a fraction of the parent, not the screen. A Frame at 0.5 scale inside a panel that is itself 0.6 of the screen ends up at 30% of the screen. This is a feature: nest your panels and the whole tree resizes together.

When to use offset

Offset is correct for anything that should be the same physical size on every device:

• Dividers and borders (1–2 px)
• Gaps in a UIListLayout (UDim.new(0, 8))
• UICorner radius
• UIStroke thickness
• UIPadding insets

Offset is wrong for panel sizes, panel positions, and anything containing a list of items. If you find yourself typing a three-digit offset for a Size property, it should almost certainly have been a scale.

AnchorPoint: why "centred" isn't centred

Position places an object's anchor point at the given coordinate, and the default anchor is the top-left corner. So Position = UDim2.fromScale(0.5, 0.5) puts the panel's top-left corner in the middle of the screen, and the panel hangs down and to the right.

panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.5)

AnchorPoint is in the range 0–1 on each axis: (0, 0) is top-left, (1, 1) is bottom-right, (0.5, 1) is bottom-centre. Use (0.5, 1) for a HUD bar pinned to the bottom edge, (1, 0) for a currency counter in the top-right.

Safe areas and the Roblox chrome

Roblox draws its own interface over yours, and it is not in the same place on every device.

• Top-bar inset — roughly 36 px at the top of the screen for the Roblox menu button, chat and player list. A ScreenGui respects it by default; set IgnoreGuiInset = true if you want a full-bleed background, and then keep your own content clear of that strip manually.
• Mobile controls — the movement thumbstick sits bottom-left and the jump button bottom-right. Do not put a tappable button in either corner on mobile or players will fight your UI while trying to move.
• Device notches — phones with a notch or a punch-hole cut into the top corners in landscape. Keep critical text out of the outer 5% on each side.

The practical version: treat the top 40 px and the bottom-left and bottom-right corners as spoken for, and centre anything that matters.

Mobile sizing

More than half of Roblox sessions are on a phone, so mobile is the design case, not the edge case.

• Touch targets: 44 px minimum, 56 px if the action is important or destructive. That is the rendered size on the device, so check it in the emulator rather than trusting the property panel.
• Spacing between targets: 8 px minimum. Two adjacent buttons with no gap generate mis-taps and refund requests.
• Text: use TextScaled with a UITextSizeConstraint. TextScaled alone will happily shrink a label to 6 px to make a long string fit. Constrain the minimum to something readable — 14 is a sane floor — and shorten the string instead.
• Never rely on hover. There is no hover on a touchscreen. Any state a player needs to see must be visible without interaction.

The constraints that keep it honest

A layout built from constraints has one enormous advantage over one built by hand: when you change the panel size, everything inside it stays correct.

A worked example

A shop panel that behaves on every device:

-- Panel: 60% × 70%, centred, but never smaller than 320×400 px.
panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position    = UDim2.fromScale(0.5, 0.5)
panel.Size        = UDim2.fromScale(0.6, 0.7)

local minSize = Instance.new("UISizeConstraint")
minSize.MinSize = Vector2.new(320, 400)
minSize.Parent  = panel

-- 16 px padding on all sides, one 16 px corner radius.
local padding = Instance.new("UIPadding")
for _, side in {"PaddingTop","PaddingBottom","PaddingLeft","PaddingRight"} do
  padding[side] = UDim.new(0, 16)
end
padding.Parent = panel

-- Item grid: square cells, auto-arranged.
local grid = Instance.new("UIGridLayout")
grid.CellSize    = UDim2.fromOffset(96, 96)
grid.CellPadding = UDim2.fromOffset(8, 8)
grid.Parent      = itemContainer

Scale for the panel, offset for the details, a constraint for the floor. That is the whole system.

Common size mistakes

1. Dragging in Studio and shipping it. Dragging writes offsets. Convert to scale before you commit.
2. TextScaled with no constraint. Long item names shrink to nothing.
3. A grid sized in scale. Grid cells should be offset; the container is what scales.
4. Ignoring the top-bar inset. Your title ends up behind the Roblox menu button on mobile.
5. Buttons in the movement-control corners. Players tap them by accident while walking.
6. Testing only in Studio's default window. The emulator exists precisely because your window is not a phone.

Skipping the layout pass

Getting these values right is craft, and it is worth knowing them well enough to spot when something is wrong. It is also an evening of dragging Frames.

The VizzBees UI Maker generates the layout for you: describe the panel you want, get a mockup, then get it back as a real Studio hierarchy — Frames with UICorner and UIStroke, live TextLabel objects, icons as images. You keep the part of the job that needs judgement and skip the part that needs patience.

For the full build process, read how to make a Roblox UI. For a complete worked panel, see the shop GUI tutorial.

FAQ

What size should a Roblox GUI be? There is no fixed pixel size — Roblox GUI renders into whatever viewport the player has. Design against 1920×1080 as a reference and size everything in UDim2 scale so it holds its proportions on any screen, using offset only for details like dividers, padding and corner radius.

What is the difference between scale and offset in UDim2? Scale is a fraction of the parent object's size, so 0.5 is always half the parent regardless of resolution. Offset is a fixed pixel count that never changes. Use scale for layout and offset for fine detail.

Why does my GUI look different on mobile? Either it was laid out in offset, or it collides with Roblox's own interface. Offsets do not shrink with the viewport, and the top-bar inset plus the mobile movement controls occupy areas you may have designed into.

What is the minimum button size for Roblox mobile? 44 px rendered height, with at least 8 px between adjacent targets. Important or irreversible actions deserve 56 px.

How do I stop text shrinking to nothing with TextScaled? Add a UITextSizeConstraint to the label and set MinTextSize to a readable floor, around 14. If the text still does not fit, the string is too long for the space rather than the space being too small.

Should I set IgnoreGuiInset? Set it to true when you want a background to cover the whole screen edge to edge. Leave it false — or manually keep content clear of the top ~36 px — whenever readable text sits near the top, or it will render behind the Roblox menu button.