How to add a UI kit to your Roblox game

1. 1

   Insert it into StarterGui

   In the Explorer, right-click StarterGui, choose Insert from File and pick the .rbxm. UI kits are ScreenGuis, and everything in StarterGui is copied to each player when they join.

2. 2

   See it

   It shows in the editor while you work. Press Play to see it the way players do.

3. 3

   One screen at a time

   Most kits have several screens. Untick Enabled on a ScreenGui, or Visible on a frame, to hide it while you work on another.

A lot of Roblox players are on phones, so try small screens before you publish.

• Pick a phone and a tablet in the Device Simulator toolbar above the 3D view.
• Sizes and positions in Scale (the first number of each pair) grow with the screen; Offset (the second, in pixels) doesn't. Kits that fit every screen use Scale.
• A UIAspectRatioConstraint keeps a frame's shape on every screen.
• Keep buttons out of the bottom corners on phones: the joystick and the jump button sit there.

• Change the words in each label's Text, the colors in BackgroundColor3 and TextColor3, and gradients in its UIGradient.
• Pictures are ImageLabels and ImageButtons: upload your own images to Roblox and put their ids in Image.
• The font is each label's FontFace.

A kit's buttons often do nothing until you connect them. Add a LocalScript inside the ScreenGui, like this one that opens and closes a shop:

local gui = script.Parent
local shop = gui:WaitForChild("Shop")
local button = gui:WaitForChild("ShopButton")

button.Activated:Connect(function()
	shop.Visible = not shop.Visible
end)

Change the names to the kit's own frames and buttons. Activated works with a mouse, a touch screen and a controller.