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
Why Is Motion Important?
Common Misconceptions Of Motion Design (5:25)
Motion Helps Create Usability (7:19)
Narrative And Mental Models (9:31)
Where To Next? Your Choice... (1:00)
Figma Basics
Figma Resources For This Section
Introduction (2:49)
Plans and Signup (2:32)
Where to use Figma (1:22)
Figma UI (Structure) (2:45)
Figma UI (Files) (2:42)
Figma UI (Toolbar) (6:57)
Figma UI (Left Sidebar) (7:33)
Figma UI (Right Sidebar) (6:28)
Shapes and Tools (Frames) (3:13)
Shapes and Tools (Groups) (2:44)
Shapes and Tools (Basic Shapes and Boolean Operations) (6:25)
Designing in Figma (Images) (5:51)
Designing in Figma (Getting Started with Text) (6:01)
Designing in Figma (Constraints) (4:35)
Designing in Figma (Using Auto Layout) (5:02)
Designing in Figma (Auto Layout Properties) (7:58)
Resources and Collaboration (Community Files) (3:09)
Resources and Collaboration (Community Plugins) (5:57)
Resources and Collaboration (Sharing and Comments) (5:00)
Project (What We Are Going To Build) (1:24)
Project (Creating a Logo Using Basic Shapes) (5:03)
Project (Auto Layout Buttons) (5:05)
Project (Creating a Responsive Navigation) (9:06)
Project (Responsive Text) (5:32)
Project (Imagery and Gradients) (5:34)
Project (Strokes and Shapes) (4:40)
Project (Layout and Responsiveness) (7:50)
Let's Have Some Fun (+ Free Resources)
Introduction to Smart Animate
Figma Resources For This Section
Figma Check In (Intro to Smart Animate) (2:07)
Figma Check In (Smart Animate Properties) (3:50)
Exercise (Parallax) (5:21)
Exercise (New Message) (5:13)
Exercise (Overlays) (5:17)
Figma Check In (Interactive Components) (4:43)
Exercise (Interactive Buttons) (7:54)
Unlimited Updates
Project: Photo Inspiration Application
Figma Resources For This Section
Design Assets (11:26)
Filtering Through Categories (9:08)
Screen Transitions And Drag Interactions (11:09)
Simple Microinteractions (12:49)
Course Check-In
Motion Design Principles
Introduction (1:09)
Easing (2:13)
Offset And Delay (2:02)
Parenting (2:12)
Transformation (2:27)
Value Change (3:35)
Masking (2:28)
Overlay (1:54)
Cloning (1:52)
Obscuration (2:06)
Parallax (3:04)
Dimensionality (2:36)
Dolly And Zoom (2:48)
Implement a New Life System
Creating Motion In Figma
Figma Resources For This Section
Exercise: Navigation Transitions (Navigation Design) (10:32)
Exercise: Navigation Transitions (Heart) (10:04)
Exercise: Navigation Transitions (Cart) (6:58)
Exercise: Navigation Transitions (Home) (7:11)
Exercise: Scrolling (Landing Page) (8:18)
Exercise: Scrolling (Anchor Links) (4:03)
Exercise: Scrolling (Parallax) (9:06)
Exercise: Paging (Simple Carousel Dots) (11:32)
Exercise: Paging (Carousel Animations) (12:56)
Exercise: Dragging (Listing Card) (13:31)
Exercise: Dragging (Image Drag) (8:09)
Exercise: Dragging (Dragging Through Content) (11:21)
Exercise: Dragging (Drag and Drop) (10:48)
Exercise: Microinteractions (File Uploader) (5:15)
Exercise: Microinteractions (File Uploader Part 2) (8:59)
Exercise: Microinteractions (Pause and Play) (2:19)
Exercise: Microinteractions (Like Button) (5:31)
Exercise: Microinteractions (Like Interaction) (11:24)
Exercise: Delight (Success Modal) (6:04)
Exercise: Delight (Confetti Pop) (11:13)
Exercise: Delight (Checklist) (9:37)
Exercise: Delight (Checklist Part 2) (10:40)
Exercise: Delight (Cart Button Part 1) (8:01)
Exercise: Delight (Cart Button Part 2) (16:26)
The Motion Design Process
Discovery And Research Part 1 (2:08)
Discovery And Research Part 2 (3:39)
Design And Storyboard (3:31)
Prototype (2:11)
Testing (3:38)
Helpful Tips (11:35)
Project: National Geographic Carousel
Figma Resources For This Section
Simple Landing Page Carousel (12:21)
Complex Parallax And 3D Image Effect (7:03)
Exercise: Imposter Syndrome (2:55)
Microinteractions
Figma Resources For This Section
What Is A Microinteraction? (10:23)
Why Microinteractions Are Important (9:14)
Figmotion: Part 1 (11:10)
Figmotion: Part 2 (11:49)
Project: Smart Home Application
Figma Resource For This Section
Design A Mobile Home Screen (13:55)
Create A Toggle Interaction (5:45)
Temperature Adjustment Interactions (15:50)
Feedback
Why Is Feedback Important? (4:18)
Constructive Feedback (6:48)
Project: Home Renovation Landing Page
Figma Resources For This Section
Design A Landing Page (14:10)
Prototyping A Landing Page (5:07)
Parallax Effects: Part 1 (14:06)
Carousel (3:57)
Parallax Effects: Part 2 (6:08)
Gallery (6:33)
Project: Home Renovation Form
Figma Resources For This Section
Motion In Form Elements (5:11)
Form Progress (4:20)
Animating Form Content (3:53)
Inputs And Buttons: Part 1 (7:37)
Inputs And Buttons: Part 2 (6:32)
Inputs And Buttons: Part 3 (6:32)
Inputs And Buttons: Part 4 (4:17)
Tooltips (3:43)
Carousel Input (8:02)
Project: Food Delivery Application
Figma Resources For This Section
Introduction (4:53)
Using Parallax To Draw Attention (6:45)
List Transitions (9:36)
Alternative Overlays (6:56)
Masking And Overlay (12:04)
Microinteractions and Floating Action Buttons (8:17)
Order Progress: Part 1 (8:28)
Order Progress: Part 2 (10:54)
Showcasing Your Work
Figma Resources For This Section
Kap For Mac (1:14)
How To Use Kap (5:18)
Using Your Kap Gif In Figma (3:17)
Screenity For Chrome And Windows (0:42)
How To Use Screenity (4:13)
Using Your Screenity GIF in Figma (2:03)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Endorsements On LinkedIn
Learning Guideline
Temperature Adjustment Interactions
Lecture content locked. Exclusive for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures