# The canvas

Move around the canvas, use the tools, select and edit layers, move and resize with smart guides, layout grids, rulers and guides, measure distances, tidy up artboards, use the right-click menus, import a website, and generate an image.

Canonical page: https://themachine.myapps.ai/docs/desktop/design/canvas

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

## The top bar

![The Design top bar: mode menu and design name, the tools in the middle, then undo, zoom, Copy code, light/dark, settings and close](/images/docs/desktop/design-toolbar.webp)

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](/docs/desktop/design/prototype)); **Copy** as code (see
[Export and code](/docs/desktop/design/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

| Tool | Key | What it does |
|---|---|---|
| **Move** | V | Select, move and resize. |
| **Hand** | H | Drag to pan. Holding **Space** does the same with any tool. |
| **Frame** | F | On the empty canvas: drag to make a new artboard (or click for a 1440 × 900 one). Inside an artboard: a box that can hold other layers. |
| **Rectangle** | R | A grey box. |
| **Shapes** | O, L, Shift+L | **Ellipse** (O), **Line** (L), **Arrow** (Shift+L), **Polygon** and **Star**: drag to draw one. The button shows the last shape you used; its arrow lists the rest. A line and an arrow run the way you drag. |
| **Pen** | P | Draw your own shape point by point. See [Draw with the pen](#draw-with-the-pen). |
| **Text** | T | A text layer, ready to type into. |
| **Image** | | Pick a picture from your computer. It's copied into `design/assets`. |
| **New artboard** | | A new artboard to the right of the others, the same size as the selected (or last) one. |
| **Import a website** | | Turn a web page into an artboard you can edit. See [Import a website](#import-a-website). |
| **Inspiration** | I | Real app screens to build from. See [Inspiration](/docs/desktop/design/inspiration). |

**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

| To | Do this |
|---|---|
| Pan | Scroll, or **Shift**+scroll sideways, or drag with **Space** held, the middle mouse button, or the Hand tool. |
| Zoom | **Ctrl**+scroll (**⌘**+scroll on Mac), or pinch on a trackpad. |
| Zoom in / out | **Ctrl +** / **Ctrl −**, or the **+** and **−** in the top bar. |
| See everything | **Shift+1**, or click the zoom percentage. |
| Zoom to what's selected | **Shift+2** |
| Actual size | **Ctrl+0** |
| Show or hide layout grids | **Ctrl+G** |
| Show or hide rulers and guides | **Shift+R** |

## 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:

| Choice | You get |
|---|---|
| **Union** | All the shapes joined into one. |
| **Subtract** | The lowest shape with the ones above it cut out. |
| **Intersect** | Only where every shape overlaps. |
| **Exclude** | Everything except where the shapes overlap. |

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](/docs/desktop/design/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

![The menu on a layer: Ask the agent about this, Copy as Vue, Copy whole artboard, Copy, Paste, Duplicate, Wrap in flex, Bring forward, Send backward, Hide, Lock, Select artboard, Zoom to selection, Delete](/images/docs/desktop/design-menu-layer.webp)

| On | You can |
|---|---|
| **The empty canvas** | Paste, **New artboard**, **Import a website…**, **Tidy up artboards**, Fit everything, Zoom to 100%. |
| **An artboard** | Ask the agent about it, **Generate an image…**, copy it as code, Copy, Paste, **Tidy up artboards**, **Move to** another page, Zoom to selection, **Delete artboard**. |
| **A layer** | Ask the agent about it, **Generate an image…** (on a frame), copy it (or its whole artboard) as code, Copy, Paste, Duplicate, **Wrap in flex**, Bring forward, Send backward, Hide, Lock, Select artboard, Zoom to selection, Delete. |

## 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](/docs/desktop/design/shortcuts).