How to Make a GUI in Roblox

Decide what the GUI helps the player do

Name the screen by its job: main menu, shop, inventory, settings, loading screen, or HUD. Write down the primary action a player should notice first. A main menu may lead with Play; a shop may lead with a selected item and Buy button.

Keep the first version narrow. Define the default state, the main action, and one way to leave or close the screen. Extra tabs and decorative states are easier to add after the core path works.

Build a clear ScreenGui hierarchy

Use one ScreenGui as the root, then parent related elements under named containers. A menu panel should own its title and buttons. A settings panel should own its rows. Clear names make generated code readable and let later scripts find the right object without searching the entire PlayerGui.

Layout helpers belong under the container they arrange. UIListLayout stacks siblings, UIGridLayout tiles item cells, UIPadding creates internal space, and UICorner or UIGradient changes appearance without becoming a separate visual panel.

ScreenGui
└── MenuPanel
    ├── Title
    ├── PlayButton
    ├── SettingsButton
    └── UIListLayout

Make the layout responsive

Use Scale for proportions that should follow the viewport and Offset for small fixed details such as padding or minimum touch sizes. Center important panels with AnchorPoint instead of compensating with arbitrary negative offsets.

Aspect-ratio and size constraints keep a panel usable without letting it become too wide, too small, or unreadable. Check the same scene in desktop, tablet, and mobile previews before spending time on final polish.

panel.Size = UDim2.fromScale(0.42, 0.62)
panel.Position = UDim2.fromScale(0.5, 0.5)
panel.AnchorPoint = Vector2.new(0.5, 0.5)

Connect buttons to visible states

Start with interface behavior you can see: show a settings panel, hide a menu, toggle an inventory, or disable the entire GUI. Preview those states and confirm every target has a clear name.

Use a RemoteEvent when a button requests server-owned work. Use a Teleport action only for known destination Place IDs. The client may send the request, but the server must decide whether the player is allowed to complete it.

Preview desktop, tablet, and mobile states

Preview is not only a visual check. Click buttons in the intended order, confirm panels open and close, and look for states that trap the player without a visible way back. RemoteEvent and Teleport previews should explain the request without pretending to execute live server behavior.

Repeat the path at each device size. Look for clipped labels, buttons that become too small, unexpected horizontal scrolling, and panels whose primary action falls below the viewport.

Export, install, and test in Roblox Studio

Download the ZIP package when you want the scene JSON, generated scripts, and placement instructions together. Put client Luau in a LocalScript under StarterGui and optional server Luau in a Script under ServerScriptService.

Run the game in Studio and confirm the ScreenGui appears in PlayerGui. Test server-backed actions with the correct multiplayer or published environment. Keep the JSON export so you can revise the editable design instead of treating generated Luau as the only source.