How To Use Figma Dev Mode with Auto Layout

Coaching: https://www.upwork.com/services/consultation/1861120548537214221 Courses: https://www.udemy.com/user/boroji-design/ Become a member: https://www.youtube.com/channel/UCBHbG8_XnEAkdmeMQ6LS90A/join #figmatutorial #autolayout #figmaforbeginners 0:00 Explaining the project 0:25 Step 1 - Extending link variant to chip variant in Figma 2:03 Step 2 - Instance swap variants in Figma 4:03 Step 3 - Create website body with auto layout 7:09 Step 4 - Nested auto layout layer breakdown 8:23 Step 5 - Figma dev mode to auto layout 9:31 Step 6 - Adding testimonial section using auto layout 11:48 Step 7 - Align the testimonial section with Figma's ruler 12:53 Step 8 - Preview Notion's website in Figma's responsive presentation mode In this video you will learn: - Overview to Figma Dev Mode - Benefits of using Auto Layout - How to switch and navigate Figma Dev Mode - Practical examples and best practices of instance swap - Tips for integrating Figma Dev mode with Auto Layout in your projects