How to Make a GUI in Roblox Studio (Step by Step)

A GUI in Roblox is any 2D interface on the player's screen. That includes menus, shop windows, health bars and buttons. Every one of them starts the same way, with a ScreenGui.

This walkthrough builds a small menu with an open button and a close button. It works on phones, tablets and PCs.

How do you add a ScreenGui in Roblox Studio?

Anything you put inside StarterGui is copied into each player's PlayerGui when their character spawns. PlayerGui is where on-screen UI lives during the game.

1. Open your place in Roblox Studio with the Explorer and Properties windows showing.
2. In the Explorer, hover over StarterGui and click the + button next to it.
3. Type ScreenGui in the search box and select it.
4. Right-click the new ScreenGui, choose Rename and call it MainGui.

A few ScreenGui properties are worth knowing:

• Enabled turns the whole GUI on or off.
• ResetOnSpawn is on by default. It rebuilds the GUI every time the player respawns. Turn it off for menus that should keep their state after the player dies.
• IgnoreGuiInset lets the GUI cover the area behind Roblox's top bar. Leave it off for normal menus.
• DisplayOrder controls stacking between ScreenGuis. Higher numbers draw on top.

Studio shows StarterGui content in the viewport while you edit, so you can watch your UI take shape as you build it.

How do you build a menu with Frames, labels and buttons?

Each of these objects has a different job:

• Frames are containers.
• TextLabels show text.
• TextButtons are text the player can click or tap.

Children are positioned relative to their parent. A button inside a Frame moves and resizes with that Frame.

Step 1: Add the menu Frame

1. Hover over MainGui, click +, insert a Frame and rename it MenuFrame.
2. In Properties, set AnchorPoint to 0.5, 0.5. The Frame is now positioned from its center instead of its top-left corner.
3. Expand Position and set both X Scale and Y Scale to 0.5, with both Offsets at 0. The Frame is now centered on screen.
4. Expand Size and set X Scale to 0.4 and Y Scale to 0.5, with both Offsets at 0.
5. Pick a BackgroundColor3 that fits your game.

Step 2: Add a title

1. Insert a TextLabel inside MenuFrame and rename it Title.
2. Set its Size to Scale 1 by 0.2 and its Position to 0, 0.
3. Set Text to Menu and turn on TextScaled.
4. Set BackgroundTransparency to 1 so only the text shows.
5. Change the font with FontFace and the color with TextColor3.

Step 3: Add a close button

1. Insert a TextButton inside MenuFrame and rename it CloseButton.
2. Set AnchorPoint to 1, 0 and Position to Scale 1, 0. This puts the button in the top-right corner of the menu.
3. Set Size to Scale 0.12 by 0.15.
4. Set Text to X and turn on TextScaled.

Step 4: Add an open button

1. Insert a TextButton directly inside MainGui, not inside MenuFrame, and rename it OpenButton.
2. Set AnchorPoint to 0, 0.5 and Position to Scale 0.02, 0.5. The button now sits on the left edge, halfway down.
3. Set Size to Scale 0.1 by 0.08.
4. Set Text to Open and turn on TextScaled.

The open button sits outside the menu on purpose. If it were inside MenuFrame, it would vanish along with the menu and the player could never reopen it.

Why should you use Scale instead of Offset?

Every Size and Position in Roblox UI is a UDim2. A UDim2 has two numbers for each axis:

• Scale is a fraction of the parent's size. 0.5 means half.
• Offset is a fixed number of pixels.

New Frames start with Offset sizes. A window that is 400 pixels wide looks fine on a laptop, but it fills most of a small phone screen. A window that is 0.4 Scale wide takes up the same share of the screen on every device.

Offset still has uses:

• thin borders
• small fixed gaps
• a minimum size you never want to go below

Mixing Scale and Offset is fine. Just know why you are using each one.

How do you make a GUI fit phones and PCs?

Scale alone has one weakness: it stretches. Your 0.4 by 0.5 Frame is a wide rectangle on a widescreen monitor and closer to a square on a tablet. The fix is a UIAspectRatioConstraint.

