Auto Layout for Beginners (crash course)

If you’re not using auto-layout in Figma, you’re missing out on a huge time saver! The good news is, auto-layout is actually very simple and intuitive once you wrap your head around it. This crash course with Maddy shows you everything you need to start making the most of this feature.

CHAPTERS
0:00 Intro
0:45 Auto-layout basics
10:30 Demo of auto-layout techniques

📱 Find us on SOCIAL MEDIA
Maddy’s YouTube channel 👉 @MaddyBeard

[jeffbeaudoin]

Great instruction. I appreciate her explanations for the logic and for the what, why and how.

[you-can-t-get-know-me]

I AM CONFUSED IN FIGMA & I WATCHED MANY TUTORIALS BUT FROM THIS I REALLY LEARNED AUTO LAYOUT AS WELL AS MY OTHER FIGMA BASICS ALSO GOT CLEARED

[ChrisWorksCreative]

Great tutorial on auto-layout basics! The only question I have is what's the best way to adjust the layout of the rows so that the checkbox and company fields have a smaller gap between them that matches the sample exactly?

[ContentSanvt]

Super helpful. Thank you! And you explain easy and clear

[linzee]

thank you so muchhhh !!! you made it understandable very easily

[flexsteveify]

This is exactly what I needed now. HUGE thanks, Maddy!

[rogerio]

Muito obrigado por essa aula incrível.

[ambergrace]

Hi, I am working with auto layout and I notice that on my layers, things are in the following order:
Device (frame with auto layout)
> Frame 1 (frame with auto layout)
>> Text Node 2
>> Text Node 1

On my canvas, they appear in the proper order, though:
Text Node 1
Text Node 2

Is there a reason why my layers have to be in the opposite order? I notice that yours seem to be in the correct order and it works as expected.

[linavelandia]

This is amazing!! Thank you for this ❤ Is there a reason why you frame the objects first before using auto layout? 14:09

[chcztdl]

Great tutorial ✨thank you

I just confused about 1 part -

How did you make the button “closed” at the beginning so that the text was along with the button . And so you would be able to adjusted and change within Layout accordingly.

[terapeutstesti]

If you're doing a tutorial for complete beginners, you'd want to describe everything you're doing. Or it might help to put the keyboard shortcuts you're currently pressing in the video. I had to rewind the video several times to understand what you did. Don't take this as a negative criticism, but a space to improve your tutorials. Thank you. 😉

[Nitish-gogp]

Qiara excet of endocrinology of non web development video like this, , so plzzz do so that easier way to explain

[jessejustsick]

Everything worked perfectly until I rounded the corners at the end. The corners for the table became round, but it looks like they are overlapped by the sharp corners of the rows. Not really sure what I did wrong 😅

[Clicksarun]

Mam, Take breath for every few seconds, I think you're running out of Oxygen causes bit annoying "Vocal fry".

[AntoineGrangier]

Did I mention the voice fry was unbearable ? Not sure.