We updated Auto Layout on November 19th, 2020. The latest version includes new features, but also some changes (specifically to alignment of child objects). You can read the updated documentation on our Help Center https://help.figma.com/article/453-au... or view the Auto Layout Playground file: https://www.figma.com/community/file/...

Start using Figma for free: http://bit.ly/2Ro3GxU
Learn to use Auto Layout: https://help.figma.com/article/453-au...
Read more on the Figma Blog: https://www.figma.com/blog/announcing...
Get a copy of the Theater App design file: https://www.figma.com/community/file/...

With Auto Layout, buttons can resize with their text, lists can be rearranged by simply dragging items around, and your Frames will grow or shrink as you add or remove content.

When designing with real data, like when using the Google Sheets Sync plugin, all of your Auto Layout Frames and Components will instantly update to any content, saving you time and clicks. Note that using Google Sheets Sync requires renaming layers with special prefixes which weren't covered in this video.
Install Google Sheets Sync by https://www.figma.com/@Dave :
https://www.figma.com/c/plugin/735770...
Get a copy of the Spreadsheet: http://bit.ly/2ORlJLc

Timestamps:
0:00 Intro
0:22 Demo Start
0:34 Creating Buttons with Auto Layout
1:02 Dynamic resizing as contents change
1:46 Nesting multiple Auto Layout Frames within another Auto Layout Frame by duplicating
2:12 Direction property
2:49 Reordering Children of an Auto Layout Frame
3:34 Creating Auto Layout Frames from multiple objects
4:17 Text resizing with Auto Layout
5:02 Adding objects to an Auto Layout Frame
5:26 Deep nesting using Command / Control
6:01 Auto Width/Height and Fixed Width/Height
6:17 Auto Layout Components
6:44 Scrolling with Auto Layout Frames
7:36 Adding real data to our design so the Auto Layout Frames can all adapt.

#Figma #FigmaDesign #FigmaTutorial #Autolayout