The canvas

The canvas holds your artboards. Each artboard is one screen or page, with its name and size above it.

The top bar

From left to right: the mode menu and the design's name with Saved; the tools; Undo and Redo; zoom; Prototype view and Present (see Prototype and Present); Copy as code (see Export and code); the sun or moon for light or dark; Design settings; and Close design.

On a narrow window, some of these fold away to make room. Their shortcuts still work.

Tools

Esc goes back to the Move tool. Drawing with Rectangle, the shapes, the pen, Text or Image only works inside an artboard.

You can also drop picture files straight onto an artboard (PNG, JPEG, GIF, WebP, AVIF or SVG).

Move around

Select

• Click selects the innermost layer under the pointer: the text, not the card it sits in.
• Ctrl+click (⌘+click) selects the outer layer instead.
• Double-click goes one level deeper, and edits text or a shape's points.
• Shift+click adds to the selection or takes away from it.
• Esc selects the parent, then the artboard, then nothing.
• Enter edits the selected text or shape's points, or selects the first layer inside.
• Click an artboard's name above it to select the whole artboard. Drag the name to move the artboard.
• Ctrl+A selects the whole artboard you're in.
• Drag on the empty canvas to select every artboard the box touches. Drag from an artboard's background to select the layers inside the box.

Locked layers can't be picked on the canvas. Select them in the layers list.

Edit text

Double-click text (or click selected text) to type. Enter finishes, Shift+Enter adds a line, Esc cancels.

Shapes and the pen

Ellipses, lines, arrows, polygons, stars, pen paths and icons are vector layers: real drawn shapes. Resize one and it stretches, while its outline keeps its thickness. Set its Fill and Stroke (colour, width, dashes, ends and corners) in the right panel.

You can also paste SVG code, such as an icon copied from an icon website, and it becomes a vector layer you can recolour and edit.

Draw with the pen

Pick the Pen (P) and click inside an artboard:

• Click adds a corner point.
• Drag adds a curved point: drag in the direction the curve should go.
• Click the first point to close the shape.
• Backspace takes back the last point.
• Enter or Esc finishes an open path.

Edit points

Double-click a shape (or select it and press Enter) to see its points:

• Drag a point to move it, or drag one of its handles to bend the curve. Hold Alt to move one handle on its own.
• Click the outline to add a point there.
• Double-click a point to switch it between a sharp corner and a smooth curve.
• Select a point and press Delete to remove it.
• Enter, Esc or a click away finishes.

Combine shapes

Select two or more shapes in the same frame (vectors, or rectangles with nothing inside) and use Combine shapes in the right panel:

The result is one new vector layer in the lowest shape's colour. Curves come out as many short straight edges. Ctrl+Z brings the originals back.

Masks

A mask shows the layers above it only inside its shape, like a photo cut to a circle. Select a layer that sits by X and Y (not in a row or column), and turn on Use as mask in the right panel. The mask itself isn't drawn; every layer above it in the same frame is clipped to its shape, up to the next mask. Layers in the frame's row or column aren't clipped.

Move and resize

Drag a layer to move it. Drag one of its eight handles to resize it; hold Shift to keep its shape. Artboards resize the same way.

A layer inside a row or column (a flex frame) doesn't move freely: drag it and a line shows where it will go in the order. Inside a grid frame it's the same: drop it before or after another cell.

Arrow keys move the selection 1 px, or 10 px with Shift. Inside a row or column, they move it earlier or later instead.

Smart guides

While you move or resize, edges and centres snap to the layers around it and to its frame, and equal gaps are marked with their distance. Artboards snap to other artboards. Hold Ctrl (⌘) while dragging to turn snapping off.

Measure

Select something, hold Alt (Option on Mac), and point at another layer to see the distances between them. Point at the selection itself to measure to its frame.

The pill under a selection shows its size, in pixels or as Fit (it hugs its contents) or Fill (it takes the room its frame gives it).

Layout grids

An artboard can have a layout grid drawn over it, like Figma's: columns, rows, or a square grid. Select the artboard and add one under Layout grid in the right panel (see Layers and properties). It shows as see-through red bands, and while it's showing, layers you move or resize snap to the edges of its columns and rows.

Ctrl+G (⌘G) shows or hides the layout grids on every artboard. They are only guides: they're saved with the artboard in design.json, never in its CSS, and never show in exports or copied code.

Rulers and guides

Shift+R shows or hides rulers along the top and left of the canvas. They count pixels from the top-left corner of the selected artboard, and the selection's start and end are marked on them.

To add a guide, drag from the top ruler down onto an artboard (a horizontal guide) or from the left ruler across (a vertical one). A number shows where it will land. Drag a guide to move it, or drag it back onto its ruler, or off the artboard, to remove it. While the rulers are showing, layers snap to the guides. Guides are saved with the artboard in design.json.

Right-click menus

Import a website

Right-click the empty canvas and choose Import a website…, or click the globe in the top bar. Type the page's address, such as example.com, and pick Desktop (1440 wide) or Phone (390 wide). Then click Import.

Machine opens the page out of sight, waits for it to load, and turns what you'd see into a new artboard of layers: boxes with their colours, borders, corners and shadows, text with its font and size, and pictures. Each layer sits where it was on the page, so you can edit, move or delete it, or ask the agent to rebuild the page with flexbox.

• Very long pages are cut at 6000 px tall, and very busy ones at 5000 layers. Design says so when that happens.
• Scripts, embedded frames, videos and tracking pixels are left out. Fonts the website loads itself show in a similar font.
• Pages that need you to sign in are imported as the sign-in page: the page opens in its own window, without your cookies.
• Your own site on this computer works too, such as localhost:3000.

Generate an image

Right-click an artboard, or a frame on one, and choose Generate an image…. Describe the picture and click Generate. The agent makes it with Pixio, saves it in design/assets, and puts it on the artboard (or fills the frame with it). You see it work in the chat.

Pixio needs to be connected to your Machine project: see Design settings › Connections.

Tidy up artboards

Tidy up artboards (Alt+Shift+T) lines up every artboard on the page in rows by size: phones (up to 500 px wide) up to eight to a row, tablets (up to 1000 px) five to a row, and wider pages three to a row. Each size gets its own rows, in the order those sizes first appear on the page, with even gaps between them. It needs at least two artboards.

Pages

A design can have several pages, each with its own artboards, listed at the top of the left panel. Click + to add one, and double-click a page to rename it. Drag a page up or down the list to reorder it, or right-click it for Move up and Move down.

To move artboards to another page, select them, right-click, and choose Move to that page. They land to the right of what's already there.

To delete a page, point at it and click the bin, or right-click it and choose Delete page. Its artboards are deleted with it, and Ctrl+Z (⌘Z on Mac) brings them all back. A design always keeps at least one page.

Undo

Ctrl+Z undoes and Ctrl+Shift+Z or Ctrl+Y redoes (⌘Z and ⇧⌘Z on Mac), up to 200 steps. That includes what agents changed, and deleting an artboard, which happens without asking.

See every shortcut on Keyboard shortcuts.