Skip to main content
CF

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: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

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

Related courses

Frequently asked questions

What prerequisites are needed before taking this course?
The course does not specify any formal prerequisites, but familiarity with basic design concepts can be beneficial. An understanding of user experience (UX) and user interface (UI) principles may help students grasp the material more quickly. The course starts with an introduction to Figma, so prior experience with this tool is not required, making it suitable for beginners who are interested in motion design.
What types of projects will I work on during the course?
Students will engage in various hands-on projects designed to enhance their understanding of motion design using Figma. These projects include creating interactive components, using Smart Animate for animations, and building a photo inspiration mobile app. Exercises such as creating responsive navigation and practicing parallax effects are also part of the curriculum, providing practical experience in building dynamic user interfaces.
Who is the target audience for this course?
This course is intended for individuals interested in mastering motion design using Figma, specifically those involved in UX/UI, web design, and mobile app design. It is suitable for both beginners and professionals who want to enhance their skills in creating engaging user experiences through animations and motion graphics. Designers looking to update their portfolios with dynamic projects may find this course particularly beneficial.
How does this course compare in depth and scope to other motion design courses?
The course offers a comprehensive introduction to motion design with a focus on practical application using Figma. Unlike some other courses that may focus solely on theory, this one emphasizes hands-on experience with real-world projects. It covers key principles, best practices, and the latest industry trends, making it a well-rounded choice for those looking to integrate motion design into their UX/UI work.
What specific tools and features of Figma are covered?
The course covers a range of Figma tools and features, including Smart Animate for animations, micro-interactions, and prototyping. Students will learn to use the Figma UI components like the toolbar and sidebars, and work with shapes, text, auto layout, and constraints. Collaboration features such as community files and plugins are also explored, enabling students to leverage Figma's full capabilities.
What topics are not included in this course?
The course focuses on motion design within the context of Figma and does not cover motion design tools outside of this platform. It also does not delve into coding or programming aspects of motion design, as it is centered around Figma's design and animation capabilities. Those seeking in-depth coverage of alternative motion design software or coding for animations may need to look elsewhere.
What is the expected time commitment for this course?
The course consists of 161 lessons, and while specific runtime details are not provided, the extensive lesson list suggests a significant time commitment. Students should be prepared to spend several hours per week working through the lessons, exercises, and projects. The time investment will vary based on individual pace and prior familiarity with the material.