Motion Design with Figma: Animations, Motion Graphics, UX/UI

10h 11m 31s
English
Paid

Master the art of motion design using Figma with guidance from an industry professional. Transform your designs from static to dynamic with essential concepts, techniques, and real-world projects that elevate your skills and portfolio.

What You'll Learn

  • Figma Mastery: Use Figma like a pro for User Interface Design, User Experience Design (UX/UI), Web Design, and Mobile App Design.
  • Motion Design Principles: Understand key principles, design processes, best practices, and how to prototype your projects for clients.
  • Motion Graphics & Animations: Add dynamic animations and motion graphics to your designs to create more engaging user experiences.
  • Smart Animate in Figma: Utilize Smart Animate features effectively to bring your designs to life.
  • Key Techniques: Explore micro-interactions, animations, transitions, and parallax to enhance user interactions.
  • Professional Portfolio: Create a compelling design portfolio by the end of the course, with customizable resources provided.
  • Real-World Projects: Gain hands-on experience by building projects alongside a seasoned professional to enrich your portfolio.
  • UI/UX Best Practices: Stay updated with the latest industry trends and integrate them into your design work.

About the Author: zerotomastery.io

zerotomastery.io thumbnail
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.

Watch Online 161 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 161 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Motion Design with Figma: Zero to Mastery
All Course Lessons (161)
#Lesson TitleDurationAccess
1
Motion Design with Figma: Zero to Mastery Demo
03:11
2
What We Are Going to Learn
02:26
3
Misconceptions of Motion Design
03:37
4
Motion Supports Usability
03:21
5
Narrative and Mental Models
05:16
6
What is a Microinteraction?
01:34
7
The Structure of a Microinteraction
01:58
8
Not Every Element is a Microinteraction!
02:04
9
How Microinteractions Impact User Experiences
04:33
10
Recap: What Did We Learn?
02:30
11
Where To Next? Your Choice...
01:01
12
Intro to Figma: Education Plans and Signup
01:35
13
Intro to Figma: Introduction
00:57
14
Intro to Figma: Where to use Figma
00:33
15
Figma UI: File Browser
02:21
16
Figma UI: Files
01:32
17
Figma UI: Toolbar
05:32
18
Figma UI: Left Sidebar
04:07
19
Figma UI: Right Sidebar
04:25
20
Shapes and Tools: Working with Containers
04:39
21
Shapes and Tools: Basic Shapes and Boolean Operations
05:42
22
Designing in Figma: Images
02:50
23
Designing in Figma: Getting Started with Text
04:05
24
Designing in Figma: Constraints
02:51
25
Designing in Figma: Using Auto Layout
06:00
26
Resources and Collaboration: Community Files
01:41
27
Resources and Collaboration: Community Plugins
02:43
28
Resources and Collaboration: Sharing and Comments
03:25
29
What We Are Going to Learn
02:36
30
Exercise: Create a Quick Logo Using Shapes
02:16
31
Exercise: Autolayout Buttons
05:38
32
Exercise: Responsive Navigation
03:08
33
Exercise: Responsive Text
04:16
34
Exercise: Imagery and Gradients
03:13
35
Exercise: Layout and Responsiveness
03:16
36
Assignment: Create Complex Interactive Components
01:03
37
What We Are Going to Learn
01:42
38
Smart Animate Properties
04:05
39
Smart Animate Basics
04:01
40
Exercise: Parallax
05:52
41
Exercise: New Message
06:50
42
Exercise: Overlay
06:45
43
Check-in: Interactive Components
06:15
44
Exercise: Interactive Buttons
09:33
45
What We Are Going to Learn
02:23
46
Prototype: Category Transitions
06:33
47
Interactive Components: Icons
09:21
48
Prototype: Simple Microinteractions
03:07
49
Prototype: Screen Transitions
06:44
50
Prototype: Simple Horizontal Scroll
02:02
51
Prototype: Hijacked Horizontal Scroll
05:12
52
Assignment: Photo Inspiration Mobile App
01:47
53
Easing
01:38
54
Offset and Delay
00:59
55
Parenting
01:03
56
Transformation
01:07
57
Value Change
01:01
58
Masking
01:12
59
Overlay
01:34
60
Cloning
00:53
61
Obscuration
00:59
62
Parallax
01:04
63
Dimensionality
01:50
64
Dolly and Zoom
01:26
65
What We Are Going to Learn
02:07
66
Navigation: Building the Navigation
02:27
67
Navigation: Prototyping with Simple Variants
07:39
68
Navigation: Home Interactive Components
06:45
69
Navigation: Heart Interactive Components
04:09
70
Navigation: Cart Interactive Components
05:21
71
Navigation: Settings Interactive Components
02:34
72
Navigation: Animations with Your Navigation Component
07:20
73
Scrolling: Landing Page Design
02:25
74
Scrolling: Anchor Links
04:32
75
Scrolling: Short Parallax
04:02
76
Scrolling: Extended Parallax
02:23
77
Pagination: Carousel Dots
06:55
78
Pagination: Pagination Control
11:21
79
Dragging: Listing Card
04:22
80
Dragging: App Scrolling
06:02
81
Dragging: Drag and Drop
03:27
82
Microinteractions: Simple File Uploader
03:03
83
Microinteractions: Uploader Success
01:35
84
Microinteractions: Cancel Upload
03:38
85
Microinteractions: Normal Like Button
05:30
86
Microinteractions: Like Button Bounce
06:30
87
Delight: Confetti
08:22
88
Delight: Checklist
06:54
89
Delight: Add to Cart
05:42
90
Step 1: Discovery and Research
03:59
91
Step 2: Design and Storyboard
02:53
92
Step 3: Prototype
01:51
93
Step 4: Testing
03:03
94
Check in: Quick Tips!
03:41
95
Recap: What Did We Learn?
01:20
96
What We Are Going to Learn
01:26
97
Interactive Component: Carousel Section
07:09
98
Prototype: Simple Carousel Transition
04:59
99
Prototype: Complex Parallax and 3D Image Effect
12:21
100
Assignment: Create a Full Page Carousel
01:29
101
Exercise: Imposter Syndrome
02:56
102
What We Are Going to Learn
02:20
103
Interactive Component: Toggle Card
05:50
104
Interactive Component: Temperature Slider
04:47
105
Prototype: Toggle Cards
02:13
106
Prototype: Simple Temperature Control
04:11
107
Prototype: Colour Temperature Control
04:10
108
Prototype: Navigation Transition
03:12
109
Assignment: Create Complex Interactive Components
01:16
110
Feedback Drives Better Design
02:59
111
Constructive Feedback
04:03
112
Recap: What Did We Learn?
01:34
113
What We Are going to Learn
03:23
114
Interactive Component: Website Buttons
06:43
115
Interactive Component: General Room Card
03:34
116
Interactive Component: Navigation and Links
06:00
117
Prototype: Landing Page Parallax Intro
02:43
118
Prototype: Full Image Parallax
02:06
119
Prototype: Testimonial Carousel
03:16
120
Prototype: Staggered Cards
04:52
121
Prototype: Gallery Image Automated Scroll
03:40
122
Assignment: Prototype Parallax Effects
00:59
123
What We Are Going to Learn
02:31
124
Interactive Component: Form Buttons
03:56
125
Interactive Component: Progress Bar
03:38
126
Interactive Component: Arrow Icon Buttons
05:48
127
Interactive Component: General Input
05:52
128
Interactive Component: Select Input and Dropdown
07:29
129
Interactive Component: Icon Toggle Card
04:09
130
Interactive Component: Checkbox Item
06:31
131
Interactive Component: Kitchen Card and Carousel Dots
02:50
132
Interactive Component: Kitchen Carousel
08:30
133
Prototype: Form Layout
03:03
134
Prototype: Form Introduction
01:51
135
Prototype: General Input and Dropdown Overlay
05:37
136
Prototype: Toggle Cards and Checkbox
04:10
137
Prototype: Carousel
04:43
138
Assignment: Create Interactive Form Components
01:02
139
What We Are Going to Learn
02:16
140
Interactive Components: Buttons
03:34
141
Interactive Components: Icon Buttons
03:35
142
Interactive Components: Category Card
04:34
143
Interactive Components: Tab Navigation
04:57
144
Interactive Components: Item Card
06:01
145
Interactive Components: Promo Card
06:55
146
Interactive Components: Cart Floating Action Button
05:30
147
Interactive Components: Item Overlay
05:04
148
Interactive Components: Order Progression Status Icons
08:06
149
Interactive Components: Order Progression Overlay
04:22
150
Prototype: Automatic Parallax Carousel
02:52
151
Prototype: Tab List Transition
03:34
152
Prototype: Masking and Overlay
03:27
153
Prototype: Cart Overlay
04:01
154
Prototype: Order Progress
05:06
155
Assignment: Create and Design a Full Food Delivery App
01:13
156
What We Are Going to Learn
00:37
157
What is Kap?
01:26
158
Using Kap
02:24
159
What is Screencastify?
01:06
160
Using Screencastify
02:57
161
Thank You!
01:18
Unlock unlimited learning

Get instant access to all 160 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription