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
ZTM Plugin + Understanding Your Video Player
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 (4:15)
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)
Prototype: Cart Overlay (4:00)
Prototype: Order Progress (5:05)
Assignment: Create and Design a Full Food Delivery App (1:12)
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
Figma Resources For This Section
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