Don't want to get left behind? Learn to build with A.I. now 🤖
Back to courses

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

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.

25 Days

Average time students take to complete this course.

instructor
Taught by: Daniel Schifano
Last updated: April 2024

Course overview

We guarantee you this is the most comprehensive online course on Motion Design using Figma. Micro-interactions, animations, creating beautiful UX/UI, and so much more! You will learn modern Motion Design principles and best practices by actually building real-world design projects in Figma step-by-step alongside a design industry pro.

What you'll learn

  • 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

This motion design course is going to give you the skills that will make you stand out from other designers, be recognized as a top designer and allow you to charge a lot of money for your time.

We aren't talking about competiting for $5/hour designing logos on random freelancing websites.

You will be able to charge at least 10x-20x that after completing this course.

And you'll be learning motion design in good company.

By enrolling today, you’ll also get to join our exclusive live online community classroom where you'll be learning and designing alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you will be learning from (and with) Daniel, a design industry professional that has actual real-world experience as a lead product designer working for top companies all over the world.

Using the latest best practices in motion design, user interface (UI) and user experience (UX), this course focuses on efficiently teaching you all about building professional interactions, animations and motion graphics for all your future web and mobile app projects.

We will be using Figma and Figma Smart Animate to accomplish this because it is now the #1 tool used by the top modern designers. Figma is replacing all outdated design tools of the past (we're talking about you Adobe After Effects).

We also provide all Figma files, premium design templates, and assets in this course for you, so you can keep and use them when you work with all your future clients!

Here is what the course will cover to take you from Zero to Motion Design Mastery

The curriculum is very hands on. Daniel takes you step-by-step from start to finish to becoming a Motion Designer that can build your own beautiful, professional projects.

1. Introduction to Figma - Learn the different parts of Figma and what you will need to get started. We dive into the important details to get you up and running so there is no confusion.

  • Getting Started With Figma
  • Introducing Figma
  • Figma Dashboard
  • Figma Tools
  • Layers + Pages
  • The Top Bar
  • Design Properties
  • Prototyping With Figma
  • Exercise: Creating a Responsive Layout

2. Introduction to Figma Smart Animate - Figma's Smart Animate is a game changer. You'll learn how to modify all the different properties it supports and then put that knowledge to use as we build and explain some simple prototypes.

  • Scale
  • Position
  • Opacity
  • Rotation
  • Fill
  • Exercise: Creating a Simple Interaction
  • Exercise: Animating Navigation Items
  • Exercise: Creating a Larger Prototype

3. Project: Photo Inspiration Application - You'll jump into your first project where you will take the provided resources and what you've already learned to create your own prototype of a photo inspiration mobile application.

  • Design Assets
  • Filtering Through Categories
  • Screen Transitions + Drag Interactions
  • Simple Micro-interactions

4. Why is Motion so Important? You will learn how motion plays a major role in building usable products and how it helps create narrative and reinforces mental models.

  • The Common Misconceptions of Motion Design
  • How Motion Helps Create Usability
  • Narrative + Mental Models

5. Motion Design Principles - In this section, you will learn the principles of motion design and what makes them integral to the success of any design.

  • Intro to Motion Design Principles
  • Easing
  • Offset + Delay
  • Parenting
  • Transformation
  • Value Change
  • Masking
  • Overlay
  • Cloning
  • Obscuration
  • Parallax
  • Dimensionality
  • Dolly + Zoom

6. Creating Motion in Figma - Time to combine the theory and practical knowledge you've gained and jump right back into Figma to build some smaller prototypes. Daniel walks you through each exercise step-by-step.

  • Exercise: Navigation Transitions
  • Exercise: Scrolling
  • Exercise: Paging
  • Exercise: Dragging
  • Exercise: Micro-interactions
  • Exercise: Delight

7. The Motion Design Process - How does motion design fit into the "normal design process"? Don't worry we got you covered. Daniel will explain his process for determining the right motion solutions for user needs.

  • Discovery + Research Part 1
  • Discovery + Research Part 2
  • Design + Storyboard
  • Prototype
  • Testing
  • Helpful Tips

