Open in vscode.dev Install

Prototyping

Connect frames with interactions, transitions and overlays, group them into flows, click through them in the player, and run them headless from the terminal.

A button connected to the next screen in the Prototype view, then played.
  • Open the Prototype view and select a button
  • Drag its handle onto a frame: a connection
  • Play the prototype (CtrlAltEnter)
  • Click through it in the player

Interactions#

With a layer selected, the Prototype view lists its interactions. Drag the + handle on the right edge of the selection to another frame to connect them, or add an interaction in the view. Each interaction has:

  • a trigger: on click, on hover, on press, on drag, while hovering, while pressing, key press, after delay…
  • an action: navigate, open, swap or close an overlay, back, scroll to, open link, set variable, conditional…
  • an animation: instant, dissolve, smart animate, move in and out, push, slide in and out…, with its easing (curves or springs) and duration.

Connections show on the canvas as arrows between frames while the Prototype view is open.

Overlays and scrolling#

Frames set overlay settings (position, background, close on a click outside) for when they open as an overlay, and scroll behaviour (overflow direction, layers fixed while the rest scrolls).

Flows#

With nothing selected, the Prototype view lists the flow starting points: each flow has a name and a start frame, and chooses the device and background of its preview. Select a top-level frame and add it as a starting point with +.

The player#

  • UI Designer: Preview (CtrlAltEnter, also in the editor’s title bar) plays the prototype in a panel beside the editor. It follows your edits as you make them.
  • UI Designer: Preview in Browser opens the same player in your system browser, served from your machine (desktop).
  • UI Designer: Export Prototype as Static Site… writes the prototype as a folder of HTML that any static host can serve (desktop).

Headless runs#

ud prototype run plays a flow without a window: it follows the steps you give it (click:"Sign in", wait:300, back) and renders the final screen, so a script or an agent can check that a flow still reaches the right place.

A prototype, headless
bash
ud prototype flows app.design
ud prototype run app.design --flow Onboarding --steps 'click:"Get started";wait:300' --out final.png
ud prototype export app.design --out prototype-site

ud prototype motion <node> lists a screen’s animated interactions as keyframes with CSS and motion.dev snippets, for implementing them in code.

Edit this page