About the Course
Learn Figma animations from scratch—smart animate, hover effects, mouse triggers, delay-based transitions, component variants & real-world UI motion. Create stunning prototypes and bring your designs to life without writing a single line of code!
What You’ll Learn
- Understand various animation triggers in Figma like: On Click, On Drag, While Hovering, Mouse Enter/Leave, After Delay, etc.
- Use Smart Animate to create seamless transitions between shapes, colors, and sizes (e.g., square to circle).
- Build animated buttons with hover effects, color gradients, strokes, and smooth transformations using component variants.
- Explore how hovering or moving the mouse in/out triggers transitions — useful for tooltips, cards, and micro-interactions.
- Use Component Sets and Prototype mode to define different interaction states for smooth UX.
- Implement after-delay animations (e.g., elements appearing or expanding after a timed delay) to mimic real-world UI behavior.
- Design a light-to-dark mode toggle with smooth background, color, and shape transitions — showcasing real-world UI theming.
Course Format
- On-demand video lessons
- Self-paced learning
- Practical examples and exercises
Who It’s For
- UI/UX designers looking to add animation to their Figma prototypes.
- Web designers who want to create engaging website interactions.
- Anyone interested in learning animation without code.
- Beginners to advanced Figma users.
Course Structure
- Price: FREE
- Duration: 60 minutes
- Format: On-demand video lessons
- Mode: Self-paced
- Certificate: Yes, with completion
- Where: Available on the Juno School mobile app (Android & iOS)
Why Take This Course
- Learn practical animation techniques you can apply immediately.
- Enhance your design skills and create more engaging user experiences.
- No coding required – focus on design and animation principles.
- Boost your portfolio with interactive Figma prototypes.