8. Project: National Geographic Carousel - Learn how to create a simple and a complex version of a carousel effect in Figma.

  • Quick & Easy Landing Page Carousel
  • How to Build a Complex Parallax and 3D Image Effect

9. Micro-interactions - Dig deeper into why micro-interactions are so important. You'll then jump right into Figma to create your very own animation with Daniel using the Figmotion plugin.

  • What Is A Micro-interaction?
  • Why Are Micro-interactions So Important?
  • Figmotion: Part 1
  • Figmotion: Part 2

10. Project: Smart Home Mobile Application - Smart home apps are becoming more and more popular. Learn how to design a simple home screen and then animate it using Figma. Follow along with Daniel as he explains how he created a complex temperature adjustment interaction.

  • Designing The Home Screen
  • Create a Toggle Interaction
  • Temperature Adjustment Interactions

11. Feedback -  Learn the proper way to facilitate and gather constructive feedback for your designs.

  • Why Is Design Feedback Important?
  • Constructive Design Feedback

12. Project: Home Renovation Landing Page - Ever wanted to design a comprehensive landing page with animated elements? Here's your chance. Follow along with Daniel as he takes you through the process of breaking down a landing page into multiple prototypes.

  • Designing The Landing Page
  • Prototyping The Landing Page
  • Parallax Effects: Part 1
  • Carousel
  • Parallax Effects: Part 2
  • Gallery

13. Project: Home Renovation Form - People often forget about forms but using motion to help your user through a very important task is key. Daniel will teach you how to apply some subtle animations to your form interactions which will help you create more usable products.

  • Motion in Form Elements
  • Form Progress
  • Animating Form Content
  • Inputs + Buttons: Part 1
  • Inputs + Buttons: Part 2
  • Inputs + Buttons: Part 3
  • Inputs + Buttons: Part 4
  • Tooltips
  • Carousel Input

14. Project: Food Delivery Mobile Application - Learn how to create some flashy interactions with masking techniques and then follow along as Daniel explains how to create a complex order progress prototype.

  • Introduction
  • Using Parallax to Draw Attention
  • List Transitions
  • Alternative Overlays
  • Masking + Overlay
  • Micro-interactions + Floating Action Buttons
  • Order Progress: Part 1
  • Order Progress: Part 2

15. Showcasing Your Prototypes - You have all these prototypes but how do you show them off in your portfolio? We'll take you through several options for both Mac and Windows on how to record your prototype and export it to your preferred format.

  • Kap for Mac
  • How to use Kap
  • Using Your Kap GIF in Figma
  • Screenity for Chrome + Windows
  • How to Use Screenity
  • Using Your Screenity GIF in Figma

What's the bottom line?

This course is not about making you just watch a bunch of tutorial videos.

This course will push you and challenge you to go from an absolute beginner in motion design to someone that is in the top 10% of Motion Designers 💪.

How do we know?

Because thousands of Zero To Mastery graduates have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They are also working as top freelancers getting paid while working remotely around the world.

And they come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

You have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start learning Motion Design today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to create your own beautiful designs, get hired, and advance your career.

Join Zero To Mastery Now

What you'll design

The best way you learn is by doing. Not just watching endless tutorials. That's why a key part of this course is the real-world projects that you'll get to design. Plus they'll look great on your portfolio.

Photo Inspo

Photo Inspo

Test your Smart Animate skills and jump right into Figma to create some smooth transitions in your very own photo app.

NatGeo

NatGeo

Jump right into Figma to create a beautiful National Geographic prototype. You'll learn how to use subtle motion principles to entice users and how to create a simple, yet effective prototype that mimics web-based carousels.

Smart Home

Smart Home

Harness the power of Figma's Smart Animate to create a real-life Smart Home app. You'll learn simple interactions that showcase active and inactive states and more complex interactions that allow you to drag and set the temperature within your home!

Home Reno Web

Home Reno Web

Implement parallax interactions and timed automatic interactions in this website prototype. We'll also walk you through how to create an interactive form from scratch while using the latest UI and UX motion principles so your users are always engaged!

Food Deliveroo

Food Deliveroo

Feeling hungry? We got you covered with this prototype! Use GIFs in your prototype to create a realistic checkout experience and mimic the experience of real-time tracking of your food order from pickup to delivery all in one project.

