Figma Auto Layout Tutorial Update - Master it in 1 Hour - With Exercise Files

[@AriPxl]

👉 Learn Figma for Beginners - kzbin.info/www/bejne/kIqrepuZdryomsk 👉 Learn Figma Style Tokens - kzbin.info/www/bejne/nYDJlXikh5p7esk Thanks for watching and supporting the channel! I really appreciate it!

[@joshlaskey8687]

Said it before, gonna say it again; I can't believe this content is free! I've learnt so much from you! Hands down the best teacher!

[@AriPxl]

Thank you Josh, appreciate it

[@monicaanalytics]

A1 Teachers are everything.

[@LauraAdamsRodriguez]

Oh my god, I've been struggling with auto layout for the longest time. Thank you for this!

[@hernanhidalgo8246]

Please never stop making videos! Good Job

[@AriPxl]

More coming in the next couple of weeks!

[@gurugfx770]

The best on KZbin

[@madcityy269]

Honestly, dude, this guide is amazing. Probably the best one I've seen so far on YT.

[@AriPxl]

Glad you found it helpful!

[@greci4376]

Best tutorial on auto layout by bar!!!! Thank you for breaking down the small details

[@DeametBoyChannel]

At first I thought that you had near a 100-150k subscribers, maybe even more :/ I was totally shocked at the end when you said about 2k subs. I think you are really good man with good describing of a material. Keep going

[@maryloucomeau6193]

Awesome job, you explained very well, the pace is perfect, I am forever gratefull to you!

[@chioj36]

Thank you so much. Great tutorial really helped being I was stuck on an assignment.

[@Aishcream]

OMG you are an AMAZING teacher! I have just learned in the first 5 mins of this video what I have been struggling to understand in about 2 hours from someone else, thank you so much!

[@mannugaur8391]

Man you are genius..., seriously i watched 12+ vidoes on autolayout includig the office hours playlist from figma and also the hour long vidoes from the envato tuts + playlist on just autolayout to understand that and even after thart i am struggling so much to use autolayout that i almost fed up and i saw your refernce in suggestion after seeing this Boom i was like now i got it how that works i understand this ton's n ton's n ton's of thankyou for this tutorial much needed and i amm shocked that content like this is free on the internet.

[@AriPxl]

Cheers dude, glad it helped you. Making another one with the latest updates from Figma, stay tuned!

[@mannugaur8391]

@@AriPxl ready for it.

[@denzmw]

Amazing video, great resource. Will definitely be checking out more of your channel.

[@C-KRET]

Thanks for this. It really does improve my workflow!

[@adnankhamis8328]

Thank you so much Ari! Was struggling with making my design responsive!

[@AriPxl]

I’m glad you found it helpful!

[@desmondchukwudiezuluebo7185]

Mhan! thanks for sharing. You helped me answer lots of questions I was having, from different btw fill, fix and hug to absolute position. Thanks big time!!

[@AriPxl]

Yeah Auto Layouts can get confusing, I’m happy it helped you and appreciate your feedback

[@carolineholder1822]

Your videos are so helpful!

[@priteshk4394]

Great teacher ❤

[@uxsaleheen]

Amazed. Great tutorial bro.

[@fjjtalks2812]

Thank you so much for this ❤

[@m.ehtizan]

Hey Ari, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business faster.

[@Hawkhunter07]

Thanks man, this was one of the best videos on figma autolayout that I've found

[@AriPxl]

I’m glad you found it helpful man :)

[@magyarpinoy]

You are a great teacher, thanks a lot!

[@abhishekgharia8808]

Bring it on!!!! More videos from you will be magical for me

[@AriPxl]

Haha thanks! More coming soon

[@joelmeneses9068]

Man, this is the best tutorial Ive ever seen in Figma. Keep up the good work. Thank you so much.

[@SpaghettiRealm]

Nice explanation of this figma feature, Thank you. You have a new subscriber!

