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

10h 11m 31s
English
Paid

Course description

Learn motion design using Figma from a design industry pro. You'll learn way more than just motion design principles and theory. This projects-based course will teach you how to use motion to take your designs (and portfolio) to the next level.

Read more about the course
  • Use Figma like a pro to do User Interface Design, User Experience Design (UX/UI), Web Design and Mobile App Design
  • Learn the principles of Motion Design, the design process, best practices, and prototyping your projects for your customers and clients
  • Learn to add Motion Graphics and Animations to your projects
  • Learn Motion Design using Figma
  • Learn to use Smart Animate in Figma
  • Micro-interactions, animations, transitions, parallax,
  • Create your own professional design portfolio by the end of the course (we provide everything for you to customize!)
  • Learn Motion Design by actually building real-world projects alongside a design industry pro that you can add to make your design portfolio stand out
  • Learn UI/UX best practices using the latest trends in the industry

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Figma Academy 2.0

Figma Academy 2.0

Sources: Michael Riddering
The most advanced online design course. See for yourself why over 5,000 designers and leading tech teams are trained in Figma...
11 hours 19 minutes 17 seconds
Figma Mastery - The ultimate Figma course for new and struggling designers

Figma Mastery - The ultimate Figma course for new and struggling designers

Sources: (UI) Adrian (Adrian Kuleszo)
The course "Figma Mastery" is an extensive guide that teaches efficient and productive use of Figma, covering all stages of work: from setup...
The Beginner's Guide to Figma

The Beginner's Guide to Figma

Sources: egghead
Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices.
24 minutes 19 seconds
Learn Figma - UI/UX Design Essential Training

Learn Figma - UI/UX Design Essential Training

Sources: udemy
Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w
3 hours 55 minutes 26 seconds
Figma for Web Designers

Figma for Web Designers

Sources: flux-academy (Ran Segall)
If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this course is your golden...
5 hours 31 minutes 58 seconds