Join Zero To Mastery Now

Course curriculum

To make sure this course is a good fit for you, you can start learning Motion Design with Figma for free right now by clicking any of the PREVIEW links below.

Introduction

6 lectures

Motion Design with Figma: Zero to Mastery3:10

PREVIEW

Exercise: Meet Your Classmates and Instructor

PREVIEW

Design Resources

PREVIEW

Understanding Your Video Player (notes, video speed, subtitles + more)

PREVIEW

Set Your Learning Streak Goal

PREVIEW

What We Are Going to Learn2:25

PREVIEW

Motion in UX Design

9 lectures

Misconceptions of Motion Design3:36

PREVIEW

Motion Supports Usability3:20

PREVIEW

Narrative and Mental Models5:15

PREVIEW

What is a Microinteraction?1:33

BEGIN

The Structure of a Microinteraction1:57

BEGIN

Not Every Element is a Microinteraction!2:03

BEGIN

How Microinteractions Impact User Experiences4:32

BEGIN

Recap: What Did We Learn?2:29

BEGIN

Where To Next? Your Choice...1:00

PREVIEW

The Basics of Figma

27 lectures

Resources For This Section

BEGIN

Intro to Figma: Education Plans and Signup1:34

BEGIN

Intro to Figma: Introduction0:56

BEGIN

Intro to Figma: Where to use Figma0:32

BEGIN

Figma UI: File Browser2:20

BEGIN

Figma UI: Files3:02

BEGIN

Figma UI: Toolbar5:31

BEGIN

Figma UI: Left Sidebar4:06

BEGIN

Figma UI: Right Sidebar4:24

BEGIN

Shapes and Tools: Working with Containers4:38

BEGIN

Shapes and Tools: Basic Shapes and Boolean Operations5:41

BEGIN

Designing in Figma: Images2:49

BEGIN

Designing in Figma: Getting Started with Text4:04

BEGIN

Designing in Figma: Constraints2:50

BEGIN

Designing in Figma: Using Auto Layout5:59

BEGIN

Resources and Collaboration: Community Files1:40

BEGIN

Resources and Collaboration: Community Plugins2:42

BEGIN

Resources and Collaboration: Sharing and Comments3:24

BEGIN

What We Are Going to Learn5:10

BEGIN

Exercise: Create a Quick Logo Using Shapes2:15

BEGIN

Exercise: Autolayout Buttons5:37

BEGIN

Exercise: Responsive Navigation3:07

BEGIN

Exercise: Responsive Text4:15

BEGIN

Exercise: Imagery and Gradients3:12

BEGIN

Exercise: Layout and Responsiveness3:15

BEGIN

Assignment: Create Complex Interactive Components1:02

BEGIN

Let's Have Some Fun (+ Free Resources)

BEGIN

Introduction to Smart Animate

10 lectures

Resources For This Section

BEGIN

What We Are Going to Learn1:41

BEGIN

Smart Animate Properties4:04

PREVIEW

Smart Animate Basics4:00

PREVIEW

Exercise: Parallax5:51

BEGIN

Exercise: New Message13:38

BEGIN

Exercise: Overlay13:28

BEGIN

Check-in: Interactive Components6:14

BEGIN

Exercise: Interactive Buttons9:32

BEGIN

Unlimited Updates

BEGIN

Project: Photo Inspiration Application

10 lectures

Resources For This Section

BEGIN

What We Are Going to Learn2:22

BEGIN

Prototype: Category Transitions13:04

BEGIN

Interactive Components: Icons9:20

BEGIN

Prototype: Simple Microinteractions3:06

BEGIN

Prototype: Screen Transitions6:43

BEGIN

Prototype: Simple Horizontal Scroll2:01

BEGIN

Prototype: Hijacked Horizontal Scroll5:12

BEGIN

Assignment: Photo Inspiration Mobile App1:46

BEGIN

Course Check-In

BEGIN

Motion Design Principles

13 lectures

Easing1:37

BEGIN

Offset and Delay0:59

BEGIN

Parenting1:02

BEGIN

Transformation1:06

BEGIN

Value Change1:00

BEGIN

Masking1:11

BEGIN

Overlay1:33

BEGIN

