Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Introduction
Motion Design with Figma: Zero to Mastery (3:10)
Exercise: Meet Your Classmates and Instructor
Design Resources
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal
What We Are Going to Learn (2:25)
Motion in UX Design
Misconceptions of Motion Design (3:36)
Motion Supports Usability (3:20)
Narrative and Mental Models (5:15)
What is a Microinteraction? (1:33)
The Structure of a Microinteraction (1:57)
Not Every Element is a Microinteraction! (2:03)
How Microinteractions Impact User Experiences (4:32)
Recap: What Did We Learn? (2:29)
Where To Next? Your Choice... (1:00)
The Basics of Figma
Resources For This Section
Intro to Figma: Education Plans and Signup (1:34)
Intro to Figma: Introduction (0:56)
Intro to Figma: Where to use Figma (0:32)
Figma UI: File Browser (2:20)
Figma UI: Files (3:02)
Figma UI: Toolbar (5:31)
Figma UI: Left Sidebar (4:06)
Figma UI: Right Sidebar (4:24)
Shapes and Tools: Working with Containers (4:38)
Shapes and Tools: Basic Shapes and Boolean Operations (5:41)
Designing in Figma: Images (2:49)
Designing in Figma: Getting Started with Text (4:04)
Designing in Figma: Constraints (2:50)
Designing in Figma: Using Auto Layout (5:59)
Resources and Collaboration: Community Files (1:40)
Resources and Collaboration: Community Plugins (2:42)
Resources and Collaboration: Sharing and Comments (3:24)
What We Are Going to Learn (5:10)
Exercise: Create a Quick Logo Using Shapes (2:15)
Exercise: Autolayout Buttons (5:37)
Exercise: Responsive Navigation (3:07)
Exercise: Responsive Text (4:15)
Exercise: Imagery and Gradients (3:12)
Exercise: Layout and Responsiveness (3:15)
Assignment: Create Complex Interactive Components (1:02)
Let's Have Some Fun (+ Free Resources)
Introduction to Smart Animate
Resources For This Section
What We Are Going to Learn (1:41)
Smart Animate Properties (4:04)
Smart Animate Basics (4:00)
Exercise: Parallax (5:51)
Exercise: New Message (13:38)
Exercise: Overlay (13:28)
Check-in: Interactive Components (6:14)
Exercise: Interactive Buttons (9:32)
Unlimited Updates
Project: Photo Inspiration Application
Resources For This Section
What We Are Going to Learn (2:22)
Prototype: Category Transitions (13:04)
Interactive Components: Icons (9:20)
Prototype: Simple Microinteractions (3:06)
Prototype: Screen Transitions (6:43)
Prototype: Simple Horizontal Scroll (2:01)
Prototype: Hijacked Horizontal Scroll (5:12)
Assignment: Photo Inspiration Mobile App (1:46)
Course Check-In
Motion Design Principles
Easing (1:37)
Offset and Delay (0:59)
Parenting (1:02)
Transformation (1:06)
Value Change (1:00)
Masking (1:11)
Overlay (1:33)
Cloning (0:52)
Obscuration (0:58)
Parallax (2:06)
Dimensionality (1:49)
Dolly and Zoom (1:25)
Implement a New Life System
Motion Designs Patterns in Figma
Resources For This Section
What We Are Going to Learn (2:06)
Navigation: Building the Navigation (2:26)
Navigation: Prototyping with Simple Variants (7:38)
Navigation: Home Interactive Components (6:44)
Navigation: Heart Interactive Components (4:08)
Navigation: Cart Interactive Components (5:20)
Navigation: Settings Interactive Components (2:33)
Navigation: Animations with Your Navigation Component (7:19)
Scrolling: Landing Page Design (2:24)
Scrolling: Anchor Links (4:31)
Scrolling: Short Parallax (4:01)
Scrolling: Extended Parallax (2:22)
Pagination: Carousel Dots (6:54)
Pagination: Pagination Control (11:20)
Dragging: Listing Card (4:21)
Dragging: App Scrolling (12:02)
Dragging: Drag and Drop (3:26)
Microinteractions: Simple File Uploader (6:04)
Microinteractions: Uploader Success (1:34)
Microinteractions: Cancel Upload (3:37)
Microinteractions: Normal Like Button (5:29)
Microinteractions: Like Button Bounce (6:29)
Delight: Confetti (8:21)
Delight: Checklist (6:53)
Delight: Add to Cart (5:41)
The Motion Design Process
Step 1: Discovery and Research (3:58)
Step 2: Design and Storyboard (2:52)
Step 3: Prototype (1:50)
Step 4: Testing (3:02)
Check in: Quick Tips! (3:40)
Recap: What Did We Learn? (1:19)
Project: National Geographic Carousel
Resources For This Section
What We Are Going to Learn (1:25)
Interactive Component: Carousel Section (7:08)
Prototype: Simple Carousel Transition (4:58)
Prototype: Complex Parallax and 3D Image Effect (12:20)
Assignment: Create a Full Page Carousel (1:28)
Exercise: Imposter Syndrome (2:55)
Project: Smart Home App
Resources For This Section
What We Are Going to Learn (2:19)
Interactive Component: Toggle Card (5:49)
Interactive Component: Temperature Slider (4:46)
Prototype: Toggle Cards (2:12)
Prototype: Simple Temperature Control (4:10)
Prototype: Colour Temperature Control (4:09)
Prototype: Navigation Transition (3:11)
Assignment: Create Complex Interactive Components (1:15)
Feedback
Feedback Drives Better Design (2:58)
Constructive Feedback (4:02)
Recap: What Did We Learn? (1:33)
Project: Home Renovation Landing Page
Resources For This Section
What We Are going to Learn (3:22)
Interactive Component: Website Buttons (6:42)
Interactive Component: General Room Card (3:33)
Interactive Component: Navigation and Links (5:59)
Prototype: Landing Page Parallax Intro (2:42)
Prototype: Full Image Parallax (2:05)
Prototype: Testimonial Carousel (3:15)
Prototype: Staggered Cards (4:51)
Prototype: Gallery Image Automated Scroll (3:39)
Assignment: Prototype Parallax Effects (0:58)
Project: Home Renovation Estimation Form
Resources For This Section
What We Are Going to Learn (2:30)
Interactive Component: Form Buttons (3:55)
Interactive Component: Progress Bar (3:37)
Interactive Component: Arrow Icon Buttons (5:47)
Interactive Component: General Input (5:51)
Interactive Component: Select Input and Dropdown (7:28)
Interactive Component: Icon Toggle Card (4:08)
Interactive Component: Checkbox Item (6:30)
Interactive Component: Kitchen Card and Carousel Dots (2:49)
Interactive Component: Kitchen Carousel (8:29)
Prototype: Form Layout (3:02)
Prototype: Form Introduction (1:50)
Prototype: General Input and Dropdown Overlay (5:36)
Prototype: Toggle Cards and Checkbox (4:09)
Prototype: Carousel (4:42)
Assignment: Create Interactive Form Components (1:01)
Project: Food Delivery App
Resources For This Section
What We Are Going to Learn (2:15)
Interactive Components: Buttons (3:33)
Interactive Components: Icon Buttons (3:34)
Interactive Components: Category Card (4:33)
Interactive Components: Tab Navigation (4:56)
Interactive Components: Item Card (6:00)
Interactive Components: Promo Card (6:54)
Interactive Components: Cart Floating Action Button (5:29)
Interactive Components: Item Overlay (5:03)
Interactive Components: Order Progression Status Icons (8:05)
Interactive Components: Order Progression Overlay (4:21)
Prototype: Automatic Parallax Carousel (2:51)
Prototype: Tab List Transition (3:33)
Prototype: Masking and Overlay (3:26)
Assignment: Create and Design a Full Food Delivery App (1:12)
Prototype: Cart Overlay (4:00)
Prototype: Order Progress (5:05)
Showcasing Your Work
Figma Resources For This Section
What We Are Going to Learn (0:36)
What is Kap? (1:25)
Using Kap (2:23)
What is Screencastify? (1:05)
Using Screencastify (2:56)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Interactive Components: Order Progression Status Icons
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures