Prototyping & Interaction 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 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.

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

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.

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."

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.

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.

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

1. 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?"
2. 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.
3. Recruit 5 users. Nielsen's research: 5 users find 85% of usability problems.
4. Watch, do not help. When a user gets stuck, resist the urge to explain. Their confusion is your data.
5. Measure success. Task completion rate, time to complete, error rate, and where users get stuck.

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