How Roblox UI Works: GuiObjects, Layouts, and Hierarchies

Every on-screen object has a parent. Moving, hiding, or scaling a parent affects the subtree, so hierarchy is both a code organization tool and a visual behavior system.

StarterGui is copied into each player’s PlayerGui when they join. A ScreenGui inside that copy controls display-level settings. Panels and controls nested beneath it form the visible interface.

Frames group content, labels display content, and buttons accept input. Using the right class makes both scripting and later editing easier.

• Frame: a visual or structural container.
• ScrollingFrame: a container with a scrollable canvas.
• TextLabel: non-interactive text such as titles, prices, and status.
• ImageLabel: non-interactive raster artwork.
• TextButton and ImageButton: interactive controls.
• ViewportFrame: a rendered 3D view, useful for item previews when appropriate.

UDim2 values include scale, which is relative to the parent, and offset, which is measured in pixels. Responsive interfaces use both deliberately.

A fully offset-based layout can look exact at one resolution and fail elsewhere. A fully scale-based layout can produce awkward text and spacing. Common practice is to use scale for major regions and offsets or constraints for stable details.

UIListLayout and UIGridLayout calculate child positions automatically. UIPadding and constraints keep spacing and proportions consistent.

LayoutOrder provides explicit ordering without relying on object names. When content changes dynamically, automatic layout is usually safer than manually calculating every card position.

The client presents the interface and captures input. Security-sensitive outcomes must be checked by server code.

This distinction matters for generated interfaces too: exporting a visual hierarchy does not create secure purchase, moderation, reward, or inventory logic. Those systems must be connected and validated separately.