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.

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