3 Views· 12/05/24· Tutorials

Figma tutorial: Auto layout button


designvp
Subscribers

Figma is free to use. Sign up here: http://bit.ly/3itfdYc

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 the basics of using Auto Layout by creating a button from a single text layer.

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 How Auto Layout Works
0:31 Series Overview
0:41 Tripma File
0:47 Creating The Text
0:56 Adding Autolayout and Fill
1:16 Autolayout Properties
1:23 Directions
1:25 Space Between
1:39 Padding Around Items
2:07 Alignment and Padding
2:21 Individual Padding
2:26 Resizing Properties
2:35 Hug Contents
2:44 Interaction Diagram
2:53 Text Resizing
3:12 Wrapping Up The Button
3:34 Conclusion

#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

Show more

Up next


0 Comments