DocsUsing the editor
Prototype and present
Wire boards together, add motion, then click through them in Preview or present them as slides.
1Interactions
Give a layer a trigger (Tap, Hover or Long press) and an action:
- Navigate to another screen, with a Slide or Fade transition.
- Go back.
- Scroll to a section.
- Open a URL.
2Motion
Animate a layer when it appears, when it scrolls into view, on hover or on tap. Set what changes (such as width, height or fill colour), its from and to values, duration, delay and easing. Exported HTML plays the hover and tap states.
3Preview
Press Cmd+P. Choose Phone, Desktop or Canvas. The device frame keeps the status bar at the top and the navigation bar at the bottom.
- Use Mark as screen and Set as start screen to choose which boards are pages and which one opens first.
- Screens behave like a website: an address bar, history with
Cmd+[andCmd+]or the mouse buttons, and links between sections. - Links in headers and footers are wired to matching screens for you.
- Tab moves between inputs and buttons.
4Slides and presenting
The Slides tab lists your boards as slides or cards. Set a transition (None, Fade, Slide or Push) with a duration from 100 milliseconds to 5 seconds.
Present with Cmd+Enter. Enter, Space or Page Down goes forward; Backspace or Page Up goes back; Home and End jump to the first and last slide; Escape ends.