Roblox UI Builder: Getting Started
Design screens in the browser, reuse components, and export your UI as Luau.
Create a project and its screens
Open the Roblox UI Builder and create a project. Each view represents a screen with its own ScreenGui. Use separate views for screens such as a main menu, settings panel, and shop.
You can rename or duplicate a view as your design grows. A project always keeps at least one view.
Build the layer hierarchy
Add a Frame as a container, then place text, buttons, or images inside it. Layers can be moved to another parent, duplicated with their children, or removed.
Use a ScrollingFrame for content that needs to scroll. TextLabel displays text, TextButton creates a text button, and TextBox accepts input. ImageLabel and ImageButton display image assets.
Style and arrange the UI
Use UICorner for rounded corners, UIStroke for borders, and UIGradient for gradients. Add UIPadding to give content room inside a container.
UIListLayout arranges items in a list; UIGridLayout arranges them in a grid. Size and aspect constraints help keep your layout consistent across display sizes.
Choose a target display and check your layout at different sizes before exporting.
Use images and reusable components
The asset library includes built-in icons and textures. You can also use images already uploaded to your account.
Save a selection as a component when you want to reuse it. Each inserted component gets its own copy of the layers and any animations or events it carries.
Draw mode lets you create an editable vector drawing. Review the drawing and use Save to Library with your connected Roblox account to turn it into a Roblox image asset.
Export to Studio
Choose plain Luau, React-Luau, or Fusion when exporting. Command-bar delivery is intended for Studio's command bar. Player delivery creates a LocalScript for StarterPlayerScripts.
You can export a single view or all views. Images that have not been uploaded to Roblox can be left empty in the generated script; check the export comments and upload those assets before using the UI.
Share a preview
Share links let others view the design and open a copy in the builder. Preview images include repeated watermarks over the design. These marks help identify the source but do not prevent someone from editing a screenshot.
Keep your original project as the editable source, and check the exported UI in Studio before publishing your game.