Lesson 8 of 12Article15 min
Prototyping & Interactions
Switch to Prototype mode in the right panel. Drag the connection node from a button to the destination frame. Choose trigger (On click, While hovering, After delay) and animation (Instant, Dissolve, Smart animate, Move in).
01Connect flows
Switch to Prototype mode in the right panel. Drag the connection node from a button to the destination frame. Choose trigger (On click, While hovering, After delay) and animation (Instant, Dissolve, Smart animate, Move in).
02Useful interaction patterns
- Navigate to — move between screens.
- Open overlay — modals and menus without duplicating full screens.
- Swap overlay — switch tabs inside a modal.
- Back — return to previous frame in the flow.
- Scroll to — jump to a section inside a long page.
03Present and test
Press Present (play icon) to click through the prototype. Share a prototype link with stakeholders so they can try the flow without editing the file.
Real-life example: A prototype is a movie trailer of the product. Catch confusing navigation before engineering builds the full film.