Prototyping

Turn frames into something you can click through.

Prototype in the top bar is a mode, not a panel: while you're in it, dragging a layer onto a frame connects them instead of moving it. That's the whole idea — the canvas becomes a wiring diagram.

Making a connection

Connect a layer to the next screen · 0:05
Description

An onboarding prototype in Prototype mode. The illustration on the Welcome screen is dragged onto the Sign in frame, which draws a connection; the inspector shows On click, Navigate to Sign in, Smart animate.

  1. Click Prototype in the top bar.
  2. Drag a layer onto the frame it should open. A line follows the pointer, and the frame it would land on lights up.
  3. Let go. The inspector shows the new interaction: On click, Navigate to that frame, with Smart animate over 300 ms. Change any of them there.
  4. Press Present to try it.

Triggers

TriggerFires when
On click / On pressThe obvious ones
On hoverThe pointer is over it
On dragIt's dragged — any way, or only left, right, up or down (a swipe back, a swipe down to close)
While scrollingThe frame it's on scrolls — drives a timeline from the scroll position
Mouse enter / Mouse leaveThe pointer arrives or leaves
After timeoutA delay elapses — for splash screens and auto-advancing
Key downA key is pressed

Where a drag could start, a click waits until you let go, so a card inside a swipeable strip still opens on a tap and a drag across it never does.

Actions

Navigate to a frame · Overlay one on top · Swap an overlay for another · Scroll to somewhere on the same frame · Back · Close an overlay · Set variable · Set mode · Change to another variant · Orbit in 3D · Conditional · Control timeline (scrub, play, pause or seek the frame's timeline or a component's — see Drags, scrolls and hand-offs).

Variables are what make a prototype behave rather than just move: a toggle that flips a boolean variable, a counter set to count + 1, a health bar whose width follows health, a Conditional that goes to Game over when it reaches 0 — all without a duplicate screen per state. See Variables and logic.

Orbit in 3D goes with On drag: it turns a group inside a 3D scene as the pointer moves, about its vertical axis, and with Tilt on a vertical drag it tilts it too, within Tilt min and Tilt max. Pick a group holding it as the tilt layer and the object tilts toward you whichever way it has turned, like a trackball. The turn carries on to the next screen's group of the same name.

Transitions

Instant, Dissolve, Smart animate, and Slide / Push / Move-out from each of four directions.

3D transitions turn the two screens through a perspective: Cube from any side, Carousel, Flip (across or up), Swing open and Swing close (a door), Stack in and Stack out (a deck), and Depth push and Depth pull. On a published site they are drawn on the GPU where the visitor's browser has WebGPU, as CSS 3D where it does not, and as a dissolve where neither will do; a site whose links use none of them never loads the GPU renderer.

Smart animate matches layers by name between the two frames and tweens the differences — position, size, rotation, scale, opacity, corners and colours — so a card that grows into a detail view animates itself. Give a layer a shared element key and it hands over to the layer with the same key wherever that sits; add a stagger and the layers hand over one after another. Circle wipe, iris and zoom through can start from the layer you tapped. Back plays the transition in reverse and lands where you left the screen.

Easing is Linear, Ease in, Ease out, Ease in and out, or a Spring — gentle, quick or bouncy.

Overlays

An overlay sits on top of the frame you were on. Position it centred, against any of the eight edges, or exactly where you put it, and choose whether clicking outside closes it.

Device frames

Wrap the preview in an iPhone 14 or SE, iPad Pro, MacBook Pro or Surface Pro, so a stakeholder sees the design in something that looks like a device.

Playing it

Hit the play button in the top bar. Prototype links are drawn on the canvas as a view flag — on by default and visible in every mode, so you can see the flow while you design rather than only while you test.

Next