Tools
The tool bar holds every way to draw — move and scale, frames, shapes, the pen and pencil, text and comments — each with a single key; the canvas menu creates layers where you right-click.
Esta página está em inglês; a tradução está a caminho.
- Pick the Rectangle tool R and drag on the canvas
- Pick the Ellipse tool O and drag
- Open the shapes flyout and pick Star
- Set the fill colour in the Design panel
The tool bar#
The floating tool bar sits at the bottom centre of the canvas. A group shows the last tool you used; the chevron next to it opens the flyout with the rest.
| Tool | Key | What it does |
|---|---|---|
| Move | V | Select, move and resize layers |
| Scale | K | Resize a layer and scale its contents, strokes and effects with it (in the Move group) |
| Hand | H | Pan the canvas (or hold Space) |
| Frame | F | Draw a frame; the Design panel offers presets for phones, tablets and desktops |
| Rectangle | R | Draw a rectangle (shapes group) |
| Ellipse | O | Draw an ellipse (shapes group) |
| Line | L | Draw a line (shapes group) |
| Polygon, Star | — | Draw a polygon or a star (shapes group flyout) |
| Pen | P | Draw and edit vector paths |
| Pencil | ShiftP | Draw freehand (in the Pen group) |
| Text | T | Create a text layer |
| Comment | C | Place a comment |
| Inspect (Dev Mode) | ShiftD | Switch to Inspect mode |
| Ask Claude | CtrlAltI | Open the AI panel (desktop) |
Hold Shift while drawing for squares, circles and 45° lines; hold Alt to draw from the centre. A click without a drag makes a 100 × 100 layer. After a layer is drawn, the tool stays the one you had and the focus moves to the layer’s X field in the Design panel; Esc brings it back to the canvas (turn this off with ud.editor.focusPropertiesOnCreate).
Pen and pencil#
The Pen draws vector networks: click for corners, drag for curves, and click the first point to close the path. Double-click a vector (or press Enter) to edit its points and handles. The Pencil draws freehand and smooths the stroke into a path.
Select two or more shapes for a Boolean Operation (union, subtract, intersect, exclude). CtrlE flattens, CtrlShiftO outlines a stroke and CtrlAltM uses a layer as a mask. Quick actions offer Offset Path, Simplify Path, Join Paths and Reverse Path Direction.
Text#
- Press T and click to place a text
- Type, then Esc to finish
- Set the font size
- Pick a heavier weight
Click to place a text that grows with what you type, or drag a box for a fixed width. Double-click a text to edit it again.
Text on a path. Select a text layer and a line, ellipse, vector, star, polygon, rectangle or boolean, then choose Attach to path in Quick actions or in the Typography section: the text runs along the shape’s outline. Offset sets where it starts, Side which side of the path it sits on, Align Start, Center or End. Detach from path sets it straight again.
Comments, hand and zoom#
C switches to Comment mode: click the canvas to pin a thread (see Handoff to code). H or holding Space pans; the mouse wheel scrolls and Ctrl with the wheel zooms.
| Key | View |
|---|---|
| Shift0 | Zoom to 100 % |
| Shift1 | Zoom to fit |
| Shift2 | Zoom to selection |
| + and - | Zoom in and out |
| ShiftR | Rulers on or off (drag from a ruler to add a guide); UI Designer: Toggle Rulers in the Command Palette |
| CtrlShift4 | Layout guides on or off |
| CtrlY | Outline mode |
Toggle Pixel Preview and Toggle Minimap are in the Command Palette.
The canvas menu#
- Right-click the empty canvas
- Create ▸ Rectangle: 100 × 100 at the point
- Right-click the layer and choose Properties…
- Change it in the Design panel
- On the empty canvas: Create ▸ (Frame, Rectangle, Ellipse, Line, Polygon, Star, Text), Paste here, Select all, Zoom to fit and Properties….
- On a layer: the layer joins the selection and the layer menu opens (Cut, Copy, Paste, Duplicate, Delete, Arrange, Create ▸, Group, Show/Hide, Lock, Select matching ▸, Rename…, the component and Claude actions), with Properties… last.
Create ▸ puts a 100 × 100 layer (a line 100 long, a text “Text”) with its top-left corner at the point you right-clicked, inside the frame under it; hold Shift while choosing to centre it on the point. The new layer is selected, the current tool stays, and the focus goes to the Design panel: the creational focus. Type its position and size, Enter to move to the next field, Esc to return to the canvas. Paste here pastes the clipboard’s layers or image at the point. Properties… opens the Design panel with the focus in its first field. Submenus open on hover, Right or Enter; Left or Esc closes only the submenu.
Selecting and arranging#
- Click to select, Shift+click to add, drag on the empty canvas for a marquee. CtrlA selects every layer of the page.
- Enter selects the children, ShiftEnter the parent, Tab the next sibling.
- Arrow keys nudge by 1 px, with Shift by 10 px.
- CtrlG groups, CtrlShiftG ungroups, CtrlAltG wraps the selection in a frame.
- CtrlD duplicates, Delete removes.
- Ctrl] and Ctrl[ move up and down one place; with Shift, to the front and the back.
- ShiftH and ShiftV flip horizontally and vertically.
- CtrlR renames; UI Designer: Rename Layers… renames many layers at once with a pattern.
- Smart guides and distance labels appear while you move.
Quick actions#
Ctrl/ opens Quick actions: one search over every editor command, your scripts in .design-scripts/ and Claude. It is the fastest way to reach a command whose shortcut you do not remember.