BitWithBite
UI/UX Worksheet
🎨 Prototyping
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain triggersExplain transitionsExplain overlaysExplain Smart Animate📚 Quick Recap
🎯 What you'll practice: Connecting frames with triggers, transitions, and overlays.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A trigger defines:
2Smart Animate requires:
3An overlay is used for:
4"On Hover" is an example of a:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Dragging from one frame's edge to another creates a frame .
6 Animate interpolates position/size/opacity between matching layers.
7Explain the difference between "Instant" and "Dissolve" transitions.
8Give an example of a UI moment best served by an overlay rather than a full navigation.
9Why does Smart Animate fail if layer names don't match between frames?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a prototype flow for a "like" button animation (icon grows and changes color when tapped). Describe the trigger, transition, and layer setup needed.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = connection 6 = Smart 7 = Instant is an immediate cut with no animation; Dissolve fades from one frame to the next over time 8 = e.g. a delete-confirmation dialog shown as a modal overlay instead of a new full page 9 = Because Smart Animate matches layers by name to know what to interpolate — mismatched names mean it can't tell which layer maps to which | 10 = Trigger: On Click; two frames with identically-named heart icon layers, one small/gray and one large/red; transition: Smart Animate, so Figma interpolates size and color automatically.