# Prototype and Present

Link layers to other artboards, pick where a page starts, see the links as arrows, and click through your design in Present, in a phone, tablet or browser frame.

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

A prototype lets you click through a design as if it were the real app.
You link a layer, such as a button, to another artboard. Then **Present**
shows one artboard at a time, and clicking the button opens the artboard it
links to.

## Link a layer to an artboard

1. Select the layer people will click: a button, a tab, a card or a back
   arrow.
2. In the right panel, find **Prototype** and open **On click**.
3. Pick **Go to** and an artboard on the same page. Or pick **Back** to go
   back to the artboard you came from.
4. Pick how it moves there:

| Transition | What you see |
|---|---|
| **Instant** | The next artboard shows at once. |
| **Slide** | The next artboard slides in from the right. Going back slides the other way. |
| **Dissolve** | The next artboard fades in over this one. |

To remove a link, set **On click** to **Nothing**. Any layer can have a
link: text, a picture, or a frame with other layers inside. When a linked
layer sits inside another linked layer, the inner one wins.

If you delete the artboard a link goes to, the panel tells you, and the
link does nothing in Present until you pick another artboard.

## Pick where the page starts

Select an artboard (click its name above it) and click **Start here** in
the **Prototype** section. Present opens on this artboard. Each page has
its own start. Without one, Present starts on the page's first artboard.

## See the links

Click **Prototype view** in the top bar (the route icon, beside **Present**).
The canvas then shows:

- an arrow from each linked layer to the artboard it opens (dashed for
  **Dissolve**),
- a **Back** tag on layers that go back,
- a red **Board gone** tag on links whose artboard was deleted,
- a **Start** tag on the page's start artboard.

Click the button again to hide them. The arrows never get in the way of
selecting or moving things.

## Present

Click **Present** (the play button) in the top bar, or press
**Ctrl+Alt+Enter** (**⌥⌘↵** on a Mac). Design fills the window with the
page's start artboard. If you had an artboard selected, it starts there
instead.

Each artboard shows in a frame that fits its size:

| Artboard width | Frame |
|---|---|
| Up to 500 px | A phone, with the camera island and the home bar |
| 501 to 1100 px | A tablet |
| Wider | A browser window, with the artboard's name in the address bar |

The artboard is drawn exactly as on the canvas, scaled down to fit the
window when it's too big. A long web page shows one screen at a time:
scroll inside the frame to see the rest.

While you present:

- Click a linked layer to go where it links. The pointer turns into a hand
  over anything you can click.
- Click anywhere else and the linked layers flash, so you can see what to
  click.
- Press **Backspace** to go back, **←** and **→** to step through the
  page's artboards in order, and **Esc** to leave.

The bar at the top shows the artboard's name and where it is in the page,
with buttons for previous, next, back, restart and leave.

Present only shows. It never changes your design.

## Let the agent do it

Ask the agent in plain words, for example "make the buttons clickable" or
"link the screens so I can click from the sign-in to the home screen". It
adds the links and sets the start artboard for you, and you can try them at
once with **Present**.

## Links in copied code

**Copy** as code keeps your links:

- **HTML**, **Vue** and **Svelte**: a linked layer becomes a link to the
  other artboard (`#` and its id). **Back** goes back in the browser.
- **React** and **React + Tailwind**: a linked layer gets an `onClick`
  that calls a small `navigate` function at the top of the component.
  Replace it with your app's router.

SwiftUI and Jetpack Compose code leaves links out.