Figma Web Design Masterclass (New Auto Layout Tutorial)
Join our channel today and become a member:
/ @borojidesign
Hire us for 1-1 tutoring:
https://www.upwork.com/freelancers/~0...
Our courses on Udemy:
https://www.udemy.com/user/boroji-des...
Get a special discount on our Udemy courses:
https://boroji.com/courses
#figmatutorial #autolayout #figmaforbeginners
0:00 Step 1 - Notion project introduction
0:52 Step 2 - Organize the Figma page
1:43 Step 3 - Create color styles
2:18 Step 4 - Figma layer naming convention for colors
4:15 Step 5 - Automate creating colors using Figma plugins
5:25 Step 6 - Create a link component
7:01 Step 7 - Create link variant and text property
9:33 Step 8 - Create the navigation bar using Figma Auto Layout
12:04 Step 9 - Learn nested auto layout behaviour in Figma
13:37 Step 10 - Automate pasting data using Figma plugins
14:24 Step 11 - Extending link variant to chip variant in Figma
16:03 Step 12 - Instance swap variants in Figma
18:03 Step 13 - Create website body with auto layout
21:09 Step 14 - Nested auto layout layer breakdown
22:22 Step 15 - Figma dev mode to auto layout
23:31 Step 16 - Adding testimonial section using auto layout
25:49 Step 17 - Align the testimonial section with Figma's
26:53 Step 18 - Preview Notion's website in Figma's responsive presentation mode
29:43 Step 19 - Extend chip variant to create toggle component
30:39 Step 20 - Add auto layout and fix toggle colour contrast
32:16 Step 21 - Create active and inactive toggle variant
34:52 Step 22 - Add toggle variant to Notion website
36:44 Step 23 - Reduce the size of the image
38:03 Step 24 - Create image component variants in Figma
39:26 Step 25 - Create a card using the auto layout in Figma
41:23 Step 26 - Extend link variant component
42:45 Step 27 - Create a card component in Figma
44:18 Step 28 - Add expose nested instances and text property
48:13 Step 29 - Add auto layout wrap
50:03 Step 30 - Add responsive behaviour with Figma auto layout
Watch video Figma Web Design Masterclass (New Auto Layout Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Boroji Design Inc. 03 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,950 once and liked it 186 people.