Roblox GUI / UI Tutorial — ScreenGui, Frames, Buttons & Animations (2026)
Roblox GUI / UI Tutorial
UI Hierarchy
StarterGui
└── ScreenGui
├── Frame (container)
│ ├── TextLabel (display text)
│ ├── TextButton (clickable)
│ ├── ImageLabel (display image)
│ └── ImageButton (clickable image)
├── Frame (another container)
└── ...
Creating a Shop UI
-- LocalScript in StarterPlayerScripts
local player = game.Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local shopGui = playerGui:WaitForChild("ShopGui")
local shopFrame = shopGui:WaitForChild("ShopFrame")
local closeButton = shopFrame:WaitForChild("CloseButton")
local itemsFrame = shopFrame:WaitForChild("ItemsFrame")
-- Toggle shop
local isOpen = false
local function toggleShop()
isOpen = not isOpen
shopFrame.Visible = isOpen
-- Smooth animation
if isOpen then
shopFrame.Position = UDim2.new(0.5, 0, 1.5, 0) -- Start offscreen
shopFrame:TweenPosition(
UDim2.new(0.5, 0, 0.5, 0), -- Center
Enum.EasingDirection.Out,
Enum.EasingStyle.Back,
0.3, true
)
else
shopFrame:TweenPosition(
UDim2.new(0.5, 0, 1.5, 0),
Enum.EasingDirection.In,
Enum.EasingStyle.Back,
0.3, true
)
end
end
closeButton.MouseButton1Click:Connect(toggleShop)
HUD (Heads-Up Display)
-- Update coins display
local coinsLabel = playerGui.HUD.CoinsFrame.CoinsLabel
player.leaderstats.Coins.Changed:Connect(function(newValue)
coinsLabel.Text = "💰 " .. tostring(newValue)
-- Pop animation
coinsLabel:TweenSize(
UDim2.new(1.2, 0, 1.2, 0),
Enum.EasingDirection.Out,
Enum.EasingStyle.Elastic,
0.2, true
)
wait(0.2)
coinsLabel:TweenSize(
UDim2.new(1, 0, 1, 0),
Enum.EasingDirection.Out,
Enum.EasingStyle.Quad,
0.1, true
)
end)
UI Design Tips
- Use UICorner for rounded corners
- Use UIGradient for color gradients
- Use UIStroke for borders
- Use UIPadding for spacing
- Use UIListLayout for auto-arranging items
- Never use Offset for positioning — always use Scale (0-1) for responsive design
Skip the Hard Part — Use Roblox Factory
Roblox Factory generates your entire game — 13+ Lua scripts, art, marketing — in one click for $29/month.