Prototypes and Present

Link screens with interactions, then play them in Present: a click on a linked layer opens its destination with a transition.

Interactions

An interaction lives on the layer that is clicked, in its reactions list. Put it on the whole control a person would tap, such as the button frame, list row or card, not on its label or icon.

javascript

Update(loginButton, {reactions: [
  {trigger: "click", action: "navigate", destination: homeScreen, transition: "slide-left"}
]})
Update(backChevron, {reactions: [{trigger: "click", action: "back"}]})

Field	Values
`trigger`	`"click"`, or `"after-delay"` on a screen that moves on by itself.
`action`	`"navigate"` opens the destination as the next screen, `"overlay"` opens it over the current one, `"back"` undoes the last step, `"close"` closes the top overlay.
`destination`	The id, not the name, of a top-level frame on the same page, or of a top-level instance of a frame component.
`transition`	`instant`, `dissolve` (the default), `smart`, `slide-left`, `slide-right`, `slide-up`, `slide-down`, `push-left`, `push-right`.
`duration`	Milliseconds, 0 to 2000. The default is 300.

The direction of a slide or push is where the content moves: slide-left brings the next screen in from the right. Slide covers the old screen; push moves both. smart moves each layer the two screens share from its old place to its new one, so give shared layers the same names and nesting on both screens. reactions: null removes a layer's interactions.

Overlays and delays

A modal, sheet, menu or toast is a top-level frame of its own size, opened with action: "overlay". It takes position (center, top or bottom), dim and closeOnOutside, which both default to true.

javascript

Update(filterButton, {reactions: [
  {trigger: "click", action: "overlay", destination: filterSheet, position: "bottom", transition: "slide-up"}
]})
Update(splash, {reactions: [{trigger: "after-delay", delay: 1500, action: "navigate", destination: home}]})

An after-delay reaction goes on the screen's own frame. delay is in milliseconds, 800 by default and at most 10000.

Linking in the editor

Switch the Inspector to Prototype. With one layer selected, Add interaction adds a row with Trigger, Action, Destination, Transition and Duration. You can also drag from the handle on the selected layer to a frame to link it. Links are drawn on the canvas as curves into their destination.

A frame can be marked as the start of a flow under Flow starting point, with a Flow name. Agents set the same thing with Update(welcomeScreen, {flowStart: "Onboarding"}). Present starts there and offers a choice when there are several flows.

Scrolling

A screen taller than its device scrolls in Present. scrollPosition: "fixed" on a screen's direct child keeps it in place, like a header or tab bar. overflow on a frame inside a screen scrolls its content: "scroll-x", "scroll-y" or "scroll". In the editor these are under Scrolling.

Present

Click Present in the top bar, or press ⌥⌘P. Each screen shows in the device its size suggests: a phone up to 600 wide, a tablet up to 1024, a browser window past that, and a 16:9 or 4:3 frame as a slide. Update(pageId, {prototype: {device: "none"}}) shows a page's screens without a device frame.

Click linked layers to follow the flow. A click that hits nothing shows where the hotspots are.
The arrow keys step through the frames in order. Backspace goes back, and R restarts.
A page with no interactions plays as a deck: a click, Space or the arrow keys move to the next frame.
Exit Present returns to the editor.

PreviousComments NextExport HTML

Something unclear, missing or broken? Write to feedback@anaknegeri.dev.