[Older version] Figma Tutorial: Auto Layout
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
Watch video [Older version] Figma Tutorial: Auto Layout online without registration, duration hours minute second in high quality. This video was added by user Figma 05 December 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 372,934 once and liked it 6.5 thousand people.