1. Insert a UIAspectRatioConstraint inside MenuFrame.
2. Set AspectRatio to the width you want divided by the height. For example, 1.5 makes the Frame one and a half times as wide as it is tall.
3. Leave AspectType on FitWithinMaxSize and DominantAxis on Width to start.

The Frame now keeps the same shape everywhere. It shrinks to fit inside the Size you gave it. Add another constraint with AspectRatio 1 inside CloseButton so it stays square.

A few more habits keep the layout readable on every screen:

• Cap your text size. TextScaled fills the text box, which can look huge on large monitors. Add a UITextSizeConstraint and set MaxTextSize.
• Make buttons big enough for a thumb. Anything a player taps on a phone needs room.
• Keep the corners clear. Roblox's own top bar buttons sit at the top of the screen. On touch devices, the thumbstick and jump button take up the bottom corners.
• Test on other screen sizes. Use Studio's device emulator to preview phone and tablet screens before you publish.

How do you make a button open and close the GUI?

UI runs on each player's own device, so you script buttons with a LocalScript.

1. Hover over MainGui, click + and insert a LocalScript.
2. Replace its contents with this:

local screenGui = script.Parent
local openButton = screenGui:WaitForChild("OpenButton")
local menu = screenGui:WaitForChild("MenuFrame")
local closeButton = menu:WaitForChild("CloseButton")

menu.Visible = false

openButton.Activated:Connect(function()
    menu.Visible = not menu.Visible
end)

closeButton.Activated:Connect(function()
    menu.Visible = false
end)

1. Press Play to test. The menu starts hidden. Open toggles it and X closes it.

Here is why the script is written this way:

• Activated fires for mouse clicks, screen taps and gamepad presses. That makes it a good default for games that run on many devices.
• Visible hides a Frame and everything inside it, so one line shows or hides the whole menu.

Some buttons do things that matter to the game, such as buying an item, giving a reward or saving progress. For those, the LocalScript should fire a RemoteEvent. A server Script then checks the request and does the work.

Never trust the client with purchases or currency. For real purchases, see game passes and developer products.

How do you make the GUI look better?

Roblox has UI modifier objects that you drop inside a GUI element to change how it looks or arranges its children:

• UICorner rounds the corners. Adjust CornerRadius.
• UIStroke adds an outline around a Frame or around text.
• UIGradient blends colors across an element.
• UIPadding adds space between a Frame's edge and its children.
• UIListLayout stacks children in a row or column, with even Padding between them. This is handy for a column of menu buttons.
• UIGridLayout arranges children in a grid. It is the usual starting point for a shop or inventory.

For icons, use an ImageLabel or ImageButton and set its Image property to an image asset you have uploaded.

If your next step is a store window, the Roblox shop GUI guide builds on everything here. The ScreenGui reference and UIAspectRatioConstraint reference list every property.

Why isn't my GUI showing up?

Work through these checks in order:

1. Is the ScreenGui inside StarterGui? A ScreenGui in Workspace does not appear on screen. To put UI on a part, use a SurfaceGui or BillboardGui instead.
2. Is it turned on? Check Enabled on the ScreenGui and Visible on each Frame.
3. Is something covering it? Another element may be drawn on top. Adjust ZIndex inside a ScreenGui, or DisplayOrder between ScreenGuis.
4. Is it a LocalScript? A regular Script with its RunContext set to Legacy does not run inside PlayerGui.
5. Is your script editing the right copy? Changing StarterGui during a game does not update players who have already spawned. Edit the player's copy through Players.LocalPlayer.PlayerGui instead.
6. Is it off-screen or zero-sized? Check Size and Position for a Scale above 1 or a Size of 0.

Doing it faster with BloxMaps

BloxMaps is an AI tool that makes Roblox game UIs, maps and whole games from a typed description. You describe the UI you want, such as a main menu or a shop window, and it builds it. You get a Roblox Studio file (.rbxl) to open and edit yourself. Every frame, button and script can be resized, restyled or rewritten with the same steps from this guide.

Making and previewing is free, with 3 previews a day on the Free plan, shared across UIs, maps and games. You pay only to export, with credits (a pack of 3 costs $2.99) or a plan.

BloxMaps is not made by or affiliated with Roblox Corporation. If you would rather start from a working UI than an empty ScreenGui, try the BloxMaps maker.