<aside> 💡 Auto layout: is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.

</aside>

1. Video Tutorial by Figma

Create dynamic designs with auto layout

Create dynamic designs with auto layout

2. Examples by Sizze

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dde1c68e-0171-4454-a596-b74e5f7d627a/Frame_6580.png

Do: In elements that use lists or blocks that can be repeated, use vertical or horizontal auto layout

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5a887ab5-2104-4abd-bb6e-6b58722c0766/Screenshot_2021-05-11_at_20.34_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/db902aed-d5da-4fe2-aa1a-99a3daf38a6a/Screenshot_2021-05-11_at_20.36_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/367f2f2b-a3f1-439e-b849-f7a5e6ef221d/Frame_6579.png

Don’t: use repeating elements without auto layout

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ad304383-c40e-481e-945a-cdbb3fb70e4a/Screenshot_2021-05-11_at_20.38_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a628045c-d417-4186-a1b0-fe0fe5a7af67/Screenshot_2021-05-11_at_20.38_2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/65c45a38-1795-4856-8820-dfe80298dfda/Frame_6580.png

Do: If you use horizontal blocks with scrolling, be sure to use the auto layout block

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/97ede8b0-d632-4981-8a74-dc6c99c1ab77/Screenshot_2021-05-11_at_20.54_2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6fc1e2e4-674a-4ee6-aa38-2872fcc9b5f9/Screenshot_2021-05-11_at_20.54_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d0e8501a-c3d0-48d2-a705-22658750fb1c/Frame_6579.png

Don’t: If you didn't do auto layout in the scroll box, it won't work

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7a0b93fe-76c7-4aca-a56f-90a7ce1450e1/Screenshot_2021-05-11_at_20.38_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5825bd72-0eee-4223-b862-e69b745adc56/Screenshot_2021-05-11_at_20.55_1.png

Example in Figma

Sizze Tutorial