Figma tutorial: Auto layout button

I wish there was a way to find all of these features and settings without having to memorize a ton of key-commands. The UX is NOT intuitive.

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

Whose dumb idea was it to make the default button size smaller than an atom?

How can I make the "resizing" properties appear? :/

💖💖💖

@figma the provided link doesn't work

i love how figma actually relates a lot to programming

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

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?

As soon as I adjust the height of the text box, the auto size stops working

I LOVE YOU FIGMAAAA!!!!!!!

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?

thank you

Its hard to learn when you use shortcuts

how can i change the color of the border ?

Where is the text style ???

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

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

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

shift A

I have an condition. I create an hexagon and large button, but figma dont understand this like a frame shape. How i can fix this?

Is there a way to add custom margin as well?

awesome!

How can I change the color of the border?

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?

Am I the only one such a loser in this world who's trying step by step to remake this and it doesn't work? If I save this 'button' in a separate "local component" page, and when I want to use it again, the label comes out separately. Plus, it's way bigger, than in a video, since I guess I don't have those fonts..

Thanks!

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

~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~

Hi this is pretty great feature but how do I make the button change states - you know just hovering vie prototype when a state is not in a frame? Sorry if it's silly question. I am new to Figma

Is the next video published? I have to learn a lot!

Brilliant!

Great!

nice tutorial

It would be great if Figma supported RTL
No plugins used

For some sweet tutorials around Figma and product design head to my channel 😀 cheers

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.

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

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

Great video as usual 🥰