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
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Screen Transitions And Drag Interactions
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