Cloning0:52

BEGIN

Obscuration0:58

BEGIN

Parallax2:06

BEGIN

Dimensionality1:49

BEGIN

Dolly and Zoom1:25

BEGIN

Implement a New Life System

BEGIN

Motion Designs Patterns in Figma

26 lectures

Resources For This Section

BEGIN

What We Are Going to Learn2:06

BEGIN

Navigation: Building the Navigation2:26

BEGIN

Navigation: Prototyping with Simple Variants7:38

BEGIN

Navigation: Home Interactive Components6:44

BEGIN

Navigation: Heart Interactive Components4:08

BEGIN

Navigation: Cart Interactive Components5:20

BEGIN

Navigation: Settings Interactive Components2:33

BEGIN

Navigation: Animations with Your Navigation Component7:19

BEGIN

Scrolling: Landing Page Design2:24

BEGIN

Scrolling: Anchor Links4:31

BEGIN

Scrolling: Short Parallax4:01

BEGIN

Scrolling: Extended Parallax2:22

BEGIN

Pagination: Carousel Dots6:54

BEGIN

Pagination: Pagination Control11:20

BEGIN

Dragging: Listing Card4:21

BEGIN

Dragging: App Scrolling12:02

BEGIN

Dragging: Drag and Drop3:26

BEGIN

Microinteractions: Simple File Uploader6:04

BEGIN

Microinteractions: Uploader Success1:34

BEGIN

Microinteractions: Cancel Upload3:37

BEGIN

Microinteractions: Normal Like Button5:29

BEGIN

Microinteractions: Like Button Bounce6:29

BEGIN

Delight: Confetti8:21

BEGIN

Delight: Checklist6:53

BEGIN

Delight: Add to Cart5:41

BEGIN

The Motion Design Process

6 lectures

Step 1: Discovery and Research3:58

BEGIN

Step 2: Design and Storyboard2:52

BEGIN

Step 3: Prototype1:50

BEGIN

Step 4: Testing3:02

BEGIN

Check in: Quick Tips!3:40

BEGIN

Recap: What Did We Learn?1:19

BEGIN

Project: National Geographic Carousel

7 lectures

Resources For This Section

BEGIN

What We Are Going to Learn1:25

BEGIN

Interactive Component: Carousel Section7:08

BEGIN

Prototype: Simple Carousel Transition4:58

BEGIN

Prototype: Complex Parallax and 3D Image Effect12:20

BEGIN

Assignment: Create a Full Page Carousel1:28

BEGIN

Exercise: Imposter Syndrome2:55

BEGIN

Project: Smart Home App

9 lectures

Resources For This Section

BEGIN

What We Are Going to Learn2:19

BEGIN

Interactive Component: Toggle Card5:49

BEGIN

Interactive Component: Temperature Slider4:46

BEGIN

Prototype: Toggle Cards2:12

BEGIN

Prototype: Simple Temperature Control4:10

BEGIN

Prototype: Colour Temperature Control4:09

BEGIN

Prototype: Navigation Transition3:11

BEGIN

Assignment: Create Complex Interactive Components1:15

BEGIN

Feedback

3 lectures

Feedback Drives Better Design2:58

BEGIN

Constructive Feedback4:02

BEGIN

Recap: What Did We Learn?1:33

BEGIN

Project: Home Renovation Landing Page

11 lectures

Resources For This Section

BEGIN

What We Are going to Learn3:22

BEGIN

Interactive Component: Website Buttons6:42

BEGIN

Interactive Component: General Room Card3:33

BEGIN

Interactive Component: Navigation and Links5:59

BEGIN

Prototype: Landing Page Parallax Intro2:42

BEGIN

Prototype: Full Image Parallax2:05

BEGIN

Prototype: Testimonial Carousel3:15

BEGIN

Prototype: Staggered Cards4:51

BEGIN

Prototype: Gallery Image Automated Scroll3:39

BEGIN

Assignment: Prototype Parallax Effects0:58

BEGIN

Project: Home Renovation Estimation Form

17 lectures

Resources For This Section

BEGIN

What We Are Going to Learn2:30

BEGIN

Interactive Component: Form Buttons3:55

BEGIN

