Roblox GUI Guides
Step-by-step written guides for building common Roblox interfaces — with copy-paste Luau you can drop straight into Studio.
How to Make a Roblox Main Menu GUI
Step by step: build a Roblox main menu GUI with a ScreenGui, centered panel, title and stacked Play/Settings buttons using UIListLayout, plus the Luau to handle button clicks.
ShopHow to Make a Roblox Shop GUI
Build a Roblox shop GUI: a ScrollingFrame whose items auto-tile with UIGridLayout, item cells with images and prices, and a RemoteEvent so purchases actually work server-side.
MenusHow to Make a Roblox Loading Screen GUI
Make a Roblox loading screen: a full-screen frame with a gradient, title, an animated progress bar using TweenService, and a rotating tip — then remove it when the game is ready.
LayoutsHow to Use UIListLayout in Roblox
UIListLayout auto-arranges a container's children into a row or column. Learn the key properties — FillDirection, Padding, alignment, SortOrder — with a working Luau example.
DataHow to Make a Roblox Global Leaderboard GUI
Build a global Roblox leaderboard that ranks all players across servers with OrderedDataStore, then displays the top entries in a GUI — with the full Luau for saving, sorting and showing rows.
AnimationHow to Animate Roblox GUIs with TweenService
Make Roblox GUIs feel polished: slide panels in from off-screen, fade and pop them, and chain animations — all with TweenService and the right EasingStyle.
InteractionHow to Make a Draggable Roblox GUI
Let players drag a Roblox GUI Frame around the screen with the mouse or touch, using UserInputService — including the offset fix so it doesn't jump to the cursor.
LayoutsHow to Make a Responsive Roblox GUI
Make a Roblox GUI that looks right on phone, tablet and desktop: size with Scale not Offset, center with AnchorPoint, cap text with UITextSizeConstraint, and shrink whole sections with UIScale.