Design EditorDocsUsing the editor
Canvas and tools
The canvas fills the window and the panels float over it. Every tool has a single-key shortcut.
1Tools
| Tool | What it does |
|---|---|
Select V | Select, move and resize layers. |
Frame F | Draw a frame. A top-level frame is a board, screen or slide. |
Rectangle R | The shape slot. Its menu also has Polygon, Star, Line, Icon and Browser. |
Ellipse O | Circles and ellipses, with arcs and donuts. |
Polygon Y, Line L | Regular polygons and straight lines. |
Pen P | Paths with several anchors. Enter or Escape finishes the path. |
Pencil Shift+P | Freehand lines, smoothed into curves. |
Text T | Click for a growing text box, drag for a fixed width. |
Note N | Note, context and prompt cards for yourself or an agent. |
| Image | Place a PNG, JPEG, GIF, WebP or SVG file. |
Hand H | Pan the canvas. Holding Space does the same. |
2Special shapes
- Star: a polygon with an inner radius. The panel sets the number of points and the inner radius.
- Ellipse arcs: Start, Sweep and Inner in the panel turn an ellipse into a pie slice, an arc or a donut.
- Icon: picks from Lucide, Feather, Simple Icons (brands), Material Symbols in outlined, rounded and sharp, and Phosphor.
- Pencil smoothing: Precise, Balanced or Smooth, set in Settings, System. The pencil cursor style is there too.
3Live web pages on the canvas
The Browser shape shows a real web page as a Desktop, Tablet or Phone device, with a URL, zoom and scroll. It uses the Chrome, Chromium, Edge or Brave already installed on your computer; set DE_BROWSER_PATH to pick another one.
Pages in a file you open stay paused until you click Load pages, so opening a file never visits a site by itself.
4Notes and scripts
Note, context and prompt cards live only on the canvas. They are left out of every export, so you can leave instructions for an agent next to the design.
A script node is a frame drawn by JavaScript. Its @input parameters show up as fields in the Script section of the panel.
6Align, snap and combine
Dragging a layer shows smart guides and snaps to the edges and centres of the layers around it.
Align left, centre, right, top, middle or bottom from the panel. Distribute horizontally or vertically once three or more layers are selected.
Boolean operations combine shapes: Union Cmd+Alt+U, Subtract Cmd+Alt+S, Intersect Cmd+Alt+I, Exclude Cmd+Alt+X. They are also in the layer menu. Frames that hold other layers cannot be combined.
7Copy and paste
Copy, cut and paste work on layers. Copying layers in Figma and pasting them here brings them in as editable layers. Pasting HTML from anywhere turns it into layers too.