UI Designer — Canvas & tools¶
The centre of UI Designer is the artboard: a device-sized frame for the open ScreenGui. Layers can sit outside the artboard; pan around to keep editing overflow instead of clipping it away.
There will be bugs
This is beta. If something breaks, please report it on the DevForum plugin thread or Discord.
Tools¶
The floating bottom toolbar:
| Tool | What it does |
|---|---|
| Select | Click to select, drag to move, handles to resize. Rubber-band on empty canvas for multi-select |
| Frame | Drag to create a Frame. Nested inside the last selected frame when applicable |
Hold Alt while dragging a selection to duplicate (leave a copy behind), Figma-style.
Pan and zoom¶
| Input | Action |
|---|---|
| Space + left-drag | Pan (hand tool) |
| Middle-mouse drag | Pan |
| Ctrl + scroll | Zoom toward the cursor |
| Plain scroll | Pan (Shift = horizontal) |
| Trackpad (Mac) | Two-finger pan and pinch zoom while the pointer is over the canvas |
| Tool strip + / − / fit | Zoom in, out, or fit the artboard |
Shortcuts (fixed — listed under Preferences → Keybinds):
- Ctrl + = zoom in
- Ctrl + − zoom out
- Ctrl + 0 zoom fit
Preferences → Canvas can invert pan. Preferences → Trackpad has pan and pinch sensitivity.
Selection and handles¶
- Move / resize on the selection overlay. Aspect-lock and centre-scale follow the usual modifier keys on the handles.
- Anchor point — drag the pivot on the canvas instead of guessing in the inspector.
- Corner radius — drag the knobs on the selection (hold Alt for per-corner control).
- Spacing — while dragging between elements, px / % tags show gaps. Tidy up and Distribute even out lists and grids.
- Snap — edges and centres snap to siblings and the artboard, with sticky guides.
- Size tag on the selection shows current width × height.
Double-click a text layer to edit on the canvas. Rich text opens a proper editor when the element uses RichText.
Viewport size¶
The tool-strip dropdown sets the artboard resolution:
- Phones — iPhone, Pixel, Galaxy presets
- Tablets — iPad and Android tablet sizes
- Computers — HD, Full HD, QHD, 4K, MacBook, Ultrawide
- Custom — save your own size; favourite presets you use often
- Flip — swap width and height
This only changes the designer artboard. It does not resize the player’s real screen.
Hierarchy¶
- Click a row to select; Ctrl/Shift for multi-select (same idea as the canvas).
- Ctrl + R — rename the selection. One layer edits inline; several layers open a batch rename dialog (optional numbered suffixes like
Button 1,Button 2). - Drag rows to reorder or nest.
- Right-click for the same arrange menu as the canvas.