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

Join our motion design course to acquire the expertise that will set you apart from other designers, boost your recognition as an elite creator, and enable you to charge premium rates for your skills.

We’re not suggesting you compete for $5/hour offers designing logos on various freelance platforms.

After you complete this course, you can command at least 10-20 times that rate.

You’ll be learning motion design in a vibrant community.

By signing up today, you’ll gain access to our exclusive live online community classroom, where you'll collaborate with thousands of fellow students, alumni, mentors, TAs, and instructors.

You will learn from Daniel, a seasoned design professional with hands-on experience as a lead product designer for top global companies.

This course will arm you with the latest methodologies in motion design, user interface (UI), and user experience (UX), emphasizing practical skills to create stunning interactions, animations, and motion graphics for your web and mobile app endeavors.

We’ll be utilizing Figma and Figma Smart Animate, the top tools preferred by modern designers, as they replace outdated options like Adobe After Effects.

Additionally, you'll receive all Figma files, premium design templates, and resources from this course to use for your future client projects!

Here’s what you’ll learn to transform into a Motion Design Expert

This curriculum is hands-on. Daniel will guide you step-by-step from zero to hero in motion design, enabling you to create your own dazzling, professional projects.

1. Getting Started with Figma - Discover the essential components of Figma and what you need to begin your journey. We’ll cover every detail to eliminate any confusion.

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

2. Figma Smart Animate Basics - Figma's Smart Animate is revolutionary. You’ll learn to adjust its various properties and apply that understanding to create simple prototypes.

• Scale
• Position
• Opacity
• Rotation
• Fill
• Exercise: Creating Interactive Elements
• Exercise: Navigating Animation
• Exercise: Developing a Larger Prototype

3. Create a Photo Inspiration App - You'll embark on your first project by utilizing the provided resources and learned concepts to develop your prototype of a photo inspiration mobile app.

• Designing Assets
• Category Filtering
• Screen Transitions + Drag Interactivity
• Simple Micro-interactions

4. Importance of Motion - Learn how motion significantly enhances product usability, narrates stories, and supports mental models.

• Common Misunderstandings of Motion Design
• The Role of Motion in Usability
• Narrative & Mental Models

5. Principles of Motion Design - This section covers the foundational principles of motion design and their critical importance in achieving design success.

• Introduction to Motion Design Principles
• Easing Techniques
• Offset & Delay
• Parenting Elements
• Transformation Techniques
• Value Changes
• Masking Techniques
• Overlay Effects
• Cloning Methods
• Obscuration Techniques
• Parallax Effects
• Dimensional Techniques
• Dolly & Zoom Effects

6. Motion Creation in Figma - Combine theory with practice as you dive back into Figma to design smaller prototypes. Daniel will guide you through each step.

• Exercise: Smooth Navigation Transitions
• Exercise: Scrolling Effects
• Exercise: Paging Mechanics
• Exercise: Drag Actions
• Exercise: Micro-interaction Creation
• Exercise: Delightful Effects

7. Motion Design Workflow - Learn how to incorporate motion design into the typical design process. Daniel will outline his approach for identifying optimal motion strategies for user requirements.

• Discovery & Research Part 1
• Discovery & Research Part 2
• Design Fundamentals & Storyboarding
• Prototyping Techniques
• Testing Protocols
• Handy Tips

8. Project: National Geographic Carousel - Explore how to create both simple and complex carousel effects in Figma.

• Quick & Easy Landing Page Carousel
• Building a Complex Parallax and 3D Image Effect

9. The Art of Micro-interactions - Delve into the significance of micro-interactions. Create your own animation in Figma with Daniel using the Figmotion plugin.

• Understanding Micro-interactions
• The Importance of Micro-interactions
• Figmotion: Part 1
• Figmotion: Part 2

10. Project: Smart Home Mobile App - As smart home technology grows in popularity, learn to design a basic home screen and animate it with Figma. Follow Daniel as he illustrates a complex temperature adjustment interaction.

• Designing the Home Screen
• Creating Toggle Interactions
• Temperature Adjustment Techniques

11. Effective Feedback - Understand the best strategies for providing and receiving constructive feedback on your designs.

• The Importance of Design Feedback
• Offering Constructive Design Feedback

12. Project: Home Renovation Landing Page - Have you wanted to design an engaging landing page with animated elements? Here’s your opportunity. Join Daniel as he walks you through deconstructing a landing page into multiple prototypes.

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

13. Project: Home Renovation Form - Forms are often overlooked, but applying motion can greatly assist users with essential tasks. Daniel will show you how to incorporate subtle animations into form interactions for greater usability.

• Incorporating Motion in Form Elements
• Form Progress Dynamics
• Animating Form Content
• Inputs & Buttons: Part 1
• Inputs & Buttons: Part 2
• Inputs & Buttons: Part 3
• Inputs & Buttons: Part 4
• Enhancing with Tooltips
• Carousel Inputs

14. Project: Food Delivery Mobile App - Master how to craft eye-catching interactions using masking techniques, followed by creating a complex order progress prototype as Daniel leads you through.

• Introduction to the Project
• Using Parallax for Attention
• Transitions in Lists
• Alternative Overlay Techniques
• Masking and Overlay Techniques
• Micro-interactions and Floating Action Buttons
• Order Progress: Part 1
• Order Progress: Part 2

15. Showcasing Your Work - You’ve developed various prototypes, but how do you present them in your portfolio? We'll explore several recording options for both Mac and Windows to showcase your prototypes in your preferred format.

• Using Kap for Mac
• Kap Usage Guidelines
• Integrating Kap GIFs in Figma
• Screenity for Chrome & Windows
• Screenity Usage Guidelines
• Integrating Screenity GIFs in Figma

What’s the final takeaway?

This course is not just about passively watching tutorial videos.

We will encourage you to transform from a complete novice in motion design to someone considered among the top 10% of Motion Designers 💪.

How can we be so confident?

Thousands of Zero To Mastery graduates have secured jobs at industry leaders like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify, and more.

They are thriving as top freelancers and enjoying remote opportunities across the globe.

Regardless of your age, background, or experience—many of our students began as complete newcomers.

You can be one of them too.

There's nothing to lose; start learning today, and if our course doesn't meet your expectations, you can request a full refund within 30 days. No hassle, no questions asked.