Editing & Tools
Select, transform, group, restack, and inspect objects on the Canvas — including editing individual HTML elements inside a frame.
Tools#
Switch tools from the toolbar or with a keyboard shortcut:
| Key | Tool | What it does |
|---|---|---|
V | Select | Select, move, resize, and rotate objects |
H | Pan | Drag to move around the canvas |
F | Frame | Draw a new frame |
C | Container | Draw a frame with hidden chrome |
S | Section | Draw a section to group objects |
R | Rectangle | Draw a rectangle |
O | Ellipse | Draw an ellipse or circle |
T | Text | Add a text block |
P | Pen | Draw vector paths with Bézier curves |
E | Edit | Edit individual HTML elements inside a frame |
Selecting and transforming#
- Click to select;
Shift-click to add to the selection. - Drag to move; selected objects (and a section's children) move together.
- Resize with the corner and edge handles; rotate with the handle above the selection.
- Snapping aligns objects to each other with on-screen guides as you drag.
- Batch editing — select multiple objects of any type and move, resize, or restyle them together.
Layers and stacking#
Right-click any object for the context menu:
- Copy / Cut / Paste / Duplicate
- Bring to Front / Send to Back
- Delete
You can also reorder layers by dragging them in the outliner. Right-clicking empty canvas lets you Paste (including SVG copied from Figma) and toggle the UI chrome.
Sections#
Sections are organizational containers that sit behind the objects they hold:
- Drag objects onto a section to make them children — the section highlights as you hover.
- Moving or deleting a section affects all of its children.
- Style a section's fill, stroke, and corner radius to label areas of your canvas.
Edit mode and the element inspector#
Frames are real HTML documents, so you can edit them at the element level. Enter Edit mode (E, or hold Cmd/Ctrl momentarily in Select mode) and click into a frame:
- The element inspector opens with a tree of the frame's HTML elements.
- Right-click an element inside the frame to target it directly.
- Edit per-element properties: layout (flexbox/grid, gap, alignment), sizing (width, height, padding, margin), typography (font, size, weight, spacing, color, alignment), appearance (background solid or gradient, borders, corner radius, opacity), transform (translate, rotate, scale), effects (blur, brightness, contrast, etc.), and shadows (drop and inner).
On mobile, the inspector opens as a bottom sheet.
Measure mode#
Turn on Measure mode and hover over objects to see their dimensions and the spacing between them — handy for checking alignment and gaps relative to your current selection.
Playing frames#
Frames with CSS or JavaScript animations can be played — click the play button on a selected frame to run it. Only one frame plays at a time, and frames pause automatically when scrolled out of view.
Responsive presets#
Quickly resize a frame to common breakpoints with device presets — Desktop (1280px), Tablet (768px), and Mobile (393px) — to check how a design holds up across screen sizes.
Undo and redo#
Every change — creating, moving, restacking, editing, deleting — is undoable with Cmd/Ctrl + Z (and redo with Cmd/Ctrl + Shift + Z). Undo and redo are collaboration-aware, so they behave correctly when you're working with others.