Prototyping & Interaction Design — UX/UI Design

The Palm Pilot that was made of wood

In 1994, Jeff Hawkins was designing the PalmPilot — the device that would create the handheld computing category. Before building anything, he cut a block of wood to the size he wanted the device to be. He carried it in his shirt pocket for weeks.

When someone asked to schedule a meeting, Hawkins would pull out the wood block, tap on it with a chopstick (standing in for the stylus), and pretend to check his calendar. "How about Tuesday at 3?"

This was prototyping at its purest. No code. No electronics. No screen. Just a piece of wood that let Hawkins test the fundamental question: Will people actually carry this thing and use it throughout the day?

The answer was yes. The PalmPilot shipped in 1996, sold over 1 million units in its first 18 months, and created a $3 billion industry. It all started with a block of wood and a chopstick.

What you will build in this module

By the end, you will be able to map interactions for a food delivery app, design a 4-screen checkout flow with micro-interactions and transitions, and classify micro-interactions using Dan Saffer's framework. Your wireframes from Module 4 are static — this module teaches you how to make them move.

1MPalmPilots sold in 18 months

0lines of code in the first prototype

3Bdollar industry created

What is a prototype?

A prototype is a simulation of your product that lets you test ideas before building the real thing. It answers the question: "Does this work for users?" before you ask engineers to build it.

Prototype type	What it is	When to use	Time to create
Paper prototype	Sketched screens on paper, moved by hand to simulate flow	Very early ideation, brainstorming sessions	15-30 minutes
Clickable wireframe	Linked mid-fi screens in Figma — click a button, go to the next screen	Testing user flows and navigation	2-4 hours
High-fidelity prototype	Polished screens with real content, animations, and transitions	Stakeholder presentations, usability testing	1-3 days
Code prototype	Functional HTML/CSS/JS prototype with real interactions	Testing complex interactions, technical feasibility	3-5 days

✗ Without prototyping

✗Build the full feature (weeks)
✗Discover problems after launch
✗Expensive to change (code is written)
✗Debates in meetings — opinions vs. opinions

✓ With prototyping

✓Test the idea in hours
✓Discover problems before any code
✓Cheap to change (it is just a Figma file)
✓Evidence from real user testing

🔑The 1-10-100 rule of fixing problems

Fixing a problem in the design phase costs $1. Fixing it in development costs $10. Fixing it after launch costs $100. Prototyping moves failures to the $1 stage. This is why every major tech company — Google, Apple, Spotify, Airbnb — prototypes extensively before writing code.

Prototyping in Figma — from static to interactive

Figma has a built-in prototyping mode that turns your wireframes into clickable, interactive experiences — no code required.

The basics: connecting screens

1. Switch to Prototype mode. In the right panel, click the "Prototype" tab. This changes from design mode (how things look) to prototype mode (how things behave).

2. Add interactions. Select a button, and a small blue circle (node) appears on its right edge. Drag that node to the destination frame (the screen you want to go to when the button is clicked).

3. Configure the trigger. Choose what starts the interaction: "On click" (most common), "On hover," "On drag," "While pressing," or "After delay."

4. Choose the transition. How does the screen change? "Instant" (no animation), "Dissolve" (fade), "Move in" (slide from a direction), or "Smart Animate" (Figma automatically animates matching layers between screens).

5. Preview. Press the Play button (top right) to open a live preview. Click through your prototype exactly as a user would.

Smart Animate — Figma's secret weapon

Smart Animate is Figma's most powerful prototyping feature. When two frames share layers with the same name, Figma automatically animates the differences — position, size, color, opacity. This lets you create smooth, native-feeling transitions without any code.

Example: You have a card that expands into a full-page detail view. Name the card's image layer "product-image" on both screens. Smart Animate will smoothly scale and reposition that image from card size to full-screen.

There Are No Dumb Questions

"How realistic does my prototype need to be?"

It depends on what you are testing. Testing navigation flow? A clickable wireframe with gray boxes is enough. Testing whether users trust your checkout process enough to enter their credit card? You need a high-fidelity prototype with real branding, polished visuals, and smooth transitions. Match the fidelity to the question.

"Can I prototype animations and micro-interactions in Figma?"

