Visit my STORE: https://bit.ly/mavi-design-store
Explore Mavi Design COURSES : https://bit.ly/mavi-design-courses
Download FIGMA for FREE: https://bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: https://bit.ly/figma-professional-plan

This video will teach you how and why you should use Auto Layout in Figma. We’re going to go over theory, nested auto layouts as well as using auto layout to create components. This is an in-depth guide & explanation with examples.

Referenced in the video:
Auto Layout Basics Explained: https://youtu.be/upMkJSbYUzY
Make Better Buttons: https://youtu.be/xt75qsyEWPg
How To Create Components with Variants: https://youtu.be/M_Pd4rqQjQo
Component Properties Explained: https://youtu.be/rNKD2w3o-eI

Chapters:
0:00 — Intro & Tutorial structure
0:39 — Why Auto Layout is great for designing user interfaces and websites (live interfaces vs. Auto Layout in Figma)
2:20 — Auto Layout basics (direction, fixed vs. hug vs. fill container, spacing, padding, alignment)
10:51 — Example #1: Feature Card
12:46 — Nested Auto Layouts
16:47 — The true power of Auto Layout and why you should use it as much as possible
18:25 — Building a component with nested autolayouts and component properties
23:20 — Summary & where to go next

——————————
© 2022 Mavi Design