Good UI design on Roblox means your interface works on a phone, a tablet, and a desktop monitor without breaking. This guide covers the core concepts: UDim2 positioning, scale versus offset, anchor points, layout structures, and cross-platform considerations.
UDim2: Position and Size
Every GuiObject has a Position and Size property, both of type UDim2. A UDim2 has four values: X Scale, X Offset, Y Scale, Y Offset.
Scale is a percentage of the parent container's size. Offset is a pixel value. They add together. A position of {0.5, 0, 0.5, 0} centers an object horizontally and places it at the top of its parent.
In Studio, you can enter values without brackets. Typing 0.5 becomes {0.5, 0}, {0.5, 0}. Typing 20 becomes {0, 20}, {0, 20}.
Scale vs Offset for Size
When designing for multiple screen sizes, prefer scale over offset. If you hard-code a button to 200 pixels, it looks correct on a 1920x1080 monitor but tiny on a 4K screen and oversized on a phone.
Using scale, a button at {0.257, 0} scale takes up the same proportion of the screen at any resolution. Add a UIAspectRatioConstraint as a child of the button to keep it square. Set the button's Size to {0.257, 0, 0.257, 0} and the constraint maintains equal dimensions.
UICorner also works with scale. A corner radius set in scale retains the same look across different screens. UIStroke does not support scale, only offset, so choose a stroke width that looks acceptable at all sizes.
Anchor Points
The AnchorPoint property defines the origin point of a GuiObject. It is a Vector2 from 0 to 1, relative to the object's own size. The default is (0, 0), the top-left corner.
An object with AnchorPoint (0.5, 0.5) grows and shrinks from its center. One with (1, 1) grows from the bottom-right corner. This matters when you want UI to respond to screen resizing.
For a crosshair at the exact center of the screen, set AnchorPoint to (0.5, 0.5) and Position to {0.5, 0}, {0.5, 0}. For a button pinned to the bottom-right, use AnchorPoint (1, 1) and Position {1, 0}, {1, 0}.
Layout Structures
Roblox has four layout structures that automatically arrange child objects:
- UIListLayout positions siblings into horizontal rows or vertical columns.
- UIGridLayout positions siblings in a grid of uniform cells.
- UITableLayout arranges objects and their children into table format.
- UIPageLayout organizes siblings into pages you can transition between through scripting.
Size Modifiers and Constraints
UIScale multiplies the AbsoluteSize of a parent and all its children. A UIScale of 2 makes everything twice as large. Useful for accessibility settings or zooming in on detailed UI.
AutomaticSize resizes a parent to fit its descendants. Set it to Enum.AutomaticSize.Y so a text label grows vertically when text wraps and TextWrapped is enabled.
UISizeConstraint sets a minimum and maximum size. UITextSizeConstraint sets a minimum and maximum font size for text objects. UIAspectRatioConstraint enforces a width-to-height ratio regardless of how the object is sized.
Mobile Considerations
On mobile, the default controls occupy the bottom-left and bottom-right corners. Avoid placing important UI in those zones.
Most mobile players use two thumbs. A button 40% below the top edge is reachable on a phone but almost unreachable on a tablet. Position custom buttons relative to frequently-used controls like the jump button.
Screen space is limited on mobile. Show only vital information during gameplay. Use proximity prompts instead of always-on buttons for contextual actions.
Set IgnoreGuiInset on ScreenGui to true if you need to place UI under the top bar (for a true center crosshair, for example). Otherwise, Roblox automatically pushes your UI below the top bar.
Sources