📖 Notes
LESSON 11 OF 26
Prototyping — Interactions & Animations
Making Static Screens Clickable
Link frames together, add hover states, transitions, overlays, and scroll behavior for clickable prototypes.
Prototype Building Blocks
Connections, Triggers, Actions
🔗
Frame Connections
Drag from one frame's edge to another to define a navigation link.
👆
Triggers
On Click, On Hover, On Drag, While Pressing — the event that starts an interaction.
🎬
Transitions
Instant, Dissolve, Smart Animate, and Slide In/Out control how the next screen appears.
🪟
Overlays
Modals, dropdowns, and tooltips that appear above the current screen without navigating away.
✅
Smart Animate
When two frames share identically-named layers, Smart Animate interpolates position/size/opacity between them automatically — the closest thing to real motion design inside Figma.