Learn Figma Auto Layout in 30 Minutes | FREE COURSE

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 มิ.ย. 2024
  • ► Download unlimited Figma templates with Envato Elements: elements.envato.com/graphic-t...
    If you’re going to learn Figma for UI design, you need to learn Auto Layout-it will make your life as a designer ten times easier! Adi Purdila will teach you how to use Auto Layout during this course, in just 30 minutes.
    00:00 Introduction
    02:08 Getting started with Figma Auto Layout
    08:32 Changing spacing and padding
    17:46 Changing alignment
    26:19 Working with different spacing modes
    31:32 Resizing and auto layout
    Read more on Figma Auto Layout on Envato Tuts+: webdesign.tutsplus.com/tutori...
    Discover more Figma features: • A to Z of Figma: Tips ...
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Envato Tuts+
    Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
    Envato Elements
    All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
    ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?...
    ► Subscribe to Envato Tuts+ on TH-cam: / tutsplus
    ► Follow Envato Tuts+ on Twitter: / tutsplus
    ► Follow Envato Tuts+ on Facebook: / tutsplus
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

ความคิดเห็น • 144

  • @muratkaradas1483
    @muratkaradas1483 8 หลายเดือนก่อน +8

    Unlike some other videos out there that rush through topics, this one takes its time to explain things clearly. It's evident that he is focused on teaching rather than showing off! Truly refreshing and immensely helpful. Keep up the fantastic work!

  • @jimmaccormaic6689
    @jimmaccormaic6689 5 หลายเดือนก่อน +2

    Perfect in every way. I’m a Figma newbie, rather struggling getting to grips with it. This series has proved a godsend. Excellent. Many thanks.

  • @OrlandoDelgadilloLuna
    @OrlandoDelgadilloLuna ปีที่แล้ว +3

    The way you do this tutorials fits me incredible. Other TH-camrs are loud and want to make everything fast, which is good for other people, but for me, yours is the way to go. Next I'll be watching your components tutorial.

  • @rajendrachandel
    @rajendrachandel 10 วันที่ผ่านมา

    i have seen many video related to autolayou but this one is better then others

  • @pankhudilanjewar4150
    @pankhudilanjewar4150 3 หลายเดือนก่อน +1

    Thank you, You explain auto-layout very well, taking your time to break it down clearly while others explain it too quickly, making it harder to follow.

  • @user-zo8iy3fx8r
    @user-zo8iy3fx8r 11 หลายเดือนก่อน +5

    Adi, you have an exeptional skill of explaining a subject, I have watched more than 10 videos on this topic but found your video the most insightful and helpful! You are a real gem!

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      Wow, thank you!

  • @wherethereswilltheresaway3297
    @wherethereswilltheresaway3297 8 หลายเดือนก่อน +3

    🤯 This is a low key introduction to CSS, flex. Wish I would have found your tutorials and learned Figma at the beginning of the journey to Web dev. Your videos are extremely helpful for learning the UX/UI design planning, but also solidifying concepts from HTML and CSS. Thank You!

  • @autumnbecomesher
    @autumnbecomesher ปีที่แล้ว +1

    Thanks for this incredibly helpful video! I'm going through another course (paid) and couldn't figure out what he was doing! You explain everything so well. Thanks again. This is gold.

  • @SunilBohara21460
    @SunilBohara21460 3 หลายเดือนก่อน

    well explained. your method of teaching is very simple and easy to understand which every teacher or tutor should have.

  • @jaredtrp
    @jaredtrp ปีที่แล้ว +4

    Thanks so much for this! I'll be honest, for some reason that I can't explain I was shy about "overusing" Auto Layout, and it was limiting my abilities and efficiency. Seeing you use it here without hesitation helped me see that the pros use it quite a bit.
    And thanks for dropping some serious shortcuts bombs in spacing and padding section. Fantastic!

  • @kaleabblackboy3564
    @kaleabblackboy3564 ปีที่แล้ว +10

    Best teacher keep going bro🙏❤

  • @caseycho8485
    @caseycho8485 11 หลายเดือนก่อน +1

    I've clicked through many other auto layout tutorials, and this is the clearest, easiest to follow, and most practical examples!! Thank you! Subscribed!

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      Wow, thanks!

  • @pitchblacknight
    @pitchblacknight 4 หลายเดือนก่อน +1

    Your voice and delivery completely click with my brain. Thank you :)

  • @djeehan62
    @djeehan62 ปีที่แล้ว +1

    Definitely a very instructive video, thanks !

  • @Jdadoosey
    @Jdadoosey 5 หลายเดือนก่อน

    This is by far the best tutorial ive watched on auto layout

  • @creatoratplay
    @creatoratplay ปีที่แล้ว

    This was really helpful. Thank you!! I didn't know how to make each column of a table align with different content in its rows. 🙌

  • @lprado1979
    @lprado1979 ปีที่แล้ว

    your tutorials are the best, very clear and simple

  • @tanyameshram445
    @tanyameshram445 4 หลายเดือนก่อน

    Thank you for such an incredible video and for helping us newbies out there!

  • @desig1rl
    @desig1rl 4 หลายเดือนก่อน

    best tutorial i learned while at the gym! so clearrrr

  • @basudevmoharana8142
    @basudevmoharana8142 9 หลายเดือนก่อน

    Best thing is his calmness and attention to detail and soft and beautiful communication skill ❤

  • @mohammedazmy7244
    @mohammedazmy7244 ปีที่แล้ว

    one of the most instructors i love always to learn from it adi pordila thank you so much

  • @philphilphil
    @philphilphil 9 หลายเดือนก่อน

    This guy is super pleasant to follow along to. Thank you Envato!

  • @moce727
    @moce727 ปีที่แล้ว +4

    Just came after finishing the web design for begginers course and it cleared me out lots of wonders I was having!! thank you very much for this!

    • @envatotuts
      @envatotuts  ปีที่แล้ว +1

      Glad it was helpful!

  • @chukwukaigboaka4619
    @chukwukaigboaka4619 ปีที่แล้ว

    This is the best tutorial I have seen on Auto layout

  • @ayodelebamisaye1622
    @ayodelebamisaye1622 ปีที่แล้ว +2

    The best explanation I’ve seen so far, Thanks for this. 👏🏽

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @tetyanamalega2742
    @tetyanamalega2742 ปีที่แล้ว +1

    great lessons and great teacher! many thanks)

  • @aall1920
    @aall1920 10 หลายเดือนก่อน

    your teaching is super patient, thanks a lot

  • @teleportkontrola2006
    @teleportkontrola2006 ปีที่แล้ว +3

    So clear and helpful, this is how tutorials should be done, thanks!

  • @user-fh8tj8rl2d
    @user-fh8tj8rl2d ปีที่แล้ว

    Thank you so much for this wonderful tutorial, it’s awesome and so helpful.

  • @malcommiya5940
    @malcommiya5940 9 หลายเดือนก่อน

    the best auto layout tutorial

  • @rabarhusen9170
    @rabarhusen9170 5 หลายเดือนก่อน

    You were born for this, thanks ❤

  • @yuusufahmad6734
    @yuusufahmad6734 5 หลายเดือนก่อน

    Yes, I found this video very useful. Thanks for taking your time to explain in details.

  • @surendran5421
    @surendran5421 ปีที่แล้ว

    Thanks for this video. It was very helpful for me to improve myself, and I must add that you have a lovely manner of teaching.

  • @SisiraSomaratne
    @SisiraSomaratne 3 หลายเดือนก่อน

    You explain it very well! Learning this part is very important in Figma. A planned teacher.

  • @juanlugofitness
    @juanlugofitness 8 หลายเดือนก่อน

    Adi, this was really useful and understandable. Thank you man.

  • @akinduyivictor4530
    @akinduyivictor4530 6 หลายเดือนก่อน

    Thank you, this was extremely useful.

  • @learnanddesignwithslim1513
    @learnanddesignwithslim1513 11 หลายเดือนก่อน

    This is the best so far

  • @blueberrycreamsoda
    @blueberrycreamsoda ปีที่แล้ว +1

    Finally a perfect lesson, thank you so much!

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad you liked it!

  • @roygale5404
    @roygale5404 ปีที่แล้ว +1

    Super helpful thank you. Auto layout has been this thing I know I've needed to learn for ages but watching videos on it wasn't enough to really get it and use it. I went through this following along step by step making my own elements like the ones you used and now I got it. 🙌

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Great to hear!

    • @OkonimaSolomon
      @OkonimaSolomon 6 หลายเดือนก่อน

      @@envatotutsyou’re the best thanks for helping me 😩🙌

  • @anacortils2068
    @anacortils2068 5 หลายเดือนก่อน

    Many, many thanks for speaking to a speed that allows to reflect about what you are saying 🌿 that is profesionality.

  • @hamedrasoulnejad6774
    @hamedrasoulnejad6774 5 หลายเดือนก่อน

    The best video that I have watched!

  • @guitarlikas
    @guitarlikas ปีที่แล้ว +1

    Beautifully explained. Thanks!

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @Alsa971
    @Alsa971 9 หลายเดือนก่อน

    Best video explanation for Figma auto layout 👏 Thank you

  • @stargazing0010
    @stargazing0010 2 หลายเดือนก่อน

    Amazing! well explained. Thanks

  • @utkarshsrivastava9241
    @utkarshsrivastava9241 ปีที่แล้ว

    Thank you very much for this great lecture

  • @nbulwinkel
    @nbulwinkel 9 หลายเดือนก่อน

    Thank you so much, I have been using auto kayout not really knowing its full capabilities 🤦 thanks again for explaining it in a very easy way, all the possible uses really clear things out ☺️

  • @ernesto8273
    @ernesto8273 ปีที่แล้ว +1

    This is gold!

  • @VoyagesJapan
    @VoyagesJapan 8 หลายเดือนก่อน

    I just want to follow you around so you can teach me about the world!! You're one of the best instructors on TH-cam!!! How can we find more of your individual tutes?

  • @marsko9197
    @marsko9197 ปีที่แล้ว +1

    Best tutor on the internet

  • @MarianAdamita
    @MarianAdamita 8 หลายเดือนก่อน

    Man, you're awesome !

  • @latifyay
    @latifyay 11 หลายเดือนก่อน

    Appreciate the tutorial

  • @jorgemora1175
    @jorgemora1175 ปีที่แล้ว +1

    I think that relation between this new features and how works css make easy for both design and developers communications...

  • @akhenatontubba9950
    @akhenatontubba9950 10 หลายเดือนก่อน

    Mükemmel anlatım❤ altyazı videoya eklediğiniz için ayrıca teşekkürler,bu şekilde altyazıyi otomatik çeviri ile Türkçe kullanarak izleyebildim,🎉

  • @SunshinePrecuious
    @SunshinePrecuious ปีที่แล้ว +1

    Thanks, this was really helpful.

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @abdikhaliqmohamoud3373
    @abdikhaliqmohamoud3373 ปีที่แล้ว

    The great teacher.

  • @upkaarkaur
    @upkaarkaur ปีที่แล้ว +1

    Very to the point and useful video.

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @hbshrvd
    @hbshrvd 10 หลายเดือนก่อน

    thank you so much! You explained everything perfectly

    • @envatotuts
      @envatotuts  10 หลายเดือนก่อน

      Glad it helped!

  • @abdulkadir_sobuj
    @abdulkadir_sobuj ปีที่แล้ว

    Thank you so much!

  • @keeponballin6094
    @keeponballin6094 ปีที่แล้ว

    I get it now
    Thanks Bro ❤️

  • @TheStukito
    @TheStukito ปีที่แล้ว

    Thank you for the amazing tutorials!

    • @envatotuts
      @envatotuts  ปีที่แล้ว +1

      Glad you like them!

  • @zafit02
    @zafit02 ปีที่แล้ว

    excellent tutorial

  • @priceandproduct
    @priceandproduct ปีที่แล้ว

    Learned a lot

  • @merakesh207
    @merakesh207 ปีที่แล้ว

    Great Video ♥️

  • @akpobaroesquire8864
    @akpobaroesquire8864 ปีที่แล้ว +1

    You are a good teacher. Thanks for the content. Its rich

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      I appreciate that!

  • @danitodnl5396
    @danitodnl5396 ปีที่แล้ว

    This guy taught me almost everything I know

  • @intervention_w_myself
    @intervention_w_myself ปีที่แล้ว

    This man is a born teacher and leader.

  • @majakrstic8550
    @majakrstic8550 ปีที่แล้ว

    Thank you so much for the explanation, it is very helpful !🙂

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @draydray9573
    @draydray9573 ปีที่แล้ว

    Thank you so much , your just answered all my QUESTIONS concerning AUTOLAYOUT feature :)

  • @olajumokeawal8057
    @olajumokeawal8057 ปีที่แล้ว

    LOVE THIS......REALLY HELPFUL

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @maheshkharat8226
    @maheshkharat8226 11 หลายเดือนก่อน

    thank you so much for such a valuable lesson !

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      You're very welcome!

  • @pesingitrimurthulu6316
    @pesingitrimurthulu6316 ปีที่แล้ว

    Your explanation was awesome👏

  • @lakhbawa
    @lakhbawa 3 หลายเดือนก่อน

    Thank you

  • @annagorska2487
    @annagorska2487 11 หลายเดือนก่อน

    Thank you very much!! You explain very clearly. 👍

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      Glad it was helpful!

  • @mdbicky9460
    @mdbicky9460 ปีที่แล้ว

    thanks for this awesome video Adi 😍😍

  • @danzosenseil5715
    @danzosenseil5715 ปีที่แล้ว

    Thank you so much on this tutorial

    • @envatotuts
      @envatotuts  ปีที่แล้ว +1

      Glad it was helpful!

  • @spencerm293
    @spencerm293 ปีที่แล้ว

    Thanks for posting this kind of thing! I used XD for a while and am just not sold on it at this point. Maybe it will get better.

  • @fatimasbee
    @fatimasbee ปีที่แล้ว

    Thanks for this!

  • @delusional-ibra
    @delusional-ibra ปีที่แล้ว

    this small feature make my design workflow easier

  • @sabaeldesukey7906
    @sabaeldesukey7906 ปีที่แล้ว

    Super helpful thank you 🙏🏻

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Glad it was helpful!

  • @firstignitor
    @firstignitor 11 หลายเดือนก่อน

    super helpful .. thank you

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      Glad it was helpful!

  • @johnruss7213
    @johnruss7213 ปีที่แล้ว

    Thanks

  • @avikdas8655
    @avikdas8655 11 หลายเดือนก่อน

    Respect ! 🙏
    👍👍👍
    Thank you !

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน +1

      Thank you too!

  • @rashidsaeed1504
    @rashidsaeed1504 ปีที่แล้ว

    i love it

  • @estrella4956
    @estrella4956 ปีที่แล้ว

    Hello i really enjoyed the video and learned alot I want to know how to align the content of an anboarding screens with illustrations

  • @smilli6415
    @smilli6415 ปีที่แล้ว

    please do a course on varients and new properties

  • @funwave7748
    @funwave7748 ปีที่แล้ว

    Best one

  • @cyanbeam
    @cyanbeam 11 หลายเดือนก่อน

    Superb 👌🏽

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน

      Thanks 🤗

  • @brucewayne4283
    @brucewayne4283 ปีที่แล้ว

    Excellent

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Thank you so much 😀

  • @javohirxusanov48
    @javohirxusanov48 11 หลายเดือนก่อน

    thanks you

    • @envatotuts
      @envatotuts  11 หลายเดือนก่อน +1

      Welcome

  • @mercikuzy
    @mercikuzy ปีที่แล้ว

    amazing

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Thank you! Cheers!

  • @bibiri778
    @bibiri778 2 หลายเดือนก่อน

    I felt that the content deepened my understanding of the most important and basic things that are often overlooked. thank you so much.When converting to Webflow using the figma to Webflow plugin, I expected that problems would occur with this frame and the relationship between parent and child elements. Is it possible to completely migrate to Webflow just by combining parts such as "Nav log", "Nav", and "hero image" in the figma to Webflow plugin?

  • @vahidkari145
    @vahidkari145 ปีที่แล้ว

    excellent

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      Thank you! Cheers!

  • @dailyvlogbyshivam901
    @dailyvlogbyshivam901 หลายเดือนก่อน

    really thank you sir for this info and do you have any "figma" short course for free, sir ? for beginner's.

  • @syedanishat1817
    @syedanishat1817 ปีที่แล้ว

    Please sir make videos on responsive design.

  • @talielnussen3867
    @talielnussen3867 ปีที่แล้ว

    Paid for a course, but still can't figure out what he is explaining.
    Had to come here. Way better! Thanks a lot!
    Do you have a full course please?

    • @envatotuts
      @envatotuts  ปีที่แล้ว +1

      We have lots of courses on Figma: th-cam.com/video/g6rQFP9zCAM/w-d-xo.html

    • @talielnussen3867
      @talielnussen3867 ปีที่แล้ว

      @Envato Tuts+ thank you!

  • @kashifusman5953
    @kashifusman5953 ปีที่แล้ว

    My head is in deep pain, please give answer to my question, at 39:40 he select the frame to resize it but the fill in design panel is showing to white color, when in artboard its showing orange color, how that is possible. I am having trouble resizing the that frame, please helpppp

  • @Lurex1
    @Lurex1 ปีที่แล้ว

    Best tutorial, thank you very much

    • @envatotuts
      @envatotuts  ปีที่แล้ว

      You're welcome!

    • @Lurex1
      @Lurex1 ปีที่แล้ว +1

      What I don't remember if I commented this comment or even saw this video, I think my account is hacked 😶

  • @abscondet
    @abscondet ปีที่แล้ว +1

    It's an old one, I believe. But, I want to appreciate his presentation skills. Cheers!

  • @user-fi5qz2qw4b
    @user-fi5qz2qw4b ปีที่แล้ว

    😍😍😍

  • @aniketjadhav5965
    @aniketjadhav5965 4 หลายเดือนก่อน

    Please create app design using Auto-Layout🙏🙏