Yes. Smart Animate handles most transitions. For more complex interactions (parallax scrolling, drag gestures, conditional logic), tools like ProtoPie or Framer offer more control. For usability testing, Figma's prototyping is almost always sufficient.

🔒

Map the Interactions

25 XP

You are prototyping a food delivery app. List the interaction for each user action: 1. **User taps a restaurant card on the home screen.** What trigger, transition, and destination? 2. **User taps "Add to Cart" on a menu item.** What happens on screen? Does the user go to a new screen or see an in-place animation? 3. **User taps the cart icon in the navigation.** What transition feels right for opening the cart? 4. **User swipes left on a cart item.** What should happen? (Think mobile patterns.) 5. **User taps "Place Order" on the checkout screen.** What feedback should the user see? _Hint: For each interaction, think about three things: what triggers it (tap, swipe, hover), what changes on screen (navigate, overlay, animation), and what feedback confirms the action (color change, checkmark, haptic response)._

Micro-interactions — the small things that feel big

Micro-interactions are the tiny, contained animations and feedback moments that make a product feel alive. They are the difference between a product that feels "functional" and one that feels "delightful."

Micro-interaction	What it does	Real-world example
Button press feedback	Visual confirmation that you tapped something	Button depresses and darkens on tap
Loading skeleton	Shows content structure while data loads	Facebook/LinkedIn gray shimmer shapes
Pull-to-refresh	Physical gesture to reload content	Twitter/Instagram — pull down, spinner appears
Like animation	Emotional feedback for a social action	Instagram's heart burst, Twitter's exploding heart
Toggle switch	Smooth on/off state change	iOS Settings toggle sliding from gray to green
Form validation	Real-time feedback as users type	Green checkmark appears when email is valid
Swipe to delete	Reveals delete action on horizontal swipe	iOS Mail — swipe left reveals red "Delete"

🔑Dan Saffer's micro-interaction framework

Dan Saffer, who wrote the book on micro-interactions, defines four parts: **Trigger** (what starts it — user action or system event), **Rules** (what happens — the logic), **Feedback** (what the user sees/hears/feels), and **Loops & Modes** (what happens over time — does it repeat? does it change?). Every micro-interaction you design should answer all four.

The anatomy of a great micro-interaction

Take the Instagram "like" animation:

Trigger: User double-taps a photo
Rules: If not already liked, like the post and increment the count
Feedback: A large heart appears over the photo, scales up with a bounce, then fades out. The heart icon below turns red. The like count increments.
Loops: Tapping again (unlike) plays the reverse — heart icon returns to outline, count decrements. No dramatic animation for unlike — positive actions get more celebration than negative ones.

This one interaction took designers and engineers at Instagram weeks to perfect. The bounce curve, the timing, the scale — all calibrated to create a moment of delight that keeps people scrolling and tapping.

Fidelity levels in prototyping

Choosing the right fidelity is a strategic decision, not a quality decision. More fidelity is not always better.

Fidelity	Visual quality	Interactions	Best for	Risk
Low	Paper sketches, sticky notes	"Wizard of Oz" — human simulates the system	Exploring many ideas quickly, early concept testing	None — it is meant to be thrown away
Medium	Gray-box wireframes, basic Figma frames	Clickable flow, basic transitions	Testing navigation, user flows, and task completion	Stakeholders may focus on visual gaps
High	Pixel-perfect, real content, branded	Smart Animate, micro-interactions, scrollable regions	Usability testing, stakeholder buy-in, developer handoff	Expensive to change; team becomes attached

✗ Too much fidelity too soon

✗3 days building a polished prototype
✗Stakeholders approve the design, not the concept
✗Major flow issue discovered after engineering starts
✗Team is reluctant to change because it looks finished

✓ Right fidelity at the right time

✓2 hours building a clickable wireframe
✓Team debates the concept and flow
✓Flow issue caught in first round of testing
✓Easy to throw away and try a different approach

There Are No Dumb Questions

"When should I use paper prototypes versus Figma?"

Paper prototypes are best for the first 30 minutes of ideation. When you are in a room with teammates, sketching on paper and moving pieces around is faster than any digital tool. Switch to Figma when you need to test with external users — paper prototypes work poorly in remote testing, and they cannot simulate scrolling, transitions, or multi-step flows.

