Autoplay
Autocomplete
Previous Lecture
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
Figma Design Resources
How-to's: Speed up videos, Downloading videos, Subtitles
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)
Introduction To Figma
Getting Started With Figma
Figma Resources For This Section
Introducing Figma (1:49)
Figma Dashboard (5:12)
Figma Tools (5:45)
Layers And Pages (3:22)
The Top Bar (10:27)
Design Properties (11:16)
Prototyping With Figma (3:35)
Exercise: Creating A Responsive Layout (16:43)
Introduction To Smart Animate
Figma Resources For This Section
Scale (6:21)
Position (5:23)
Opacity (5:44)
Rotation (2:57)
Fill (8:10)
Exercise: Creating A Simple Interaction (5:38)
Exercise: Animating The Navigation (10:00)
Exercise: Creating A Larger Prototype (13:06)
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)
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)
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
Prototyping With Figma
Download