Roblox GUI Maker logoRoblox GUI Maker
Unofficial third-party tool · Not affiliated with Roblox Corporation

Scale vs Offset in Roblox GUI: The Complete Guide with Code Examples

2026-07-21 · Roblox GUI Maker Team

Why your GUI looks broken on mobile (the #1 beginner mistake)

Picture a typical scenario. You design a main menu on a 1920x1080 monitor. The Play button is 300 pixels wide and centered. It looks great. Then you open the game on a phone, and the button is half off-screen, the text overflows, and the layout is unusable. One of the most common questions on the Roblox Developer Forum is "Why is my GUI so small on different devices?" - and the answer is always the same. The beginner sized the button with Offset (300 pixels), so it is 300 pixels on a 1920px screen and 300 pixels on a 375px phone. On the phone, 300 pixels is most of the width. That is the mistake.

What is UDim2? The building block of Roblox UI

Every GuiObject's Position and Size is a UDim2, which holds four numbers: a Scale and an Offset for both the X and Y axes. The formula is: final size = (Scale x parent size) + Offset. Scale is a fraction of the parent (0.5 = half the parent), Offset is raw pixels added on top.

UDim2 breakdown
lua
1-- UDim2.new(xScale, xOffset, yScale, yOffset)
2--             ↑        ↑        ↑        ↑
3--          X-axis %  X-axis px Y-axis %  Y-axis px
4

5-- Example: a frame half the width of its parent, plus 10 pixels padding
6frame.Size = UDim2.new(0.5, 10, 0.4, 0)
7-- On a 1920px-wide parent: (0.5 * 1920) + 10 = 970 px wide
8-- On a 375px-wide phone:  (0.5 * 375)  + 10 = 197.5 px wide
9-- The frame scales with the parent. This is what you want.

Scale vs Offset: when to use which

Use Scale for anything that should resize with the screen: container frames, buttons, panels, HUD elements. Use Offset for small, fixed adjustments: a 4px padding, a 2px border, a small icon that must stay exactly 32x32. The rule of thumb is Scale for layout, Offset for fine-tuning. If you find yourself writing a large Offset for a container, that is a bug waiting to happen on mobile.

Wrong vs Right
lua
1-- WRONG: sized with Offset only. Breaks on mobile.
2button.Size = UDim2.new(0, 300, 0, 60)
3-- 300px on 1920px desktop = fine. 300px on 375px phone = almost full width.
4

5-- RIGHT: sized with Scale. Works on every device.
6button.Size = UDim2.new(0.4, 0, 0.1, 0)
7-- 40% of parent width, 10% of parent height, on any screen size.

AnchorPoint: the missing piece

AnchorPoint controls which point of the element the Position refers to. Default is top-left (0,0), so a Position of (0.5, 0) puts the element's left edge at the horizontal center - not centered. To truly center an element, set AnchorPoint to (0.5, 0.5) and Position to (0.5, 0, 0.5, 0). Most alignment bugs come from forgetting to set AnchorPoint before positioning.

Centering an element
lua
1-- Truly center a frame on screen
2frame.AnchorPoint = Vector2.new(0.5, 0.5)
3frame.Position = UDim2.new(0.5, 0, 0.5, 0)
4frame.Size = UDim2.new(0.4, 0, 0.6, 0)
5-- Now the frame's center is at the screen's center, on any device.

Quick reference cheat sheet

  • Container frames, buttons, panels: Scale for Size and Position
  • Padding, borders, small icons: Offset only
  • Center an element: AnchorPoint (0.5, 0.5) + Position (0.5, 0, 0.5, 0)
  • Full-screen panel: Size (1, 0, 1, 0) with AnchorPoint (0, 0)
  • Aspect-locked element: UIAspectRatioConstraint with AspectRatio (e.g. 16:9 = 1.78)
  • Min/max size: UISizeConstraint with MinSize/MaxSize in pixels
  • Text that fits any width: Scale for the label's Size, let Roblox wrap

Frequently asked questions

Try Our GUI MakerRead the Guides