Interactive Component: Progress Bar3:37

BEGIN

Interactive Component: Arrow Icon Buttons5:47

BEGIN

Interactive Component: General Input5:51

BEGIN

Interactive Component: Select Input and Dropdown7:28

BEGIN

Interactive Component: Icon Toggle Card4:08

BEGIN

Interactive Component: Checkbox Item6:30

BEGIN

Interactive Component: Kitchen Card and Carousel Dots2:49

BEGIN

Interactive Component: Kitchen Carousel8:29

BEGIN

Prototype: Form Layout3:02

BEGIN

Prototype: Form Introduction1:50

BEGIN

Prototype: General Input and Dropdown Overlay5:36

BEGIN

Prototype: Toggle Cards and Checkbox4:09

BEGIN

Prototype: Carousel4:42

BEGIN

Assignment: Create Interactive Form Components1:01

BEGIN

Project: Food Delivery App

18 lectures

Resources For This Section

BEGIN

What We Are Going to Learn2:15

BEGIN

Interactive Components: Buttons3:33

BEGIN

Interactive Components: Icon Buttons3:34

BEGIN

Interactive Components: Category Card4:33

BEGIN

Interactive Components: Tab Navigation4:56

BEGIN

Interactive Components: Item Card6:00

BEGIN

Interactive Components: Promo Card6:54

BEGIN

Interactive Components: Cart Floating Action Button5:29

BEGIN

Interactive Components: Item Overlay5:03

BEGIN

Interactive Components: Order Progression Status Icons8:05

BEGIN

Interactive Components: Order Progression Overlay4:21

BEGIN

Prototype: Automatic Parallax Carousel2:51

BEGIN

Prototype: Tab List Transition3:33

BEGIN

Prototype: Masking and Overlay3:26

BEGIN

Assignment: Create and Design a Full Food Delivery App1:12

BEGIN

Prototype: Cart Overlay4:00

BEGIN

Prototype: Order Progress5:05

BEGIN

Showcasing Your Work

6 lectures

Figma Resources For This Section

BEGIN

What We Are Going to Learn0:36

BEGIN

What is Kap?1:25

BEGIN

Using Kap2:23

BEGIN

What is Screencastify?1:05

BEGIN

Using Screencastify2:56

BEGIN

Where To Go From Here?

6 lectures

Thank You!1:17

BEGIN

Review This Course!

BEGIN

Become An Alumni

BEGIN

Learning Guideline

BEGIN

ZTM Events Every Month

BEGIN

LinkedIn Endorsements

BEGIN

Meet your instructor

Your instructor (Daniel) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Daniel Schifano

Hi, I'm Daniel Schifano!

Daniel was most recently the Head of Product Design at Up & Up and is the Design Instructor here at Zero To Mastery. He has over 10 years of experience across many design disciplines (UX, UI, visual design, user research, product strategy and more).

SEE MY BIO & COURSES

Daniel Schifano

Head of Product Design

Frequently asked questions

Are there any prerequisites for this course?

  • A computer (Windows, Mac, or Linux) with an internet connection. That's it!
  • No prior knowledge is required. You will learn everything from scratch
  • A willingness and enthusiasm to learn and take action
  • Not required but if you want to learn more than just motion design with Figma and want a step-by-step guide to go from complete beginner to getting hired as a designer making $100K+ a year, take our Web & Mobile Designer Career Path (which includes this course)

Who is this course for?

  • Anyone interested in learning Motion Design and learning about the power of Figma and what you can create with this amazing tool
  • Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer and stand out from other candidates
  • Anyone who wants to become a Full-time or Freelance Motion Designer
  • Freelance Designers who want to be able to charge more money and create a more impressive portfolio that helps you get more clients
  • Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
  • Anyone who wants to learn about the latest Motion Design practices to build modern and beautiful applications
  • Students who are frustrated with their current progress with other motion design tutorials out there that don't go beyond the basics and don't give you real-world practice or skills you need to actually get hired

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

How long will it take for me to learn enough to become a Motion Designer?

Ultimately you’re the only can that can control that.

This course will teach you the fundamentals needed to become a Motion Designer. And by completing and customizing the projects in the course, you should be able to get your own clients and charge more than an average designer.

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.