Figma Auto Layout Navigation Menu Tutorial
Learn how to create a responsive navigation menu in Figma using Auto Layout. Free sign-up available! π

Figma
478.1K views β’ Jan 28, 2021

About this video
Figma is free to use. Sign up here: http://bit.ly/2NeTyr7
Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video.
Tripma Design File: http://bit.ly/3nWIgV5
Learn more on our Help Center:
Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB
Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2
Timestamps:
0:00 Auto-Layout For Navigation Menus
0:20 Creating List Item
0:40 Creating A Row
0:50 Space Between Property
1:07 Direction Property
1:27 Adding Another List Item
1:41 Adding A New Item
2:03 Changing An Item's Position
2:26 Adding An Avatar
2:45 Hiding The Avatar
3:35 Adding The Logo
3:44 The Tripma Design File
4:01 Alignment Flyout Menu
4:24 Changing to Fixed Width
5:01 Changing from Packed to Space Between
5:52 Adjusting The Padding
6:01 Using The Design
6:19 Constraints and Resizing Properties
7:00 Conclusion
7:13 The Next Video
7:21 The Tripma Design File
#Figma #FigmaTutorial #AutoLayout
Music:
Mitsubachi by Smith The Mister
https://smiththemister.bandcamp.com
Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: http://bit.ly/mitsubachi
Music promoted by Audio Library https://youtu.be/0IgndUb1YQI
Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video.
Tripma Design File: http://bit.ly/3nWIgV5
Learn more on our Help Center:
Create dynamic designs with Auto Layout: http://bit.ly/2vXWMXB
Behind the feature: the making of the new Auto Layout: http://bit.ly/3nYwkm2
Timestamps:
0:00 Auto-Layout For Navigation Menus
0:20 Creating List Item
0:40 Creating A Row
0:50 Space Between Property
1:07 Direction Property
1:27 Adding Another List Item
1:41 Adding A New Item
2:03 Changing An Item's Position
2:26 Adding An Avatar
2:45 Hiding The Avatar
3:35 Adding The Logo
3:44 The Tripma Design File
4:01 Alignment Flyout Menu
4:24 Changing to Fixed Width
5:01 Changing from Packed to Space Between
5:52 Adjusting The Padding
6:01 Using The Design
6:19 Constraints and Resizing Properties
7:00 Conclusion
7:13 The Next Video
7:21 The Tripma Design File
#Figma #FigmaTutorial #AutoLayout
Music:
Mitsubachi by Smith The Mister
https://smiththemister.bandcamp.com
Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: http://bit.ly/mitsubachi
Music promoted by Audio Library https://youtu.be/0IgndUb1YQI
Tags and Topics
Browse our collection to discover more content in these categories.
Video Information
Views
478.1K
Likes
8.8K
Duration
7:38
Published
Jan 28, 2021
User Reviews
4.8
(95) Related Trending Topics
LIVE TRENDSRelated trending topics. Click any trend to explore more videos.
Trending Now