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

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

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

Beginner Figma Video Course

Beginner Figma Video Course

Sources: Andrija Prelec
There is no better place to start learning design than the most popular design application! Learn by doing and begin or enhance your knowledge in Figma.
3 hours 22 minutes 35 seconds
Advanced Figma Video Course + Let's Design Together Add-on

Advanced Figma Video Course + Let's Design Together Add-on

Sources: Andrija Prelec
Become a master of Figma and soar up the career ladder in design. The course is filled with real tips and tricks from a senior product designer with...
20 hours 58 minutes 42 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 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