Quick poll: Who has a clickable prototype? Who has static frames only?
Two examples side by side: static screens vs. connected + animated
Which would you test with a user? Which would you put in a portfolio?
Today's goal: everyone leaves with a working clickable prototype + at least one animated transition.
Brevyn, will you pray for us today?
A prototype that doesn't move is a wireframe with better fonts.
Every screen connected with proper navigation and transitions
At least one animated transition using layer-name matching
At least one interactive element built with component variants
A shareable prototype link for D9 external testing this weekend
Your screens look great as static frames — but apps are not posters. Users expect things to respond, transition, and flow.
A prototype that just jumps between screens feels like a slideshow. One that moves and responds feels like a product.
D9 requires 2 custom microinteractions. D10 requires an animated walkthrough video. Today is where you build those skills.
Open Figma and follow along
Follow along now: connect your first two screens with a tap interaction.
| Field | Options |
|---|---|
| Trigger | On tap, On drag, While hovering, After delay, Mouse enter/leave |
| Action | Navigate to, Open overlay, Swap overlay, Scroll to, Back, Open link |
| Destination | Target frame |
| Animation | Instant, Dissolve, Smart Animate, Move in/out, Push, Slide in/out |
| Easing | Ease in, Ease out, Ease in and out, Linear, Spring, Custom bezier |
| Duration | In ms (typical: 200–500ms) |
Follow along: connect your remaining screens. Add back actions. Set up tab navigation if applicable.
Present your prototype (▶ button in top right).
Can you tap through your entire core flow?
Raise your hand if you're stuck.
Common problems:
• Missing hotspots on tappable elements
• Wrong starting frame
• Connections pointing to the wrong frame
150–200ms → micro (button press, toggle)
250–350ms → page transitions
400–600ms → complex choreography
Ease out → things entering
Ease in → things leaving
Ease in and out → moving within
Linear → almost never (robotic)
Spring → playful, organic
Push → forward nav (iOS)
Slide in from right → detail views
Dissolve → tab switches
Instant → tab bar taps
Smart Animate → element morphs
The mechanics of motion in Figma
Figma looks at Frame A and Frame B. For every layer with the same name in both:
Different position → it moves | Different size → it scales
Different opacity → it fades | Different rotation → it rotates
Different fill → it color-shifts
Layer only in A → fades out. Layer only in B → fades in.
Layer names must match exactly. Rename your layers intentionally.
That's it. The "duplicate and modify" pattern is 90% of Smart Animate work.
No card in your design? Use a button that slides to a different position, or a nav bar that changes color.
"Yes, that worked"
"Look over here"
"These are related"
"This is who we are"
D9 requires at least 2 custom microinteractions — every one should serve one of these four jobs.
A component with variants is an interactive element:
Default → Hover → Pressed → Disabled
Off → On (toggle switch)
Collapsed → Expanded (accordion)
Empty → Focused → Filled (input field)
How to wire it:
1. Create a component with 2+ variants
2. In Prototype tab: On tap → Change to [other variant]
3. Animation: Smart Animate + Spring or Ease out, 200ms
Finished early? Add a third state, or try different easing curves and compare how they feel.
Animation without a job is just delay.
Too slow — Anything over 500ms feels sluggish. Users wait for your animation instead of doing their task.
Too much — When everything bounces, nothing stands out. Motion loses meaning.
Wrong easing — Linear movement feels robotic. Spring on a delete button feels flippant.
No purpose — If you can't name the job (confirm, guide, connect, brand), remove the animation.
The best motion design is the animation you don't notice — it just makes the app feel right.
Modals, bottom sheets, fixed headers
"Navigate to" replaces the screen. "Open overlay" adds on top.
Use cases: modals, bottom sheets, dropdown menus, snackbars, tooltips
Follow along: pick one screen that should have a modal or bottom sheet. Build it.
Vertical scroll
Frame height shorter than content → enable "Vertical scrolling" in Prototype settings
Horizontal scroll
Same concept, horizontal direction. Great for carousels, image galleries, category chips.
Fixed elements (sticky headers, bottom nav)
Select element → Design panel → Fix position when scrolling. Or: place it outside the scrollable group.
Present your prototype. Do you have:
☐ Connected screens (tap through your core flow)
☐ At least one Smart Animate transition
☐ At least one microinteraction (component variant)
Missing something? That's your #1 priority in the work session.
Three timed rounds — not free work
Goal: Every screen in your core flow is connected and navigable.
Goal: Build 2 distinct animations (this is the D9 requirement).
• Onboarding transition (staggered elements)
• Button press feedback (variant + scale)
• Card expand to detail (Smart Animate)
• Toggle or checkbox (variant swap)
• Bottom sheet or modal (overlay + slide)
• Loading / success state (opacity + scale)
• Tab switch with content crossfade
Common mistakes: under 150ms feels broken, over 500ms feels sluggish, linear easing feels robotic.
Prototype checklist:
☐ Starts on the right screen?
☐ Can you complete the core task without getting stuck?
☐ No dead-end screens?
☐ Feels like the real thing full-screen with device frame?
Set up sharing: Prototype tab → Share → "Anyone with the link" → Copy link
Day 21 craft checklist for any new screens:
Show of hands: Who has a working clickable prototype? Who has 2+ animations?
D9: Usability Testing Rd. 2 (due Mon, Mar 30 @ 5:15pm)
Test with 3+ people outside class using your prototype link. Document observations, quotes, usability issues. Show before/after for changes you made.
Monday (Day 23): Peer testing in class — bring your prototype ready to test.