English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 12h 36m | 3.59 GB
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.
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
Table of Contents
1 Motion Design with Figma: Zero to Mastery
2 Common Misconceptions Of Motion Design
3 Motion Helps Create Usability
4 Narrative And Mental Models
5 Where To Next? Your Choice…
6 Introducing Figma
7 Figma Dashboard
8 Figma Tools
9 Layers And Pages
10 The Top Bar
11 Design Properties
12 Prototyping With Figma
13 Exercise: Creating A Responsive Layout
14 Scale
15 Position
16 Opacity
17 Rotation
18 Fill
19 Exercise: Creating A Simple Interaction
20 Exercise: Animating The Navigation
21 Exercise: Creating A Larger Prototype
22 Design Assets
23 Filtering Through Categories
24 Screen Transitions And Drag Interactions
25 Simple Microinteractions
26 Introduction
27 Easing
28 Offset And Delay
29 Parenting
30 Transformation
31 Value Change
32 Masking
33 Overlay
34 Cloning
35 Obscuration
36 Parallax
37 Dimensionality
38 Dolly And Zoom
39 Exercise: Navigation Transitions (Navigation Design)
40 Exercise: Navigation Transitions (Heart)
41 Exercise: Navigation Transitions (Cart)
42 Exercise: Navigation Transitions (Home)
43 Exercise: Scrolling (Landing Page)
44 Exercise: Scrolling (Anchor Links)
45 Exercise: Scrolling (Parallax)
46 Exercise: Paging (Simple Carousel Dots)
47 Exercise: Paging (Carousel Animations)
48 Exercise: Dragging (Listing Card)
49 Exercise: Dragging (Image Drag)
50 Exercise: Dragging (Dragging Through Content)
51 Exercise: Dragging (Drag and Drop)
52 Exercise: Microinteractions (File Uploader)
53 Exercise: Microinteractions (File Uploader Part 2)
54 Exercise: Microinteractions (Pause and Play)
55 Exercise: Microinteractions (Like Button)
56 Exercise: Microinteractions (Like Interaction)
57 Exercise: Delight (Success Modal)
58 Exercise: Delight (Confetti Pop)
59 Exercise: Delight (Checklist)
60 Exercise: Delight (Checklist Part 2)
61 Exercise: Delight (Cart Button Part 1)
62 Exercise: Delight (Cart Button Part 2)
63 Discovery And Research Part 1
64 Discovery And Research Part 2
65 Design And Storyboard
66 Prototype
67 Testing
68 Helpful Tips
69 Simple Landing Page Carousel
70 Complex Parallax And 3D Image Effect
71 What Is A Microinteraction?
72 Why Microinteractions Are Important
73 Figmotion: Part 1
74 Figmotion: Part 2
75 Design A Mobile Home Screen
76 Create A Toggle Interaction
77 Temperature Adjustment Interactions
78 Why Is Feedback Important?
79 Constructive Feedback
80 Design A Landing Page
81 Prototyping A Landing Page
82 Parallax Effects: Part 1
83 Carousel
84 Parallax Effects: Part 2
85 Gallery
86 Motion In Form Elements
87 Form Progress
88 Animating Form Content
89 Inputs And Buttons: Part 1
90 Inputs And Buttons: Part 2
91 Inputs And Buttons: Part 3
92 Inputs And Buttons: Part 4
93 Tooltips
94 Carousel Input
95 Introduction
96 Using Parallax To Draw Attention
97 List Transitions
98 Alternative Overlays
99 Masking And Overlay
100 Microinteractions and Floating Action Buttons
101 Order Progress: Part 1
102 Order Progress: Part 2
103 Kap For Mac
104 How To Use Kap
105 Using Your Kap Gif In Figma
106 Screenity For Chrome And Windows
107 How To Use Screenity
108 Using Your Screenity GIF in Figma
Resolve the captcha to access the links!