Draw and edit the arrows to screens

You get the arrows that show which element leads to which screen, and the ways to draw, change, remove and undo them.

An arrow is an interaction, drawn on the canvas. They show only while the Prototype tab is open. For triggers and flows, see Make a prototype clickable.

Draw an arrow

1. Select one element and open the Prototype tab. A round handle sits at the middle of each side. A side is left out when the element is under 16 screen pixels that way, so a flat or upright line has two handles and a very small shape one. Zoom in and they come back.
2. Drag a handle toward a screen. A faint outline marks every screen you could land on, a full outline marks the one you would, and a dashed arrow shows the line.
3. Let go over the screen, or just short of its edge: it snaps from about 24 pixels away.

The arrow is On click. Letting go on empty canvas, or clicking a handle without dragging, does nothing. To link an element to the screen it sits in, let go inside that screen. The arrow then swings out past the screen's edge and back in.

An element has one On click arrow. Drag a handle to another screen and the arrow moves there. For the picture, see Make a prototype clickable.

The sides pick themselves

Which handle you grab makes no difference. The arrow leaves and arrives on the sides that face each other, and re-routes when you move either shape.

Select, change and remove

• Select: click an arrow. That selects the element it starts from, and that element's arrows get thicker. The inspector lists its interactions.
• Change where it leads: on the arrow's row, use the menu named Destination for and its trigger, such as Destination for On click, or drag a handle to another screen.
• Remove: click the bin on the row, named for its trigger, such as Remove the On click interaction.

Don't press Backspace or Delete after clicking an arrow: it deletes the selected element, not the arrow. Deleting an element removes its arrows, and so does deleting a screen they lead to or sit in.

Undo

If your last change was to an arrow, Ctrl/Cmd+Z undoes it: a new arrow goes, a moved arrow goes back to its old screen, and a removed arrow comes back. Ctrl+Y or Ctrl/Cmd+Shift+Z redoes it. Undoing a deleted element or screen brings back its arrows too. An arrow that fails to save is taken back with a message, and isn't on the undo list.

What a copy keeps

A copy of an element or a screen has no arrows in or out. Duplicate, paste and Alt+drag copy the shape only, and the arrows to the original screen stay with it. A cut takes the shape's arrows with it, and the paste has none: undoing the cut brings them back. See Select, arrange and undo on a prototype.