Figma tutorial: Auto layout button

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.

Learn more on our Help Center:

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

[Figma]

"In June 2024, we introduced a redesigned Figma—called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.

[Mizko]

Glad to see Figma’s teaching the same concept I’m sharing in all my Figma series. Auto layout is a time saver.

[maskman]

~Notes~
1. press Shift+A to button elements into auto layout mode
2. change button element title to html element naming convention
3. turn button elements into component
~To be continued~

[Figma]

We announced some new updates for auto layout at #config2022.

[cd]

The problem is you keep changing your UI so folks in the future trying to do this are struggling - stop over engineering th UI please

[biancaguimaraens]

i love how figma actually relates a lot to programming

[wendyzhoudesign]

Thank you, this tutorial is so clear and helpful! Love the great features Figma has

[mdsabbirahmedsarker]

Nice one, learned many thing as if it was a short video. Waiting for the next one....❤️

[Troy-olfk]

I stack multiple buttons like this on top of each other in the same frame, then I set the vertical distance between buttons equal using 'Distribute vertical spacing', then when I make the frame taller by dragging the top edge, the padding of each button is no longer the value I set previously. My solution is to set vertical constraint to 'hug content', but when I resize the frame next time, it goes back to 'fixed' again.This is a bit anoying and feels like a bug, I hope the team can fix this soon

[himanshishah-quinn]

I wanted to create a button with an icon using auto layout. It was messing up my icon's position. How can I do that?

[danielmotza]

Great tutorial, Simpel and fast !! :) thanks god to Figma

[fayartmixedmedia]

before you apply auto layout, the space between the button text and the border seems too narrow. but when you applied auto layout, the space between the text and the border seems changed and it become much bigger. then, when I apply it to my own, it changed too but not big like yours, what happened?

[heeralakhaury]

I am working on figurative on the iPad and when I click on the T tool to type text it does not type as shown in the video, only when I create a text box it types. Is there something wrong that I am doing?

[poojanaik]

I can't change the color of that layout if try it will change the color of text.!! What can I do?

[sasakiaszn]

Can you guys make a new tutorial that reflects the new ui?

[christopheralan]

Is there a way to have a button component with auto layout that resizes while typing but also allow for manually resizing if needed. For instance on mobile I’d like to fill most of the screen.

[bradmacdonald]

What approach should be taken with respect to the text frame bounding box size, in order to vertically center the text label within the autolayout frame?

[sunnyux]

I'm editing a file and need to turn auto layout OFF. How can I do this?

[westernpigeon]

Where can I see the padding of an element? im having so much trouble finding this

[robertquillen]

@0:54 "We'll also apply one of our textiles!"