🔒

Prototype a Checkout Flow

50 XP

Design a 4-screen checkout flow for a mobile e-commerce app. For each screen, describe: **Screen 1 — Cart Review** - What content does the user see? - What is the primary action? - What micro-interaction confirms when the user changes quantity? **Screen 2 — Shipping Information** - What form fields are needed? - What micro-interaction helps with form validation? - How does the user move to the next step? **Screen 3 — Payment** - How does the user enter payment info? - What builds trust at this critical moment? (Think: security icons, reassuring copy) - What happens when the user taps "Pay Now"? **Screen 4 — Confirmation** - What does the user see immediately after payment? - What micro-interaction celebrates the purchase? - What are the next actions available? For each transition between screens, describe the animation: instant, slide, dissolve, or Smart Animate. _Hint: Checkout is where most e-commerce conversions are won or lost. Every micro-interaction should reduce anxiety and build confidence. A spinning loader after "Pay Now" creates anxiety. A checkmark with a smooth transition to a confirmation screen creates confidence._

Testing with prototypes

The entire point of prototyping is testing. A prototype you do not test is just a demo.

How to run a prototype test

Define what you are testing. Not "Is the design good?" but "Can users complete checkout in under 2 minutes?" or "Do users understand what this button does?"
Prepare 3-5 tasks. "You want to order a medium pepperoni pizza for delivery. Show me how you would do that." Do not explain the interface first.
Recruit 5 users. Nielsen's research: 5 users find 85% of usability problems.
Watch, do not help. When a user gets stuck, resist the urge to explain. Their confusion is your data.
Measure success. Task completion rate, time to complete, error rate, and where users get stuck.

⚠️Never test with your team

Your colleagues know how the product works. They will navigate it perfectly. Test with people who represent your actual users — ideally people who have never seen the prototype before. Fresh eyes find problems that familiar eyes miss.

🔒

Classify the Micro-Interaction

25 XP

For each micro-interaction, identify which part of Dan Saffer's framework it describes. **Categories:** Trigger, Rules, Feedback, Loops and Modes 1. The user double-taps a photo in a social media app. {"\u2192"} ___ 2. If the post is not already liked, increment the like count by 1 and mark it as liked. {"\u2192"} ___ 3. A large heart animates over the photo with a bounce effect, and the heart icon turns red. {"\u2192"} ___ 4. Double-tapping a second time unlikes the post — the heart returns to outline and the count decrements. No dramatic animation for unlike. {"\u2192"} ___ _Hint: Trigger is what starts the interaction. Rules define the logic. Feedback is what the user perceives. Loops and Modes describe what changes over time or on repeat._

Remember Jeff Hawkins and his block of wood? He did not need a working device to answer the most important question. He needed something tangible enough to test with. That is what you learned in this module — from paper prototypes to high-fidelity Figma experiences, the goal is always the same: make the idea real enough to learn from.

You have a prototype now. But how do you know if it actually works? In the next module, you will learn how to run usability tests — writing scripts, facilitating think-aloud sessions, and turning user confusion into actionable design improvements.

Key takeaways

Prototypes test ideas before code — moving failures to the cheapest stage of the process (the 1-10-100 rule)
Figma's prototyping mode connects static screens into interactive, clickable experiences using triggers, transitions, and Smart Animate
Micro-interactions (button feedback, loading skeletons, like animations, form validation) are the small moments that make products feel polished and trustworthy
Match fidelity to your question — low-fi for concept exploration, mid-fi for flow testing, hi-fi for usability testing and stakeholder buy-in
Smart Animate automatically transitions matching layers between screens — name layers consistently to unlock smooth, native-feeling animations
Always test your prototypes with 5 real users who have never seen the design — watch them struggle, and treat their confusion as data

Knowledge Check

1.What does the '1-10-100 rule' mean in the context of prototyping?

2.What does Figma's Smart Animate feature do?

3.Why is a medium-fidelity clickable prototype often better than a high-fidelity one for early testing?

4.According to Dan Saffer's micro-interaction framework, what are the four parts of a micro-interaction?