English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 176 lectures (10h 17m) | 5.58 GB
Figma like a Pro! Learn Motion Design on Mobile and Web using modern practices that top designers use + build projects!
Just launched with all modern Motion Design principles and best practices for 2023! This is a project based course where we are going to learn by building many design projects to add to your portfolio together! Join a live online community of over 900,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.
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.
We will 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! We guarantee you this is the most comprehensive online resource on Motion Design, Microinteractions, Animations and creating beautiful UX/UI!
What you’ll learn
- Use Figma like a pro and get a job in User Interface Design, User Experience Design (UX/UI), Web Design or Mobile App Design
- Learn to build Motion Design Prototypes with Figma and add Animations and Motion Graphics to your projects
- Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
- Build these projects: Photo Inspiration App, Nat Geo Carousel, Smart Home Mobile App, Home Reno Web Landing Page and Form + more!
- Learn to use Smart Animate in Figma
- Learn UI/UX best practices using the latest trends in the industry
- Learn the principles of Motion Design, the motion design process, best practices, and prototyping your projects for your customers and clients
Table of Contents
Introduction
1 Join Our Online Classroom
2 Exercise Meet Your Classmates and Instructor
3 What We Are Going to Learn
4 Design Resources
Motion in UX Design
5 Misconceptions of Motion Design
6 Motion Supports Usability
7 Narrative and Mental Models
8 What is a Microinteraction
9 The Structure of a Microinteraction
10 Not Every Element is a Microinteraction!
11 How Microinteractions Impact User Experiences
12 Recap – What Did We Learn
13 Where To Next Your Choice
The Basics of Figma
14 Resources For This Section
15 Intro to Figma Education Plans and Signup
16 Intro to Figma Introduction
17 Intro to Figma Where to use Figma
18 Figma UI File Browser
19 Figma UI Files
20 Figma UI Toolbar
21 Figma UI Left Sidebar
22 Figma UI Right Sidebar
23 Shapes and Tools Working with Containers
24 Shapes and Tools Basic Shapes and Boolean Operations
25 Designing in Figma Images
26 Designing in Figma Getting Started with Text
27 Designing in Figma Constraints
28 Designing in Figma Using Auto Layout
29 Resources and Collaboration Community Files
30 Resources and Collaboration Community Plugins
31 Resources and Collaboration Sharing and Comments
32 What We Are Going to Learn
33 Exercise Create a Quick Logo Using Shapes
34 Exercise Autolayout Buttons
35 Exercise Responsive Navigation
36 Exercise Responsive Text
37 Exercise Imagery and Gradients
38 Exercise Layout and Responsiveness
39 Assignment Create Complex Interactive Components
Introduction to Smart Animate
40 Resources For This Section
41 What We Are Going to Learn
42 Smart Animate Properties
43 Smart Animate Basics
44 Exercise Parallax
45 Exercise New Message
46 Exercise Overlay
47 Check-in Interactive Components
48 Exercise Interactive Buttons
Project Photo Inspiration Application
49 Resources For This Section
50 What We Are Going to Learn
51 Prototype Category Transitions
52 Interactive Components Icons
53 Prototype Simple Microinteractions
54 Prototype Screen Transitions
55 Prototype Simple Horizontal Scroll
56 Prototype Hijacked Horizontal Scroll
57 Assignment Photo Inspiration Mobile App
Motion Design Principles
58 Easing
59 Offset and Delay
60 Parenting
61 Transformation
62 Value Change
63 Masking
64 Overlay
65 Cloning
66 Obscuration
67 Parallax
68 Dimensionality
69 Dolly and Zoom
Motion Designs Patterns in Figma
70 Resources For This Section
71 What We Are Going to Learn
72 Navigation Building the Navigation
73 Navigation Prototyping with Simple Variants
74 Navigation Home Interactive Components
75 Navigation Heart Interactive Components
76 Navigation Cart Interactive Components
77 Navigation Settings Interactive Components
78 Navigation Animations with Your Navigation Component
79 Scrolling Landing Page Design
80 Scrolling Anchor Links
81 Scrolling Short Parallax
82 Scrolling Extended Parallax
83 Pagination Carousel Dots
84 Pagination Pagination Control
85 Dragging Listing Card
86 Dragging App Scrolling
87 Dragging Drag and Drop
88 Microinteractions Simple File Uploader
89 Microinteractions Uploader Success
90 Microinteractions Cancel Upload
91 Microinteractions Normal Like Button
92 Microinteractions Like Button Bounce
93 Delight Confetti
94 Delight Checklist
95 Delight Add to Cart
The Motion Design Process
96 Step 1 Discovery and Research
97 Step 2 Design and Storyboard
98 Step 3 Prototype
99 Step 4 Testing
100 Check in Quick Tips!
101 Recap What Did We Learn
Project National Geographic Carousel
102 Resources For This Section
103 What We Are Going to Learn
104 Interactive Component Carousel Section
105 Prototype Simple Carousel Transition
106 Prototype Complex Parallax and 3D Image Effect
107 Assignment Create a Full Page Carousel
Project Smart Home App
108 Resources For This Section
109 What We Are Going to Learn
110 Interactive Component Toggle Card
111 Interactive Component Temperature Slider
112 Prototype Toggle Cards
113 Prototype Simple Temperature Control
114 Prototype Colour Temperature Control
115 Prototype Navigation Transition
116 Assignment Create Complex Interactive Components
Feedback
117 Feedback Drives Better Design
118 Constructive Feedback
119 Recap What Did We Learn
Project Home Renovation Landing Page
120 Resources For This Section
121 What We Are going to Learn
122 Interactive Component Website Buttons
123 Interactive Component General Room Card
124 Interactive Component Navigation and Links
125 Prototype Landing Page Parallax Intro
126 Prototype Full Image Parallax
127 Prototype Testimonial Carousel
128 Prototype Staggered Cards
129 Prototype Gallery Image Automated Scroll
130 Assignment Prototype Parallax Effects
Project Home Renovation Estimation Form
131 Resources For This Section
132 What We Are Going to Learn
133 Interactive Component Form Buttons
134 Interactive Component Progress Bar
135 Interactive Component Arrow Icon Buttons
136 Interactive Component General Input
137 Interactive Component Select Input and Dropdown
138 Interactive Component Icon Toggle Card
139 Interactive Component Checkbox Item
140 Interactive Component Kitchen Card and Carousel Dots
141 Interactive Component Kitchen Carousel
142 Prototype Form Layout
143 Prototype Form Introduction
144 Prototype General Input and Dropdown Overlay
145 Prototype Toggle Cards and Checkbox
146 Prototype Carousel
147 Assignment Create Interactive Form Components
Project Food Delivery App
148 Resources For This Section
149 What We Are Going to Learn
150 Interactive Components Buttons
151 Interactive Components Icon Buttons
152 Interactive Components Category Card
153 Interactive Components Tab Navigation
154 Interactive Components Item Card
155 Interactive Components Promo Card
156 Interactive Components Cart Floating Action Button
157 Interactive Components Item Overlay
158 Interactive Components Order Progression Status Icons
159 Interactive Components Order Progression Overlay
160 Prototype Automatic Parallax Carousel
161 Prototype Tab List Transition
162 Prototype Masking and Overlay
163 Prototype Cart Overlay
164 Prototype Order Progress
165 Assignment Create and Design a Full Food Delivery App
Showcasing Your Work
166 Figma Resources For This Section
167 What We Are Going to Learn
168 What is Kap
169 Using Kap
170 What is Screencastify
171 Using Screencastify
Where To Go From Here
172 Thank You!
173 Become An Alumni
174 Learning Guideline
175 LinkedIn Endorsements
BONUS SECTION
176 Special Bonus Lecture
Resolve the captcha to access the links!