Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

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

via Zero To Mastery

Go to class Write review

Overview

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.
  • 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

Syllabus

  •   Introduction
    • Motion Design with Figma: Zero to Mastery
    • Exercise: Meet Your Classmates and Instructor
    • Design Resources
    • Understanding Your Video Player (notes, video speed, subtitles + more)
    • Set Your Learning Streak Goal
    • What We Are Going to Learn
  •   Motion in UX Design
    • Misconceptions of Motion Design
    • Motion Supports Usability
    • Narrative and Mental Models
    • What is a Microinteraction?
    • The Structure of a Microinteraction
    • Not Every Element is a Microinteraction!
    • How Microinteractions Impact User Experiences
    • Recap: What Did We Learn?
    • Where To Next? Your Choice...
  •   The Basics of Figma
    • Resources For This Section
    • Intro to Figma: Education Plans and Signup
    • Intro to Figma: Introduction
    • Intro to Figma: Where to use Figma
    • Figma UI: File Browser
    • Figma UI: Files
    • Figma UI: Toolbar
    • Figma UI: Left Sidebar
    • Figma UI: Right Sidebar
    • Shapes and Tools: Working with Containers
    • Shapes and Tools: Basic Shapes and Boolean Operations
    • Designing in Figma: Images
    • Designing in Figma: Getting Started with Text
    • Designing in Figma: Constraints
    • Designing in Figma: Using Auto Layout
    • Resources and Collaboration: Community Files
    • Resources and Collaboration: Community Plugins
    • Resources and Collaboration: Sharing and Comments
    • What We Are Going to Learn
    • Exercise: Create a Quick Logo Using Shapes
    • Exercise: Autolayout Buttons
    • Exercise: Responsive Navigation
    • Exercise: Responsive Text
    • Exercise: Imagery and Gradients
    • Exercise: Layout and Responsiveness
    • Assignment: Create Complex Interactive Components
    • Let's Have Some Fun (+ Free Resources)
  •   Introduction to Smart Animate
    • Resources For This Section
    • What We Are Going to Learn
    • Smart Animate Properties
    • Smart Animate Basics
    • Exercise: Parallax
    • Exercise: New Message
    • Exercise: Overlay
    • Check-in: Interactive Components
    • Exercise: Interactive Buttons
    • Unlimited Updates
  •   Project: Photo Inspiration Application
    • Resources For This Section
    • What We Are Going to Learn
    • Prototype: Category Transitions
    • Interactive Components: Icons
    • Prototype: Simple Microinteractions
    • Prototype: Screen Transitions
    • Prototype: Simple Horizontal Scroll
    • Prototype: Hijacked Horizontal Scroll
    • Assignment: Photo Inspiration Mobile App
    • Course Check-In
  •   Motion Design Principles
    • Easing
    • Offset and Delay
    • Parenting
    • Transformation
    • Value Change
    • Masking
    • Overlay
    • Cloning
    • Obscuration
    • Parallax
    • Dimensionality
    • Dolly and Zoom
    • Implement a New Life System
  •   Motion Designs Patterns in Figma
    • Resources For This Section
    • What We Are Going to Learn
    • Navigation: Building the Navigation
    • Navigation: Prototyping with Simple Variants
    • Navigation: Home Interactive Components
    • Navigation: Heart Interactive Components
    • Navigation: Cart Interactive Components
    • Navigation: Settings Interactive Components
    • Navigation: Animations with Your Navigation Component
    • Scrolling: Landing Page Design
    • Scrolling: Anchor Links
    • Scrolling: Short Parallax
    • Scrolling: Extended Parallax
    • Pagination: Carousel Dots
    • Pagination: Pagination Control
    • Dragging: Listing Card
    • Dragging: App Scrolling
    • Dragging: Drag and Drop
    • Microinteractions: Simple File Uploader
    • Microinteractions: Uploader Success
    • Microinteractions: Cancel Upload
    • Microinteractions: Normal Like Button
    • Microinteractions: Like Button Bounce
    • Delight: Confetti
    • Delight: Checklist
    • Delight: Add to Cart
  •   The Motion Design Process
    • Step 1: Discovery and Research
    • Step 2: Design and Storyboard
    • Step 3: Prototype
    • Step 4: Testing
    • Check in: Quick Tips!
    • Recap: What Did We Learn?
  •   Project: National Geographic Carousel
    • Resources For This Section
    • What We Are Going to Learn
    • Interactive Component: Carousel Section
    • Prototype: Simple Carousel Transition
    • Prototype: Complex Parallax and 3D Image Effect
    • Assignment: Create a Full Page Carousel
    • Exercise: Imposter Syndrome
  •   Project: Smart Home App
    • Resources For This Section
    • What We Are Going to Learn
    • Interactive Component: Toggle Card
    • Interactive Component: Temperature Slider
    • Prototype: Toggle Cards
    • Prototype: Simple Temperature Control
    • Prototype: Colour Temperature Control
    • Prototype: Navigation Transition
    • Assignment: Create Complex Interactive Components
  •   Feedback
    • Feedback Drives Better Design
    • Constructive Feedback
    • Recap: What Did We Learn?
  •   Project: Home Renovation Landing Page
    • Resources For This Section
    • What We Are going to Learn
    • Interactive Component: Website Buttons
    • Interactive Component: General Room Card
    • Interactive Component: Navigation and Links
    • Prototype: Landing Page Parallax Intro
    • Prototype: Full Image Parallax
    • Prototype: Testimonial Carousel
    • Prototype: Staggered Cards
    • Prototype: Gallery Image Automated Scroll
    • Assignment: Prototype Parallax Effects
  •   Project: Home Renovation Estimation Form
    • Resources For This Section
    • What We Are Going to Learn
    • Interactive Component: Form Buttons
    • Interactive Component: Progress Bar
    • Interactive Component: Arrow Icon Buttons
    • Interactive Component: General Input
    • Interactive Component: Select Input and Dropdown
    • Interactive Component: Icon Toggle Card
    • Interactive Component: Checkbox Item
    • Interactive Component: Kitchen Card and Carousel Dots
    • Interactive Component: Kitchen Carousel
    • Prototype: Form Layout
    • Prototype: Form Introduction
    • Prototype: General Input and Dropdown Overlay
    • Prototype: Toggle Cards and Checkbox
    • Prototype: Carousel
    • Assignment: Create Interactive Form Components
  •   Project: Food Delivery App
    • Resources For This Section
    • What We Are Going to Learn
    • Interactive Components: Buttons
    • Interactive Components: Icon Buttons
    • Interactive Components: Category Card
    • Interactive Components: Tab Navigation
    • Interactive Components: Item Card
    • Interactive Components: Promo Card
    • Interactive Components: Cart Floating Action Button
    • Interactive Components: Item Overlay
    • Interactive Components: Order Progression Status Icons
    • Interactive Components: Order Progression Overlay
    • Prototype: Automatic Parallax Carousel
    • Prototype: Tab List Transition
    • Prototype: Masking and Overlay
    • Assignment: Create and Design a Full Food Delivery App
    • Prototype: Cart Overlay
    • Prototype: Order Progress
  •   Showcasing Your Work
    • Figma Resources For This Section
    • What We Are Going to Learn
    • What is Kap?
    • Using Kap
    • What is Screencastify?
    • Using Screencastify
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • ZTM Events Every Month
    • LinkedIn Endorsements

Taught by

Daniel Schifano

Reviews

Start your review of Motion Design with Figma: Animations, Motion Graphics, UX/UI

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.