How to Create a Roblox GUI from Scratch (2026)

What is a Roblox GUI?

A GUI (Graphical User Interface) in Roblox is anything drawn on the player's screen that is not part of the 3D world - menus, health bars, inventory panels, shop windows, and loading screens. Every GUI starts with a ScreenGui, which is the root container that tells Roblox "draw these elements on the screen." Inside the ScreenGui you place Frames, TextLabels, TextButtons, ImageLabels, and layout objects. Think of ScreenGui as the canvas and the other objects as the paint.

The three building blocks: ScreenGui, Frame, and TextLabel

Every Roblox GUI, no matter how complex, is built from the same three objects. ScreenGui is the root - it goes under StarterGui and tells Roblox to render its children on screen. Frame is a rectangle container - you use it to group other elements, draw panels, and create layout structure. TextLabel is text on screen - titles, labels, instructions, anything that displays words. Once you understand these three, every other GUI object (TextButton, ImageLabel, ScrollingFrame) is a variation on the same idea. A TextButton is just a TextLabel you can click. An ImageLabel is just a Frame that shows a picture instead of a solid color.

1-- How to Create a Roblox GUI - Beginner Example
2-- Place in: StarterGui (LocalScript)
3
4local Players = game:GetService("Players")
5local player = Players.LocalPlayer
6
7-- Create the ScreenGui (root container)
8local screenGui = Instance.new("ScreenGui")
9screenGui.Name = "MyFirstGui"
10screenGui.ResetOnSpawn = false
11screenGui.Parent = player:WaitForChild("PlayerGui")
12
13-- Create a Frame (a visible panel)
14local panel = Instance.new("Frame")
15panel.Name = "Panel"
16panel.Size = UDim2.new(0.4, 0, 0.3, 0)
17panel.Position = UDim2.new(0.5, 0, 0.5, 0)
18panel.AnchorPoint = Vector2.new(0.5, 0.5)
19panel.BackgroundColor3 = Color3.fromRGB(30, 30, 40)
20panel.Parent = screenGui
21
22-- Add a TextLabel (text on the panel)
23local title = Instance.new("TextLabel")
24title.Name = "Title"
25title.Size = UDim2.new(1, 0, 0.3, 0)
26title.Position = UDim2.new(0, 0, 0, 0)
27title.BackgroundTransparency = 1
28title.Text = "My First GUI"
29title.TextColor3 = Color3.fromRGB(255, 255, 255)
30title.TextScaled = true
31title.Parent = panel

Scale vs Offset: why your GUI breaks on mobile

The single biggest beginner mistake is sizing GUI elements with Offset (pixels) instead of Scale (percentages). If you set a button to 300 pixels wide, it looks fine on a 1920px monitor but nearly fills a 375px phone screen. Scale fixes this: a Size of UDim2.new(0.4, 0, 0.1, 0) means 40% of the parent width and 10% of the parent height, on any device. Use Scale for layout, Offset only for small fixed values like padding and borders. This one rule prevents 90% of mobile GUI bugs.

Adding your first button

A TextButton is a TextLabel the player can click. You create it the same way as a TextLabel, then connect its MouseButton1Click event to a function that runs when the player taps it. This is how every menu Play button, shop Buy button, and settings toggle works. The connection fires on the client, so for anything that affects the game (starting a match, buying an item), you fire a RemoteEvent to the server to do the real work.

1-- Add a TextButton to the panel
2local playButton = Instance.new("TextButton")
3playButton.Name = "PlayButton"
4playButton.Size = UDim2.new(0.6, 0, 0.3, 0)
5playButton.Position = UDim2.new(0.2, 0, 0.5, 0)
6playButton.BackgroundColor3 = Color3.fromRGB(109, 93, 251)
7playButton.Text = "Play"
8playButton.TextColor3 = Color3.fromRGB(255, 255, 255)
9playButton.TextScaled = true
10playButton.Parent = panel
11
12-- Connect the click event
13playButton.MouseButton1Click:Connect(function()
14	print("Player clicked Play!")
15	-- Fire a RemoteEvent to the server to start the game
16end)

Getting your GUI into Studio

Once your GUI is built, it needs to go into StarterGui so Roblox loads it for every player. In Studio, open the Explorer panel, find StarterGui, right-click, and insert a LocalScript. Paste your GUI code into that LocalScript. When you press Play, the script runs and builds the GUI on the player's screen. You can also build the GUI visually in Studio by inserting ScreenGui, Frame, and TextLabel instances directly in the Explorer, but writing it in code (like above) means you can generate it with a tool and paste it in one step.

Common beginner mistakes to avoid

• Using Offset (pixels) for sizing instead of Scale (percentages) - breaks on mobile
• Forgetting AnchorPoint when centering - the element's corner ends up at the center, not its middle
• Putting GUI code in a regular Script instead of a LocalScript - GUIs must run on the client
• Not parenting the ScreenGui to PlayerGui - the GUI never appears on screen
• ResetOnSpawn left as true - the GUI resets every time the player respawns, losing state

Frequently asked questions