[@mvenkat498]

Great bro 💥

[@YanaKoptilina-o3n]

Thank you, your videos are great :)

[@Cjonas1989]

Specially in the beginning auto-layout is some pain in the a** if you not used to it. But embracing Figma's auto layout could save you lot of time in a long time. Love this feature because al your design look automatically more consistent! Thanks Ari Pxl

[@AriPxl]

Also a lot easier to code! I have a video coming that explains the benefits of using Auto Layout

[@GraveRave]

Thank you will try this later!😀

[@SirineNasr-q5e]

Really great video! Just a note on the accessibility of the color choices, the dark grey against black background styling choice doesn't offer enough contrast and makes it difficult for a visually impaired person to follow the tutorial. Other than that, your explanation is great :)

[@jgranger1023]

Brilliant!

[@СергейБелов-ж7ж]

Very helpful

[@mariusdarginavicius2049]

Very informative video ! Thank you for the lesson !

[@mollymcgreevy1187]

Thank you for this, I was on the verge of tears trying to get autolayout lmao

[@AriPxl]

Hahaha they can get complex, I hope this helped out

[@santiagoacosta2227]

well after hours of trying to make my stuff responsive this video help me do it. thank you

[@AriPxl]

Mission accomplished :D

[@santiagoacosta2227]

@@AriPxl Can't wait for your component video!

[@anovin82]

Amazing video tutorial. I never feel like I’m lost and you’re easy to following along with. Thanks for making this video!

[@whereisjeffrey]

Thanks Ari appreciating your contributions!

[@AriPxl]

Glad you found it helpful!

[@petermckinnon386]

I don't really comment on KZbin videos but this one deserves a mention. Absolutely fantastic tutorial on auto layout. I have watched many tutorials on this subject and this is far the best one I have come across. I also don't subscribe to many channels either but this one deserves my subscription. Thank you so much and please keep producing Figma tutorial. Pete U.K

[@AriPxl]

Thanks, your feedback means a lot. Getting back into it. New content in April

[@cdlikecdrom]

Great stuff, I’ve been designing my own website and got long case studies and didn’t know about this feature, this will allow me to quickly add and replace text without having to manually set all spaces

[@AriPxl]

Super useful to learn Auto Layout for sure

[@yusufarowolo5880]

Thank for the video, it is very informative

[@AriPxl]

I’m glad you found it helpful

[@hudahussain1332]

So well explained, looking forward to a fully responsive website auto layout. JazakAllah

[@AriPxl]

Glad you found it helpful, working on more content :)

[@praiseekene7616]

Really awesome video, so helpful Subscribed

[@AriPxl]

I’m glad you found it helpful

[@DownfallMUSICc]

Really helpful,thank you a lot m8 🔥

[@mannugaur8391]

it will be great if you release a video on the min. and max width updates that figma just got..

[@AriPxl]

Already on it!

[@rajamanikandanselvaraj924]

thank you very much for the impeccable content. Best wishes to you for all success, wealth, and happiness...

[@AriPxl]

Appreciate it man! Same wishes for you too :)

[@vijaysrivathusn3140]

thank you !

[@dandndlndn1210]

Thank you for this informative video for free! already subscribed and waiting for the next videos

[@AriPxl]

Thanks man working on more very soon

[@AdventureDarin]

Excellent tut

[@AriPxl]

Thanks Darin, glad you enjoyed it

[@love43ization]

This is amazing! It’s so easy to follow and memorise everything you teach, please do more tutorials! ❤

[@AriPxl]

More coming in a couple of weeks

[@sayekatchakraborty2552]

Thank you 💗. Really helpful video

[@AriPxl]

Glad you found it helpful

[@carolineholder1822]

What does BG stand for in the color styles?

[@AriPxl]

Bg = Background Fg = Foreground

[@zeeshanali7332]

Hey, Sir, when will the components video come out? I'm waiting.

[@AriPxl]

Working on it, that’s a longer video coming soon. I have a few video before that coming in a couple of weeks

[@christnhvv256]

I def subscribed! Auto layout has been confusing for a while and this video put so much into perspective. Is there anything else to Auto layout that I should learn??

[@AriPxl]

Beyond this I would say practice, build a login and registeration page with complex input fields (icon both sides) see if you can build that

[@seanhart6047]

Hey Ari, Love your videos and how well thought out and easy they are to follow. Do you think perhaps in the future you could release a tutorial showing how you implement Google Anaylitics and extract meaningful data from a real-life UX project? Would love to see your process.

[@AriPxl]

Yes, just noted it down. Thanks for your feedback and glad you found it helpful.

[@denzmw]

Quick question, how did you auto fill with Lorem ipsum text?

[@AriPxl]

Just copy pasted 😅 i have 2 screens and had Lorem Ipsum text in the other one

[@madhoundes]

Amazing content

[@AriPxl]

Glad you found it helpful

[@SzabatDesign]

Thanks bro good content very clear and helpful. Could you tell me please what shortcut did you use for rename 2 layers of buttons? :) Have a great day!

[@AriPxl]

Hey Christopher, thanks, appreciate it. I used cmd+r if you’re on mac I assume it’s ctrl+r on Windows. I’ve made a Shorts about Renaming in Figma here if it helps Figma Tutorial: Renaming kzbin.infoQladPaMr9Vc?feature=share

[@petermckinnon386]

Overflowing from container in auto layout Hope someone could help. Started to delve a bit deeper into auto layout and I can't seem to get my head around why when I drag the bottom of the frame up my content overflows the frame. (see screen shot.) Everything in on fill container, my frame is on fixed height and hug contents but goes to fixed width when i drag up. This is not on a desktop or mobile fram it is built purley in an auto layout frame. (Hope all that makes sense.)

[@Jason-v5e]

I have a question. @15:35 you talked about using spacing between which allows the top nav bar (left nav + right nav) to become responsive. What difference is this compared to using constraints and aligning the left nav to the left top and right nav to the right top? Would either methods be okay?

[@AriPxl]

It's quite different. If we simplify the Nav into 2 separate rectangles, left and right, using something like constraint would cause some issues. For example, as you resize your component, you will also resize your rectangles and therefore break your component or get unexpected behaviour. The constraint also wouldn't work outside of a frame cause your shape needs to be constrained by something. Using Auto Layout with Spacing Mode -> Space Between fixes all the problems above and also directly replicates Flexbox, which is a CSS property that will be used to code your design and basically create the exact same behaviour on the browser or even native mobile apps. Hope the answer wasn't confusing.

[@Jason-v5e]

@@AriPxl i see so best practices would still be spacing between then instead of setting constraints. And the 2nd part got me, makes a lot of sense. Thank you!

[@seppneimusser5723]

Wow°° Thank you so much for your performance tutorial, I learned a lot from it^^Abo + Like + Bell

[@topherwakefield121]

20:32

[@mannugaur8391]

why the files are downloading as an illustartor file?

[@arupde6320]

be regular

[@AriPxl]

More videos soon. It’s a bit hard with a full time job

[@fiveshorts]

Why ALWAYS a button? I know "why", but let's mix it up a little.

[@AriPxl]

Because it’s beginner friendly and immediately useful but also the tutorial goes into way more detail than a button, it’s an hour long

[@jamesreilly5174]

It's an over hyped feature. Try anything real world outside a button or just stuff left right it is no use. Great video though.

[@AriPxl]

Thanks man. It’s actually super useful, once you get used to it and master it have a look at how FlexBox and Grid work in CSS this is essentially that, meaning that anything you can build with Auto Layouts can be made into actual code.

[@laurintietz8671]

@@AriPxl i agree on that one. webflow even released a plugin which converts auto layout to flexbox.

[@aymanyousef1169]

thanks man for this great video 👏👏🙏