Roblox UI Tutorial: Clean GUI Menu in Luau
Roblox UI tutorial: build a clean modern GUI with ScreenGui, frames, UICorner and UIGradient — plus a full shop panel in Luau.
▶ Full written tutorial (free): https://generalistprogrammer.com/tuto...
A complete Roblox UI tutorial — build a clean, centered GUI from scratch in Luau. No plugins and
no drag-and-drop mess, just readable code you can reuse in any game. We build a ScreenGui, a
centered Frame with rounded corners, a title, a real working button, and a tidy list layout.
What we build, step by step:
ScreenGui — the invisible canvas over the player's screen, created from a LocalScript and
parented to the player's PlayerGui.
A centered Frame — sized and placed with UDim2, where scale is a 0 to 1 fraction of the parent
and offset is a flat number of pixels. AnchorPoint 0.5, 0.5 makes Position point at the frame's
own center, so it truly centers on any screen.
Rounded corners — a UICorner with a CornerRadius of UDim.new(0, 12).
A title TextLabel — GothamBold, TextScaled, and BackgroundTransparency 1 so only the text shows.
A working TextButton — MouseButton1Click connected to a function that runs on every click or tap.
A tidy layout — UIListLayout to stack elements in a centered column, plus UIPadding for room.
The one idea beginners get wrong: UDim2 scale versus offset, and using AnchorPoint 0.5, 0.5 to
center a frame on any device.
Full written tutorial with all the Luau code:
https://generalistprogrammer.com/tuto...
Skip to a done-for-you interface — Roblox Pro UI Kit, styled buttons, frames, and menus ($19):
https://generalistprogrammer.gumroad....
— Chapters —
0:00 A clean centered menu, from scratch
0:26 Roblox Pro UI Kit ($19)
0:59 The ScreenGui — where UI lives
2:05 A centered Frame — UDim2 + AnchorPoint
3:40 Rounded corners with UICorner
4:37 A title TextLabel
5:31 A working TextButton (MouseButton1Click)
6:37 Tidy it with UIListLayout + UIPadding
7:37 Recap
8:33 Watch next + UI kit
#roblox #robloxdev #robloxui