Checking your Roblox connection...
The size your UI is laid out at before it is scaled to each display.
Settings
Selecting and moving
Click an instance to select it (or pick it in Layers). Drag to move, and use its handles to resize. Shift/Ctrl-click adds or removes an instance from the selection, and dragging moves the whole selection together. Align, Space, Place and Smart scale act on it.
While dragging, smart guides snap to the centre and edges of the parent and of neighbouring elements (hold Alt to drag freely). Holding Shift moves in fixed steps instead; set the step in the hint bar. A child controlled by a UIListLayout/UIGridLayout can't be dragged directly: edit its LayoutOrder or the layout's own properties, exactly like Studio.
To turn a layer, drag from just outside one of its corners (the cursor becomes a curved arrow): it turns about its centre. Shift snaps to 15 degrees and Alt turns it about the opposite corner instead. Select several layers that share a parent and the same drag turns them together. A layer's frame turns with it, and dragging an edge resizes it along its own sides. A child placed by a layout is not turned on the canvas (set its Rotation if the layout allows it).
Dragging things in
Drag a class from the Insert tab, a card from Components, or an icon, texture or picture from the Library onto the canvas. It goes into the layer under the pointer (that layer is outlined, with a note of what will happen) and is centred where you let go. A modifier such as a UICorner or UIStroke is added to the layer it lands on instead. Drop a picture onto an ImageLabel or ImageButton and it becomes that layer's image. An image file from your computer works too, once your Roblox account is connected. Clicking an item still adds it to the selected layer.
Typing on the canvas
Double-click a text layer (or select it and press Enter) to type straight on it. Select words and use the bar above to make them bold, italic, underlined, another colour, size or font, outlined or highlighted - you never see a tag; it is saved as Roblox RichText markup, and RichText is turned on for you when you style anything. Ctrl+B, I and U work as usual. Esc or clicking elsewhere finishes; the whole edit is one undo step. Text whose tags are broken shows exactly as typed in Roblox, so it can only be edited as plain words.
Several layers at once
With several layers selected, what you change in the inspector applies to all of them: colours, opacity, sizes, corners, strokes and the rest. Position moves them together by the same amount, and a corner, stroke, gradient or shadow is added to any selected layer that does not have one yet. A style from the rich-text bar reaches the other selected text layers too. Names and the words themselves stay one layer's own. The values shown are those of the last layer you picked.
Rounded corners
The Corner row in Appearance rounds a layer. The slider gives all four corners one radius, as Roblox's UICorner.CornerRadius does; the button beside it opens a field for each corner (TopLeftRadius, TopRightRadius, BottomRightRadius, BottomLeftRadius), and while they differ the row says Mixed. A radius is a number of pixels plus a share of the layer's smaller side, and can never be more than half of it (a large one makes a pill). Roblox does not apply a UICorner to a ScrollingFrame, so round a Frame inside it instead. Giving corners their own radii is a Roblox Studio beta: an exported script says so, and it needs File > Beta Features > New UI Capabilities turned on in Studio.
The canvas
The black screen your UI is drawn on can have a color and a picture of its own. Click the empty canvas (or the ScreenGui in Layers) and use the Canvas section of the Inspector: pick a color, or Choose a picture (a screenshot of your game, say), drop one on that box, or paste one with Ctrl+V and answer Canvas picture. Fit decides how it fills the screen and Darken puts black over it so your UI stands out. It is only for designing: it is not exported, shared or sent to AI tools, and the picture is kept on your computer and in the project, not uploaded to Roblox. The swatch above the canvas colors the workspace around it.
Choosing colours
Every colour opens the studio's own picker. The Color3 tab has a saturation square and a hue bar, Studio's R G B and Hue / Sat / Val boxes (0-255, as in Studio's Select Color), its Basic colors, your own Custom colors (kept in this browser: the + adds the colour you have, the cross on a swatch removes it) and the colours already used in the project. The BrickColor tab is Studio's honeycomb of the 128 palette colours, with a search over all 208 BrickColors by name or number and a note of which BrickColor your colour is, or is nearest to. Roblox keeps a UI colour as a Color3, so a BrickColor is written as its colour. The colour box reads Luau too: paste Color3.fromRGB(196, 40, 28), Color3.new(0.77, 0.16, 0.11) or BrickColor.new("Bright red"), and the line at the bottom writes the colour back out to copy. Where your browser has an eyedropper, it picks any colour on the screen.
Keyboard
The view
The scroll wheel zooms toward the cursor (or pinch on a touch screen). Pan by dragging with the middle mouse button, holding Space, or one finger on empty canvas; Shift/Alt + wheel also pans.
The button at the end of the tabs in the left panel, and the one at the top of the Inspector, fold them away to a thin rail so the canvas gets the room; pressing a tab on the left rail opens it again. Ctrl+\ folds or shows both. Your choice is remembered (Code mode keeps its own).
Drag the small label in front of a number to scrub its value; Shift makes it 10 times faster and the arrow keys step it.
Animating
In Animation mode, editing Position, Size, colours, transparency and other numeric properties records keyframes at the playhead instead of changing the resting layout. Turning a layer on the canvas keys its Rotation (and moving it keys its Position), and a turn past half a turn keeps going the way you dragged it. Click the diamond beside a property to key it, drag diamonds to retime them, and pick an easing from easings.net.
Every animation becomes code: two functions near the top of the exported script, Animations["View"]["Name"].Play() and .Stop(), that you can call from anywhere. Tick Play automatically to start one when the UI loads.
Drawing
Draw is a full vector design tool for making your own pictures: shapes, pen and pencil, boolean shapes and a Shape Builder, an eraser that also works on pictures and text, gradients and effects, text with per-word styling, warp, blend, ornate frames and a magnetic pen that snaps to edges in a reference picture. It has its own undo history and keeps your drawing between visits, separate from your design. Save to Library turns what you have selected (or everything, when nothing is) into a transparent PNG, uploads it to your Roblox account and keeps it in the Library's Images tab, ready to put on an ImageLabel or ImageButton like any other picture. Coming from Figma? Copy your frame as SVG there and paste it into Draw.
Events
Select a layer and open its Events tab to make it react: when it is clicked, hovered, or (for a text box) focused, play an animation, go to another view, show or hide something, or run your own Luau. Choose the ScreenGui itself for When the UI loads. In your own Luau, UI.<name> reaches an element; the Insert an element list writes it for you.
Trying it out
Interact mode runs your events on the canvas the way the exported UI will: click a button and its animation plays, hover, scroll, type in a text box, and views switch when an event says so. Nothing you do there changes the project, and R starts over. Mouse and Touch decide which events a press can make (a finger has no hover); Tab and the arrow keys select like a gamepad. The panel on the right lists every event, with a play button to run each by hand. Your own Luau cannot run here - it is listed, not run.
Components
Select a button, a card or a whole panel and press Save selection as component in the Components tab (or right-click it). The layers inside come along, with their animations and events. Click a saved component to add it to the selected layer, as many times as you like; each copy is its own. To change one, edit a copy, select it, and choose Update from selection in the card's menu. They are kept in this browser, or on your account when you are signed in. Library icons come along by name, so they upload to whichever Roblox account exports the design.
Icons, textures and images
On an ImageLabel or ImageButton, Library opens 500 icons and 50 generated textures, plus My Images and Images, where the pictures you upload or draw are kept. A pick shows on the canvas straight away; with your Roblox account connected it uploads to your own account (once) and fills in the asset id. They are white shapes, so the image colour tints them. Textures that tile set the scale type to Tile.
Exporting
Choose how the script will run. Command bar builds the UI into StarterGui as real instances with a controller script for the animations and events: paste it into Studio's command bar and press Enter. LocalScript is a script for StarterPlayerScripts that builds the UI when the game starts.
The welcome page
Signed out, the page you land on describes the builder and opens it with one button; tick Go straight to the builder next time there to skip it. Signed in, it shows your saved projects instead, with the same button to start a new one. To see the description page again, open the welcome page in a new tab.
Sharing
Sign in, then Share publishes a public link to a copy of your design. Anyone can look through every view, share it on, or open their own copy. Update shared copy refreshes it and Stop sharing takes it down. The panel shows how many people opened the link, saw its preview, and pressed a share button.