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.
No specific trending topics match this video yet.
Explore All Trends