Start using Figma for free: http://bit.ly/2Ro3GxU
Learn to use Auto Layout: https://help.figma.com/article/453-auto-layout
Read more on the Figma Blog: https://www.figma.com/blog/announcing-auto-layout/
Get a copy of the Theater App design file: http://bit.ly/2E0CYDP
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/735770583268406934/Google-Sheets-Sync
Get a copy of the Spreadsheet: http://bit.ly/2ORlJLc
Timestamps:
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.
Learn to use Auto Layout: https://help.figma.com/article/453-auto-layout
Read more on the Figma Blog: https://www.figma.com/blog/announcing-auto-layout/
Get a copy of the Theater App design file: http://bit.ly/2E0CYDP
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/735770583268406934/Google-Sheets-Sync
Get a copy of the Spreadsheet: http://bit.ly/2ORlJLc
Timestamps:
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.
Comments