Autoplay
Autocomplete
Previous Lesson
Complete and Continue
UI Animation Masterclass - Figma, Principle & After Effects (60+ Video Lessons)
C01 - Introduction
Intro-Welcome to UI Animation Masterclass (2:42)
C02-Basics of Prototyping & Animation
What is Prototyping and UI Animation? (2:26)
Tools for prototyping and animation (2:16)
C03-Understanding the use of Motion in UI
Why do we need motion in Product Design? (1:57)
Purpose of UI animations? (2:41)
Is Ui animation difficult? (0:54)
How does a Prototype and Animation work? (3:41)
What not to do while animating the UI? (1:59)
C04-Motion Choreography
Realtime vs Non-Realtime interactions (1:07)
Principles of UX in motion (2:17)
Understanding motion choreography (1:44)
Understanding user interaction with mobile and web (0:57)
Breaking down an UI animation (1:45)
C05-Prototyping in Figma - Level I
C05- Project Files
Introduction (0:47)
Figma Interface & Prototyping Panel (6:57)
Understanding Triggers & Interaction Details (9:40)
Creating Transition based prototype (2:37)
Scrolling, Device Frames & Paging (7:25)
Smart Animate (17:44)
Overlays (2:40)
Creating a micro-interaction (9:14)
C06-Prototyping in Figma - Level II
C06-Project Files
Creating Complex micro-interactions (14:45)
Smart Animate + Dragging (5:46)
Creating an interactive prototype (12:48)
Previewing the interactive prototype on mobile device
Creating a Text Animation- Smart Animate in Action (6:15)
Creating an animated background (10:27)
Creating Animated Dribbble Shots (6:56)
Creating Animated Landing Pages (5:38)
C07-Understanding Animation Styles & Transform Properties
Animation Styles in Action (1:45)
Create animation in minutes by simple transform property changes (1:06)
C08-Prototyping in Principle - Level I
C08-Project Files
Intro, Installing Principle, Interface & Connecting Screens (12:45)
Importing designs, Complex Animation & Animation Timeline (13:45)
Creating a footer bar micro-interaction (11:47)
Scrolling & Paging in Action (7:09)
Understanding Drivers (14:15)
Easing, Timing in Animation & Creating Delays (24:43)
Components (8:13)
Creating Fake Tap Areas & Playing Videos (14:26)
Creating an interactive mobile app prototype with video (49:08)
Previewing the interactive prototype on mobile device (2:56)
Exporting Video & GIF from Principle (3:56)
C09-Prototyping in Principle - Level II
C09-Project Files
Rapid Prototyping a UX Solution to a problem (16:48)
How to think animation quickly & add life to static designs? (12:12)
Creative onboarding flow animation (17:49)
Text animation & Landing Page Animation (11:19)
Splash Screen Animation (14:07)
AI based Food Ordering UI Animation-Part I (39:15)
AI based Food Ordering UI Animation-Part II (48:26)
AI based Movies Finder App UI Animation (31:12)
C10-Animation in After Effects - Level I
C10-Project Files
Introduction (2:47)
Why do we need AE to create UI animations? (1:59)
Breaking down the Interface, Keyframes & Animation Timeline with a simple Animation (42:09)
Importing UI Design Assets & Basic Animation Workflow (20:25)
Animating Transition between 2 Mobile App Screens (29:22)
Creating a 3D Scroll effect (35:24)
Creating a footer bar micro-interaction (19:02)
Creating gestures animations- Tap, Swipe & Scroll (31:56)
Exporting video prototypes & animations in AE (10:07)
Creating Animated Presentation for Dribbble & Instagram (12:19)
🎉 Free Product (Congratulations on completing 80% of the Masterclass) (1:57)
C11-Animation in After Effects - Level II
C11-Project Files
Lottie Animation & LottieFiles Plugin (2:08)
Creating Icons morphing animation (12:34)
Exporting in JSON format (6:41)
Animation handoff to Developers Checklist
C12-Final thoughts
What tools do I use to work with clients? (1:43)
Thoughts on After Effects & Principle (1:05)
How to get better at animation thinking (0:57)
Resources you can take inspiration from (0:53)
🎉 Extro- You've completed the Masterclass 100% (1:16)
What not to do while animating the UI?
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock