Auto Layout for Beginners (crash course)

[@gg-pk2bq]

Out of all the videos I have watched regarding learning and understanding Auto-Layout, this one truly helped to make sense of the feature. Thank you.

[@FluxAcademy]

Glad it was helpful!

[@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

[@UsmanUsman908-r3d]

same

[@elleari89]

@@UsmanUsman908-r3d do a course on Udemy , 📑like figma is heavy in terms of the projects you need to do with figma. Unlike photoshop and illustrator, where you are working on one file, with one eg. poster, figma you are working on multiple screens, multiple everything. you need a course to explain it step by step.👍 Also, to be considered Proficient or Advanced in any program, you need to cover certain topics. eg. in Figma, Design systems. You need a course, I'm finishing up one right now but they don't explain autolayouts very well hence, why I'm here. 😁

[@Gary31563]

This is great but I think you should add the resources for us to download so that we can actually practice while you teach. That way it is easier for us to grasp what you are talking about. For some of us we are practical learners

[@nonimitharuni9304]

Thank you so much for this video. I've referred some videos on auto layout before I found this one. But all of them left me confused and doubtful. But this one was super useful. Thank you so much for this detailed video.

[@theJashDev]

This is really helpful, thank you. One small suggestion if I may; you could probably divide your video into more chapters. Makes it easier to target particular information.

[@elleari89]

THANK YOU! I couldn't figure out why I wasn't always seeing, FILL CONTAINER option. SImple answer: The frame on the outside needs to be an auto layout from so the components inside will know how big the frame they are filling is. Else they wont know how to fill it. Thanks!😁

[@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?

[@jasonharmon2309]

Very helpful video, thank you so much!

[@jeffbeaudoin4544]

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

[@darkreaper4990]

I have a question. in ~ 14:30 why did you make each of the elements inside the row into frames first and THEN into Auto-layouts? my understanding, based on the beginning of the video, was that Auto-layout automatically creates frames when you apply it on an element. what difference would it make if we didn't create the frames first here?

[@avmid]

Thank you. This is really helpful.

[@FluxAcademy]

You're welcome! ☺️

[@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. 😉

[@FluxAcademy]

Thanks for the polite feedback. 👍

[@Line49Design]

You're telling her/them to do more work in production, so you don't have to pause and replay this free video. Maybe doing a little work on your part is a beneficial part of learning

[@pt2163]

They did say” crash” course and for auto layout not figma beginners per say

[@joc2150]

@@Line49Designalways one

[@gauravgiri6081]

It's not for newbies, I really liked the video as it doesn't get into details and direct on point

[@NzQ_1337]

Best explanations! Thx ❤

[@OluwabukonlagraceGrace]

Please i have a question here 3:10 how did you do the aspect when extended it did not show after the lenght of the frame

[@PaulRayProductions]

Your a diamond... Thank you so much, your are fantastic!

[@linavelandia1792]

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

[@linavelandia1792]

Also is there a reason why you auto layout the frames individually? Thankss

[@morgan.shaffer.design]

Extremely helpful tables tutorial, thank you!

[@linzee18]

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

[@ElTebe]

Thanks for this video. Unfortunately the official CSS naming conventions getting far away and gets confusing like "frame", "hug", "row", "layout", ..

[@ambergrace1001]

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.

[@abdulchowdhury2635]

Make a video on figma component

[@ContentSanvt]

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

[@CheerUp2]

No matter what when I create a auto layout, the horizontal is always set to fixed

[@ButCheeques226]

Thank you so much! This helped a ton

[@FluxAcademy]

You're welcome, glad it helped!

[@animefan2007bg]

This was awesome. Thank you!

[@FluxAcademy]

Glad you enjoyed it!

[@flexsteveify]

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

[@FluxAcademy]

Glad it was helpful!

[@adriennviski]

Hi! I have a question: for some reason, the “constraints and resizing” option is missing in my Figma. It’s not where it should be, and I can’t find it anywhere. Also, I’m missing a couple of animations in prototypes, even though I have a Figma subscription. What do you think the issue could be?

[@yunushanbayrak4992]

Under the "layout" option I have the resize option. You can also see the Constraints section after selecting a child element of a frame. If your problem is nothing like this, Figma has changed the User Interface. That may be why.

[@manmohansingh3]

could you just not use the white background in frames? since changes are not visible when it comes to frames, you could have chosen another color?

[@rukiyahninsi2637]

Just wondering, how did you make the button “closed” at the beginning so that the text was along with the button?

[@niteowl360android]

Excellent, thank you

[@VitaliiS-o2r]

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.

[@user-11DiACasti88]

yes, excellent Tutorial, but i did get confused at the first part too, i don't know why it wasn't so clear or so easy go get the whole idea. Great Job anyway

[@pwaegemans]

If they try to mimic Flexbox, why not just incorporate Flexbox as it is? Just use the exact features and naming, so that people with css knowledge can use it immediately or even just allow to add css to make it work like in Penpot. This "hugging" thing is just how css behaves out of the box if you add padding around an object.

[@typezi3212]

Super Helpful for me!

[@FluxAcademy]

Glad to hear!

[@DesignCodeBangla]

WOW Super helpful

[@rogerio8710]

Muito obrigado por essa aula incrível.

[@LucasdaSilva-dn1on]

Superstar. Thanks so much

[@flu-flamer]

great tutorial! she's awesome

[@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 😅

[@agathe-l8y]

hey, i know you've posted your comment a month ago, but just in case you still care i think i found the solution ! personally, in the auto layout, i selected "clip content" instead of "show content". after that the radius worked just fine :) have a nice day !

[@jessejustsick]

@@agathe-l8y Thank you! I actually wound up doing exactly that, but I still don't get why she didn't seem to have it selected in the demo

[@abcdk3805]

This is not going to work since now Figma you have to apply the resize first before adding that auto layout or else the shapes will be squeeshed if you change auto layout directions. Took me hours to figure out

[@_maverick.]

great tutorial and I thank you for that, while I beg you, dont't get me wrong, avoid that frying voice

[@angeltourist3048]

I watech your all video. you have more better explane all of us.

[@Nitish-go2gp]

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

[@referenciasconteudo]

Great!

[@WhiskeyThieves]

Auto-layout within auto-layout is such an "Inception" concept 🤯🧩

[@Clicksarun]

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

[@13rah1m]

Voice 🙄

[@peacefulwarrior03]

explaination is good but your accent is really annoying ..

[@AntoineGrangier]

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

[@tomschimana1009]

Don't watch the video, or even better, create your own video and make it BETTER.

[@joshuawarren2219]

Ermmm the vocal fry is my favourite part of the whole video 💅💅

[@nubel5574]

@@tomschimana1009He’s such a douchebag

[@bananaman17]

Such a shame about the rather annoying forced Californian vocal fry...

[@AntoineGrangier]

Unbearable voice fry.

[@ImpureForce]

Then you just close the video and move on. No need to comment if it's unbearable.

[@AntoineGrangier]

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

[@meretrizON]

sorry but you explain very boring