How To Make Roblox UI

Source: Dev.to

Step 1: Make the UI

• Open Roblox Studio.
• In the Explorer, go to StarterGui.
• Insert a ScreenGui and rename it to MainMenuGui.
• Inside MainMenuGui, insert a Frame and rename it to MainFrame.
• Inside MainFrame, insert:
  • A TextLabel named Title.
  • A TextButton named PlayButton.

At this point, if you press Play in Studio, you should see the menu.

UI Settings

MainFrame

• Size: {1, 0}, {1, 0}
• BackgroundColor3: dark gray (or any color you prefer)
• BorderSizePixel: 0

Title

• Text: MY GAME
• TextScaled: true
• Size: {0.6, 0}, {0.2, 0}
• Position: {0.2, 0}, {0.15, 0}
• BackgroundTransparency: 1

PlayButton

• Text: PLAY
• TextScaled: true
• Size: {0.3, 0}, {0.12, 0}
• Position: {0.35, 0}, {0.5, 0}

Step 2: Main menu script

1. Insert a LocalScript inside MainMenuGui.

Script code

local player = game.Players.LocalPlayer
local gui = script.Parent
local mainFrame = gui:WaitForChild("MainFrame")
local playButton = mainFrame:WaitForChild("PlayButton")

playButton.MouseButton1Click:Connect(function()
    mainFrame.Visible = false
    print("Game Started")
end)

How this script works

• LocalScripts run on the player’s computer, which is required for UI.
• script.Parent refers to the ScreenGui.
• WaitForChild ensures the UI elements exist before they are accessed.
• MouseButton1Click fires when the button is clicked.
• Setting Visible to false hides the menu instantly.

No tricks, no magic.

Step 3: Lock the player until Play is pressed (optional)

If you want the player to be unable to move until they click Play, follow these steps:

1. Go to StarterPlayer → StarterPlayerScripts.
2. Insert a LocalScript.

Script code

local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

humanoid.WalkSpeed = 0
humanoid.JumpPower = 0

local gui = player.PlayerGui:WaitForChild("MainMenuGui")
local frame = gui:WaitForChild("MainFrame")

frame:GetPropertyChangedSignal("Visible"):Wait()

humanoid.WalkSpeed = 16
humanoid.JumpPower = 50

What this script is doing

• The player spawns.
• Movement is disabled by setting WalkSpeed and JumpPower to 0.
• The script waits until the menu frame becomes invisible.
• Once Play is clicked (the frame hides), movement is restored (WalkSpeed = 16, JumpPower = 50).

This is a very standard Roblox setup.