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

Name: Motion Design with Figma: Animations, Motion Graphics, UX/UI
Price: 9 USD
Availability: InStock

10h 11m 31s

English

Paid

June 13, 2024

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

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

Join premium to watch

Go to premium

#	Title	Duration
1	Motion Design with Figma: Zero to Mastery	03:11
2	What We Are Going to Learn	02:26
3	Misconceptions of Motion Design	03:37
4	Motion Supports Usability	03:21
5	Narrative and Mental Models	05:16
6	What is a Microinteraction?	01:34
7	The Structure of a Microinteraction	01:58
8	Not Every Element is a Microinteraction!	02:04
9	How Microinteractions Impact User Experiences	04:33
10	Recap: What Did We Learn?	02:30
11	Where To Next? Your Choice...	01:01
12	Intro to Figma: Education Plans and Signup	01:35
13	Intro to Figma: Introduction	00:57
14	Intro to Figma: Where to use Figma	00:33
15	Figma UI: File Browser	02:21
16	Figma UI: Files	01:32
17	Figma UI: Toolbar	05:32
18	Figma UI: Left Sidebar	04:07
19	Figma UI: Right Sidebar	04:25
20	Shapes and Tools: Working with Containers	04:39
21	Shapes and Tools: Basic Shapes and Boolean Operations	05:42
22	Designing in Figma: Images	02:50
23	Designing in Figma: Getting Started with Text	04:05
24	Designing in Figma: Constraints	02:51
25	Designing in Figma: Using Auto Layout	06:00
26	Resources and Collaboration: Community Files	01:41
27	Resources and Collaboration: Community Plugins	02:43
28	Resources and Collaboration: Sharing and Comments	03:25
29	What We Are Going to Learn	02:36
30	Exercise: Create a Quick Logo Using Shapes	02:16
31	Exercise: Autolayout Buttons	05:38
32	Exercise: Responsive Navigation	03:08
33	Exercise: Responsive Text	04:16
34	Exercise: Imagery and Gradients	03:13
35	Exercise: Layout and Responsiveness	03:16
36	Assignment: Create Complex Interactive Components	01:03
37	What We Are Going to Learn	01:42
38	Smart Animate Properties	04:05
39	Smart Animate Basics	04:01
40	Exercise: Parallax	05:52
41	Exercise: New Message	06:50
42	Exercise: Overlay	06:45
43	Check-in: Interactive Components	06:15
44	Exercise: Interactive Buttons	09:33
45	What We Are Going to Learn	02:23
46	Prototype: Category Transitions	06:33
47	Interactive Components: Icons	09:21
48	Prototype: Simple Microinteractions	03:07
49	Prototype: Screen Transitions	06:44
50	Prototype: Simple Horizontal Scroll	02:02
51	Prototype: Hijacked Horizontal Scroll	05:12
52	Assignment: Photo Inspiration Mobile App	01:47
53	Easing	01:38
54	Offset and Delay	00:59
55	Parenting	01:03
56	Transformation	01:07
57	Value Change	01:01
58	Masking	01:12
59	Overlay	01:34
60	Cloning	00:53
61	Obscuration	00:59
62	Parallax	01:04
63	Dimensionality	01:50
64	Dolly and Zoom	01:26
65	What We Are Going to Learn	02:07
66	Navigation: Building the Navigation	02:27
67	Navigation: Prototyping with Simple Variants	07:39
68	Navigation: Home Interactive Components	06:45
69	Navigation: Heart Interactive Components	04:09
70	Navigation: Cart Interactive Components	05:21
71	Navigation: Settings Interactive Components	02:34
72	Navigation: Animations with Your Navigation Component	07:20
73	Scrolling: Landing Page Design	02:25
74	Scrolling: Anchor Links	04:32
75	Scrolling: Short Parallax	04:02
76	Scrolling: Extended Parallax	02:23
77	Pagination: Carousel Dots	06:55
78	Pagination: Pagination Control	11:21
79	Dragging: Listing Card	04:22
80	Dragging: App Scrolling	06:02
81	Dragging: Drag and Drop	03:27
82	Microinteractions: Simple File Uploader	03:03
83	Microinteractions: Uploader Success	01:35
84	Microinteractions: Cancel Upload	03:38
85	Microinteractions: Normal Like Button	05:30
86	Microinteractions: Like Button Bounce	06:30
87	Delight: Confetti	08:22
88	Delight: Checklist	06:54
89	Delight: Add to Cart	05:42
90	Step 1: Discovery and Research	03:59
91	Step 2: Design and Storyboard	02:53
92	Step 3: Prototype	01:51
93	Step 4: Testing	03:03
94	Check in: Quick Tips!	03:41
95	Recap: What Did We Learn?	01:20
96	What We Are Going to Learn	01:26
97	Interactive Component: Carousel Section	07:09
98	Prototype: Simple Carousel Transition	04:59
99	Prototype: Complex Parallax and 3D Image Effect	12:21
100	Assignment: Create a Full Page Carousel	01:29
101	Exercise: Imposter Syndrome	02:56
102	What We Are Going to Learn	02:20
103	Interactive Component: Toggle Card	05:50
104	Interactive Component: Temperature Slider	04:47
105	Prototype: Toggle Cards	02:13
106	Prototype: Simple Temperature Control	04:11
107	Prototype: Colour Temperature Control	04:10
108	Prototype: Navigation Transition	03:12
109	Assignment: Create Complex Interactive Components	01:16
110	Feedback Drives Better Design	02:59
111	Constructive Feedback	04:03
112	Recap: What Did We Learn?	01:34
113	What We Are going to Learn	03:23
114	Interactive Component: Website Buttons	06:43
115	Interactive Component: General Room Card	03:34
116	Interactive Component: Navigation and Links	06:00
117	Prototype: Landing Page Parallax Intro	02:43
118	Prototype: Full Image Parallax	02:06
119	Prototype: Testimonial Carousel	03:16
120	Prototype: Staggered Cards	04:52
121	Prototype: Gallery Image Automated Scroll	03:40
122	Assignment: Prototype Parallax Effects	00:59
123	What We Are Going to Learn	02:31
124	Interactive Component: Form Buttons	03:56
125	Interactive Component: Progress Bar	03:38
126	Interactive Component: Arrow Icon Buttons	05:48
127	Interactive Component: General Input	05:52
128	Interactive Component: Select Input and Dropdown	07:29
129	Interactive Component: Icon Toggle Card	04:09
130	Interactive Component: Checkbox Item	06:31
131	Interactive Component: Kitchen Card and Carousel Dots	02:50
132	Interactive Component: Kitchen Carousel	08:30
133	Prototype: Form Layout	03:03
134	Prototype: Form Introduction	01:51
135	Prototype: General Input and Dropdown Overlay	05:37
136	Prototype: Toggle Cards and Checkbox	04:10
137	Prototype: Carousel	04:43
138	Assignment: Create Interactive Form Components	01:02
139	What We Are Going to Learn	02:16
140	Interactive Components: Buttons	03:34
141	Interactive Components: Icon Buttons	03:35
142	Interactive Components: Category Card	04:34
143	Interactive Components: Tab Navigation	04:57
144	Interactive Components: Item Card	06:01
145	Interactive Components: Promo Card	06:55
146	Interactive Components: Cart Floating Action Button	05:30
147	Interactive Components: Item Overlay	05:04
148	Interactive Components: Order Progression Status Icons	08:06
149	Interactive Components: Order Progression Overlay	04:22
150	Prototype: Automatic Parallax Carousel	02:52
151	Prototype: Tab List Transition	03:34
152	Prototype: Masking and Overlay	03:27
153	Prototype: Cart Overlay	04:01
154	Prototype: Order Progress	05:06
155	Assignment: Create and Design a Full Food Delivery App	01:13
156	What We Are Going to Learn	00:37
157	What is Kap?	01:26
158	Using Kap	02:24
159	What is Screencastify?	01:06
160	Using Screencastify	02:57
161	Thank You!	01:18