Figma Auto Layout | Getting Started with Auto Layout

Поділитися
Вставка
  • Опубліковано 27 гру 2024

КОМЕНТАРІ • 414

  • @JesseShowalter
    @JesseShowalter  3 роки тому +43

    How can you start using Auto Layout in your projects?

    • @Mayank-rs7kg
      @Mayank-rs7kg 3 роки тому +7

      I learned auto layout from pablo stanley's channel. Now I am pretty much comfortable with it.

    • @GraveRave
      @GraveRave 3 роки тому

      @@Mayank-rs7kg Hey same thing man.

    • @christinegbk
      @christinegbk 3 роки тому +1

      I can't figure out to add color to the background of each one of my frames. Please help.

    • @denis9971
      @denis9971 3 роки тому

      I loved the video, thank you for the great content! I'll hopefully be using the Auto Layout for creating various cards and components as part of a Design System. Would love to see a more complex example - like creating Auto Layout element with a behavior for resizing from Web to mobile screen size (Will elements stack on top of each other or something else?) :)

    • @daltanionwaves
      @daltanionwaves 3 роки тому +1

      Auto-layout e v e r y t h i n g

  • @frogturtle
    @frogturtle Рік тому +10

    2 years late but even after figma updates this is still one of the only auto-layout tutorials that clicked with me. explaining a design in figma as a collection of frames rather than elements really helped. thanks

  • @hiimhuaqi9829
    @hiimhuaqi9829 3 роки тому +3

    Wow, Auto Layout is totally game-changing. I've spent several hours on the boring alignment and then extra hours revising them. Now, Auto Layout saves my life.

  • @tuong8859
    @tuong8859 3 роки тому +79

    I am a Junior UX Designer and I really love the way to talk and explain stuff. You are an amazing man, keep going!

    • @JesseShowalter
      @JesseShowalter  3 роки тому +9

      Thanks so much for seeing value in my work! Have a good week!

    • @daltanionwaves
      @daltanionwaves 3 роки тому

      Tuong got the hots for teacher 😍

    • @entertainment2536
      @entertainment2536 3 роки тому

      How much salary

    • @designerdays3999
      @designerdays3999 2 роки тому

      Yes, he is a natural teacher for sure. Love his videos.

    • @rembautimes8808
      @rembautimes8808 2 роки тому

      I like the intro and the song , the motivational style of speaking and the content. I was feeling down today and disheartened but saw your video and gave me the courage to keep on pressing .

  • @topemeister3000
    @topemeister3000 3 роки тому +108

    The clearest explanation of Auto Layout I've seen. You smashed it, Jesse! Cheers

    • @JesseShowalter
      @JesseShowalter  3 роки тому +2

      Many mahalos, T!

    • @kristynamertova2631
      @kristynamertova2631 3 роки тому +6

      Agree. I was so overwhelmed by Auto Layouts and watched couple of video but only now I had the "ooh" moment.

    • @elkanahnalaya
      @elkanahnalaya 2 роки тому

      in my life i tell you

  • @aceadewaleedits
    @aceadewaleedits 3 роки тому +18

    This is the first video where I really felt like I understood what was happening. Thankful for this!

    • @JesseShowalter
      @JesseShowalter  3 роки тому

      Thanks so much, Lamar! I’m so glad I was able to help out!

    • @daltanionwaves
      @daltanionwaves 3 роки тому

      Yeah he is a really great splainer

  • @ArdDanielN
    @ArdDanielN 2 роки тому +42

    This is a great explanation and tutorial. The one key thing that makes Figma superior to all others is that it mimics how you would normally code websites. Frames essentially become html divs that can receive similar styling properties. These styled frames (divs) then have boxes or content placed inside them. This is formally known as the CSS Box Model and Figma is the only design software I have used that follows this model.
    And in this video, auto-layout highly mimics the CSS grid styling properties. In my opinion, Figma and it’s features are the closest thing you can get to a designing for web in a design tool without ever writing a single line of code (apart from Webflow).

    • @cardozzzo
      @cardozzzo 2 роки тому

      Nice info, Daniel! Help me a lot to discovery more about the impact of Figma

    • @designerdays3999
      @designerdays3999 2 роки тому

      Thanks Daniel I am designer have designed everything pretty much like print, websites, and now mobil. Your explanation really makes it clear that they are divs, good to know having some coding background with HTML5 and Dreamweaver.

  • @prasojoaziz
    @prasojoaziz Рік тому

    OH MY GOD!!!!! I have been frustrated and still can't get my head around after WATCHING COUNTLESS VIDEOS EXPLAINING AUTO LAYOUT BUT YOU EXPLAIN IT PERFECTLY WELL. YOU ARE THE BEST JESSE!!!!! THANK YOU SO MUCH. MUCH LOVE

  • @thatQiao
    @thatQiao 2 роки тому

    Nice explanation, it would be best if the keyboard shortcuts are shown on the screen just like what the official did.

  • @celeste.1995
    @celeste.1995 5 місяців тому

    Came back to this video after almost a year, while organizing my messy tabs, and i remember struggling to learn auto layout around a year back untill i watched this video and now i love auto layout. Thanks to this video and creator. The simplest way to understand auto layout for a beginner.

  • @nicolasmoreira9743
    @nicolasmoreira9743 3 роки тому +3

    Had to watch 3 videos to get it, but I think I finally got it, haha! Thanks man!!

  • @kellegbert
    @kellegbert Рік тому +1

    I'm just now starting to work with Figma and this video was more helpful than the one from the beginner's video from Figma. And your excitement is contagious! Thanks for sharing your knowledge :)

  • @telher9737
    @telher9737 2 роки тому

    This has to be the best and most straight forward auto layout tutorial I've seen.

  • @TwinkleToes_2001
    @TwinkleToes_2001 Рік тому

    I have watched so many tutorials that go too deep too fast before landing here and I am so glad I found you. Such a proper and simple explanation of auto layout.

  • @hollowio2807
    @hollowio2807 2 роки тому

    dude auto layout changed my entire approach to design, thank you brother.

  • @favouruzie1438
    @favouruzie1438 2 роки тому +2

    The best tutorial I’ve seen so far.
    Watched it and definitely watching again.
    You just earned my subscription. Thank you for helping other junior designers out there

  • @lugan7614
    @lugan7614 3 роки тому

    This is the most clear explanation and presentation I've heard for Auto-layout and Frames. ThX!

  • @akinolaolayinka4065
    @akinolaolayinka4065 3 роки тому +2

    Best auto-layout tut have seen so far!

    • @JesseShowalter
      @JesseShowalter  3 роки тому

      Thank you so much for the kind words, Akinola!

  • @jherem
    @jherem 3 роки тому +21

    Your explaining is perfect! Good example

  • @abdulbasitsadiq3413
    @abdulbasitsadiq3413 2 роки тому

    This is about the best video on auto-layout out there. Thumbs up Jesse!

  • @ishaagarwal7351
    @ishaagarwal7351 3 роки тому +1

    I am a beginner in the UX field but for some reason i never used groups and swore by frames, made my work much easier and more neat. This video helped out a lot, thank you!

  • @mimkaf7
    @mimkaf7 7 місяців тому +1

    The best explanation of auto layout I’ve seen in youtube👌🏼

  • @bobbyprima8840
    @bobbyprima8840 3 роки тому +1

    Hi, from Indonesia. Thank you so much Sir, It's clear for me to be a beginner in UI/UX Designer.. Your explanation is easy to understand.

  • @herbertnondo
    @herbertnondo Рік тому +1

    Well explained, couldn't figure out how to use it until watching this video. Thanks!

    • @JesseShowalter
      @JesseShowalter  Рік тому

      I go way more in depth in my new UI design program 30dayui.com/

  • @vaishnavipahari8107
    @vaishnavipahari8107 2 роки тому

    I have started my UI journey. I had a bit confused about auto layout but after this video all things are clear. Thank you so much

  • @parinizaveri3435
    @parinizaveri3435 3 роки тому +1

    Best tutorial of auto layout I have ever seen. Was getting so confused before. Now, things are fixing in bits and pieces. So much thanks to you!

  • @Idonije_E
    @Idonije_E 2 роки тому

    My God, thank you so much. This is by far the simplest explanation of auto layout. I literally got it on one try

  • @thaoala
    @thaoala 3 роки тому +1

    I was so confused with auto layout in Figma and only comprehend it after watching your video. Excellent explanation and example. Thanks a lot for your effort!

  • @liamkavanagh64
    @liamkavanagh64 2 роки тому +5

    Finally a tutorial that actually motivates me to learn. These are surprisingly rare so thanks a lot!!

  • @amazedaisy
    @amazedaisy 3 роки тому +2

    Fantastic tutorial! The clearest explanation of auto layout I've stumbled across.

  • @pragadeeshpragi7580
    @pragadeeshpragi7580 3 роки тому

    subscribing to you coz this is the first video on auto-layout that is clearcut and makes sense! thanks!

  • @Franciscormj
    @Franciscormj 3 роки тому

    OMG I can't believe that I have found a channel that explains exactly how to use auto layout. Your methodology is amazing 👏

  • @katoetonic
    @katoetonic 3 роки тому

    I just came across this video and this is by far the best explanation of auto layout. Thank you

  • @rosscoffeegames
    @rosscoffeegames Рік тому

    Thank you Brother! This was the first tutorial on Auto-Layout that didn't make my brain melt and was easy to follow.

  • @vince2nd
    @vince2nd 3 роки тому

    Man, just the opening line was enough to make me change my workflow. As a Figma OG I used to draw rectangles, grouping etc. Thanks for explaining it

  • @humairanaeempasha2362
    @humairanaeempasha2362 2 роки тому +1

    That is one good tutorial for all the people new to auto layout!
    Kudos to you for putting up such nice content!

  • @edwinigwebuike7271
    @edwinigwebuike7271 3 роки тому

    I have been learning UI/UX and this guy has been nothing but Amazing and Helpful… i love you bro🥺

  • @Always_help_when_you_can
    @Always_help_when_you_can 2 роки тому +1

    You are a super fun teacher, thanks so much, as time goes by, we all see Figma bypass them all. Thanks again Jesse, you are one of the bests out there.

  • @gautamkhatter
    @gautamkhatter 2 роки тому

    The best explanation about auto layout in Figma.

  • @CW-jc9kl
    @CW-jc9kl 3 роки тому +26

    You do an excellent job. The energy you bring and your ability to teach are better than most I’ve seen. Thank you.

    • @JesseShowalter
      @JesseShowalter  3 роки тому

      Wow, thank you! I appreciate that so much

    • @daltanionwaves
      @daltanionwaves 3 роки тому

      He definitely has a talent, or at least a skill for breaking stuff down in a simple flow that's robust but not redundant. Which is harder to do than one might think. This guy should be working in UX.

  • @AmiraMohamed-jf5tl
    @AmiraMohamed-jf5tl 2 роки тому

    The video is truly helpful. I came here after watching a Figma tutorial and reading an article they have on auto layout but it was hard to follow. Your way of explanation is way easier and certainly more fun to watch.

  • @kunjikagogna2387
    @kunjikagogna2387 3 роки тому +1

    Thank you for explaining the minute details of Auto Layout, Exactly what I was looking for!

  • @GraveRave
    @GraveRave 3 роки тому +4

    Love the vibe you bring to this channel and the process, makes it easy to follow along. Nice one!

  • @shivanikalkeri2370
    @shivanikalkeri2370 3 роки тому

    I was so confused about Auto Layout before watching your video! Thanks a ton :)

  • @googlyeyes2758
    @googlyeyes2758 3 роки тому

    WOW!!! One of the best Figma videos, ever! Thank you and bravo!! *thumbs up*

  • @alenopsar
    @alenopsar 3 роки тому

    No 20 min video with extra talk? Love it! straight to point thank you.

  • @hiimhuaqi9829
    @hiimhuaqi9829 3 роки тому

    Btw, I really love the tone of your voice and your passion for explaining Auto Layout for us. Thanks, Jesse ^_^

  • @jaggahir2151
    @jaggahir2151 3 роки тому +5

    That was bloody awesome. I was looking for hours for a decent video to explain tables and auto layouts! A job well done and thank you ❤️

    • @JesseShowalter
      @JesseShowalter  3 роки тому

      Thank you so so much! I’m so stoked i was able to help you out!

  • @sentiasatransformasi
    @sentiasatransformasi 2 роки тому

    this is extremely helpful. you are a really great teacher. very good at teaching this somewhat complicated topic with the examples n everything

  • @dhirajkumarchaudhary9642
    @dhirajkumarchaudhary9642 3 роки тому

    can't explain how wonderful the video was.

  • @jaredreyphoto
    @jaredreyphoto 2 роки тому

    I agree this was such a great explanation of auto layout that I was not getting by watching the video tutorials from figma. Great job.

  • @UnknownUser-re6yg
    @UnknownUser-re6yg 2 роки тому +1

    Right on point. Excellent explanation. Not a single second gone to waste. Please keep up the good work.

  • @brookewebster3789
    @brookewebster3789 2 роки тому

    Thank you so much for breaking this down into all the details and not talking over all us n00bs, I understood perfectly. :D

  • @stephanieoparaku
    @stephanieoparaku 3 роки тому +1

    The first auto-layout video I realllyyyyy loved. So helpfull. Thanks Jesse.

  • @Kronos876
    @Kronos876 3 роки тому

    Let's auto layout inside auto layout which is inside auto layout with some auto layout inside! Love it!

  • @nanimattt
    @nanimattt 2 роки тому

    amazing, this changed completely my workflow with figma. thank you!

  • @jessicasaak735
    @jessicasaak735 3 роки тому

    Wow! I'm following along with the tutorial, and as soon as a question comes up or I don't get something, a moment later you've addressed it! Super thorough and very much worth watching!

  • @domesticdomination
    @domesticdomination 2 роки тому

    The most legit tutorial to date.

  • @anastasiakossler8571
    @anastasiakossler8571 2 роки тому

    I would like to thank you for the way you present information!!! Thank you! Thank you!

  • @bykevintitus
    @bykevintitus 3 роки тому +2

    Thank you Figma for this needed feature and thank you Jesse for bringing this to my attention!

  • @Miraj.miraj000
    @Miraj.miraj000 2 роки тому

    Thank you so much! The way you're explaining is fantastic!

  • @catherinetillack27
    @catherinetillack27 3 роки тому

    Thanks!

  • @annieky1401
    @annieky1401 3 роки тому +2

    Thanks for creating this, Jesse! Haven't used figma in forever and my new team uses it - this was by far the clearest explanation to get me up to scratch again!

  • @jonjonelliii
    @jonjonelliii 2 роки тому

    fastest tutorial i have ever seen GOOD JOB BRO

  • @idomskyyael5480
    @idomskyyael5480 2 роки тому

    You're the best teacher I've ever had. no lie XD

  • @smartsteevy
    @smartsteevy 2 роки тому

    Couldn't explain it any better. Thank you so much

  • @suzettegibson350
    @suzettegibson350 2 роки тому

    A detailed but easy to understand explanation of auto layout, Thank you!

  • @bacalekevin8763
    @bacalekevin8763 2 роки тому

    Your learning style is owesome thanks for this great tutorial!

  • @floragordon9211
    @floragordon9211 2 роки тому

    Thanks

  • @johnathanmontelongo9049
    @johnathanmontelongo9049 2 роки тому +1

    Game changing AND amazing results from this tut + a Figma learning curve for a project at work. Thanks, Jesse!

  • @sherlynefriza4788
    @sherlynefriza4788 3 роки тому

    you are my online UX mentor. Thank you so much!

  • @anastasiia579
    @anastasiia579 2 роки тому

    I love the way you explain things, that is adorable! Everything is clear and easy with you! Thanks a lot ❤

  • @evgeniyryndin8361
    @evgeniyryndin8361 Рік тому

    Absolutely the best explanation around.

  • @Fjjdcreative
    @Fjjdcreative Місяць тому

    Well explained, I’m here for more.
    Thank you 🙏

  • @vickywang5860
    @vickywang5860 3 роки тому

    I was trying to figure out how can I drop a responsive makeup as CSS media quarry, here is the answer. Thank you!

  • @elfacuparede
    @elfacuparede 3 роки тому +1

    Amazing as always! Let's keep doing auto-layout videos pleaseeeeee!

  • @Underhills
    @Underhills 3 роки тому

    Thanks for sharing brah. Like your no nonsense tutorial and will follow. Keep'em coming!

  • @babyzoe93
    @babyzoe93 3 роки тому

    so far, the best tutorial on Auto Layout to me. Great job Jesse!!!

  • @patriciafurquim726
    @patriciafurquim726 3 роки тому

    omg thats amazing!! Im new to all of this, Im a UX / UI student and this is way ahead of what I've learnt just yesterday! Thanks for sharing!!! New follower here!

  • @itstinachan
    @itstinachan 3 роки тому

    Greatest figma auto layout tutorial ever!!!

  • @tarekview3469
    @tarekview3469 2 роки тому

    Wow! @jesseshowalter, Thank you so much for explaining about the auto layout as a very neatly.

  • @ashesh7204
    @ashesh7204 3 роки тому +1

    Amazing! Easy to follow & understand! Tysm!

  • @carolinamcgarity2135
    @carolinamcgarity2135 3 роки тому +2

    This was so incredibly helpful, THANK YOU! I'm a junior designer and this is the most helpful video I've found on Auto Layout.
    (P.S. tangentially, you should do a video on your studio decor, the lighting is on point!!)

    • @JesseShowalter
      @JesseShowalter  3 роки тому +1

      I’m so stoked I was able to help you out!yeah!!!! Mahalo!

  • @BobbyCharlz
    @BobbyCharlz 2 роки тому

    Thank you for helping me understand this powerful feature.

  • @KubenNaidooKZN
    @KubenNaidooKZN 2 роки тому

    Damn, you are so precise and clear. Great job!!!!

  • @invisibArtz
    @invisibArtz 3 роки тому

    I dont know but there is something about the way you teach that I like so much. Pray I find out what it is and then I will tell you. I just subscribed. Thanks

  • @marcusv.matossouza3536
    @marcusv.matossouza3536 3 роки тому +1

    Thanks for helping auto, definitely helped me a lot with all the concepts that I need to start playing a little bit more with figma

  • @creaquang
    @creaquang 3 роки тому +1

    Huge thank you! You're making my design work so easy right now.

  • @emilianofilm
    @emilianofilm 3 роки тому

    You are amazing Jesse! Priceless knowledge here

  • @gabyacuna6752
    @gabyacuna6752 3 роки тому

    Thank you for this, I feel that I love you, the best explanation that I have seen on auto layouts!

  • @alabi-williamsisaacprince646
    @alabi-williamsisaacprince646 2 роки тому

    Just one video and I'm hooked.

  • @elkanahnalaya
    @elkanahnalaya 2 роки тому

    you are a good tutor ,wish algorithms class sound easier like this lol

  • @adityadas9218
    @adityadas9218 2 роки тому

    Thanks for the very important and easy explanation. I got all the points. 😊

  • @AhmedMubarak255
    @AhmedMubarak255 2 роки тому +1

    Good stuff right here! I love your tutorials man and the energy you bring while designing shows it's fun. Keep doing what you do

  • @clintmckoy
    @clintmckoy 3 роки тому +1

    Thanks Jesse! Great content as always bro. Keep it coming!

  • @GeorgeDrumm
    @GeorgeDrumm 2 роки тому

    fantastic, your a great teacher Jesse - George from the UK, London

  • @itwasnoteasy
    @itwasnoteasy 3 роки тому

    Extremely helpful video short and to the point. Great video presentation.

  • @sajeevyadav9
    @sajeevyadav9 2 роки тому

    Clear and Crisp explanation bruh!!

  • @LadySingsTheBooze
    @LadySingsTheBooze 5 місяців тому

    your lessons are really helpful, thank you.

  • @mishanpatel9219
    @mishanpatel9219 2 роки тому +1

    This is amazing man, loved the way you explain everything, so easy to understand. Keep it coming and thank you so much for this :)