By the end of this lesson you can
- Connect frames into a clickable prototype with triggers and actions.
- Choose suitable transitions and use overlays and scrolling.
- Plan a prototype around the tasks you want to test.
The idea
A prototype links static frames so people can click, tap and move through a flow as if it were real. Design tools build these with three parts:
- Trigger: what the person does, such as on click, on drag, while hovering or after a delay.
- Action: what happens, such as navigate to a frame, open an overlay, scroll to a section, swap a component or go back.
- Animation: how it happens, such as instant, dissolve, move in, or smart animate (which animates matching layers between frames).
Useful features
Overlays show modals, menus and sheets on top of a screen. Scroll behaviour lets long frames scroll while headers stay fixed. Flows (starting points) let you share several journeys from one file.
Plan around tasks
Prototype the paths you need to test or demonstrate, not every button. List the tasks first, then wire only those paths, adding sensible dead ends ("This feature isn't in the prototype") where needed.
Why it matters in real projects
Static screens hide problems with flow: missing back routes, confusing order, unclear feedback. A prototype lets you test with users, demo to stakeholders and show developers the intended behaviour. It is far cheaper to discover a broken journey in a prototype than in code.
A realistic example
A team is redesigning a parcel redelivery service. They list two test tasks: rebook a delivery for Saturday, and change the address to a neighbour. The designer wires only those paths across nine frames: date picker as an overlay, smart animate when the summary card expands, and a confirmation screen.
In testing, three of five participants try to tap the parcel status card to change the date. The team had not wired it because they did not expect it, and that tells them where people expect the control to be.
Step by step
List the tasks
Write the flows the prototype must support.
Prepare the frames
Make sure each step has a frame, including errors and confirmations.
Set a starting point
Create a flow starting on the first screen.
Wire interactions
Add triggers, actions and animations for the main path.
Add overlays and scrolling
Use overlays for sheets and menus, and fix headers while content scrolls.
Play it through
Run the prototype on the target device and fix dead ends.
Common mistakes
Mistake Wiring every button in the product.
Instead Prototype only the tasks you need.
Mistake Flashy transitions that slow people down.
Instead Use quick, purposeful animation.
Mistake Testing a phone prototype on a desktop screen.
Instead Run it on the real device type where possible.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Task-based prototype
Build a clickable prototype for one task in a food ordering app.
Steps
- Choose the task, for example "order a vegetarian lunch for pick-up at 12:30".
- Design or reuse the frames needed.
- Wire the path with at least one overlay and one smart animate.
- Ask someone to complete the task while you watch silently.
Deliverable
A shareable prototype link plus three notes from watching someone use it.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Prototypes combine triggers, actions and animations.
- Overlays, scrolling and flows make prototypes realistic.
- Scope prototypes around tasks.
- They reveal flow problems before code.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.