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

Using the latest best practices in Motion Design, as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently teaching you all about building Interactions, Animations and Motion Graphic for all your future Web and Mobile App projects. We will be using Figma to accomplish this, which is now the #1 tool used by modern designers, and is replacing all outdated design tools of the past.

Who this course is for:

• Anyone interested in Motion Design and wants to learn more about the power of Figma and what you can create with this amazing tool
• Anyone who wants to start a Web or Mobile Design business on the side as a freelancer, or work as a designer at a company
• Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
• Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
• Anyone who wants to learn about the latest Motion Design practices to build modern and beautiful applications

The topics covered in the course are:

1. Why Is Motion Important? – Learn how motion plays a major role in building usable products and how it helps create narrative and reinforces mental models.

   1. Common Misconceptions Of Motion Design

   2. Motion Helps Create Usability

   3. Narrative And Mental Models

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

   1. Getting Started With Figma

   2. Introducing Figma

   3. Figma Dashboard

   4. Figma Tools

   5. Layers And Pages

   6. The Top Bar

   7. Design Properties

   8. Prototyping With Figma

   9. Exercise: Creating a Responsive Layout

3. Introduction To 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.

   1. Scale

   2. Position

   3. Opacity

   4. Rotation

   5. Fill

   6. Exercise: Creating A Simple Interaction

   7. Exercise: Animating Navigation Items

   8. Exercise: Creating A Larger Prototype

4. Project: Photo Inspiration Application –  We’ll start the course with a bang! You’ll jump into your first project where you can take the resources given and what you learnt previously to link together your own prototype of a photo inspiration mobile application.

   1. Design Assets

   2. Filtering Through Categories

   3. Screen Transitions And Drag Interactions

   4. Simple Microinteractions

5. Motion Design Principles –  You will also learn the principles of motion design and what makes them integral to the success of any design.

   1. Intro

   2. Easing

   3. Offset And Delay

   4. Parenting

   5. Transformation

   6. Value Change

   7. Masking

   8. Overlay

   9. Cloning

   10. Obscuration

   11. Parallax

   12. Dimensionality

   13. Dolly And Zoom

6. Creating Motion In Figma – Take the theory and the practical knowledge that you learnt and jump right back into Figma to build some smaller prototypes. Using the design resources given, you can follow along or watch how Daniel explains how to create various interactions.

   1. Exercise: Navigation Transitions (Navigation Design)

   2. Exercise: Navigation Transitions (Heart)

   3. Exercise: Navigation Transitions (Cart)

   4. Exercise: Navigation Transitions (Home)

   5. Exercise: Scrolling (Landing Page)

   6. Exercise: Scrolling (Anchor Links)

   7. Exercise: Scrolling (Parallax)

   8. Exercise: Paging (Simple Carousel Dots)

   9. Exercise: Paging (Carousel Animations)

   10. Exercise: Dragging (Listing Card)

   11. Exercise: Dragging (Image Drag)

   12. Exercise: Dragging (Dragging Through Content)

   13. Exercise: Dragging (Drag And Drop)

   14. Exercise: Microinteractions (File Uploader Part 1)

   15. Exercise: Microinteractions (File Uploader Part 2)

   16. Exercise: Microinteractions (Pause And Play)

   17. Exercise: Microinteractions (Like Button)

   18. Exercise: Microinteractions (Like Animation)

   19. Exercise: Delight (Success Modal)

   20. Exercise: Delight (Confetti Pop)

   21. Exercise: Delight (Checklist Part 1)

   22. Exercise: Delight (Check List Part 2)

   23. Exercise: Delight (Cart Button Part 1)

   24. Exercise: Delight (Cart Button Part 2)

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.

   1. Discovery And Research Part 1

   2. Discovery And Research Part 2

   3. Design And Storyboard

   4. Prototype

   5. Testing

   6. Helpful Tips

8. Project: National Geographic Carousel –  Learn how to create, both, simple and complex versions of a carousel effect in Figma.

   1. SimpleLanding Page Carousel

   2. Complex Parallax And 3D Image Effect

9. Microinteractions – 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.

   1. What Is A Micro-interaction?

   2. Why Microinteractions Are Important

   3. Figmotion: Part 1

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

    1. Designing A Mobile Home Screen

    2. Create A Toggle Interaction

    3. Temperature Adjustment Interactions

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

    1. Why Is Feedback Important?

    2. Constructive Feedback

12. Project: Home Renovation Landing Page – Ever wanted to design a large landing page with animated elements? Don’t worry, follow along with Daniel as he takes you through the process of breaking down a landing page into multiple prototypes.

    1. Designing A Landing Page

    2. Prototyping A Landing Page

    3. Parallax Effects: Part 1

    4. Carousel

    5. Parallax Effects: Part 2

    6. Gallery

13. Project: Home Renovation 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.

    1. Motion In Form Elements

    2. Form Progress

    3. Animating Form Content

    4. Inputs And Buttons: Part 1

    5. Inputs And Buttons: Part 2

    6. Inputs And Buttons: Part 3

    7. Inputs And Buttons: Part 4

    8. Tooltips

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

    1. Introduction

    2. Using Parallax To Draw Attention

    3. List Transitions

    4. Alternative Overlays

    5. Masking And Overlay

    6. Microinteractions And Floating Action Buttons

    7. Order Progress: Part 1

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

    1. Kap For Mac

    2. How To Use Kap

    3. Using Your Kap GIF In Figma

    4. Screenity For Chrome And Windows

    5. How To Use Screenity

    6. Using Your Screenity GIF In Figma

Go To Course