Mastering New Figma Auto Layout - 15+ Examples 📎 With Practice File

Поделиться
HTML-код
  • Опубликовано: 11 ноя 2024

Комментарии • 172

  • @udayrajsathe
    @udayrajsathe  4 года назад +3

    📎 Link to Practice File
    www.figma.com/community/file/915339795040977120/New-Auto-Layout-w%2F-RUclips-Tutorial

  • @ishitta7
    @ishitta7 2 года назад

    The best explanatory video on Auto-layout and believe me I have watched over 20! Thanks for this!

  • @adedapotiamiyu6326
    @adedapotiamiyu6326 3 года назад

    Figma should hire you to give tutorials...I love every minute

    • @udayrajsathe
      @udayrajsathe  3 года назад

      I’m touched by this. It’s my wish too. Thanks Adedapo 😊

  • @igorrocha1845
    @igorrocha1845 3 года назад +18

    I've only watched 9 minutes and I already consider this as being one of the best videos on Figma.
    Thank you, really.

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Wow... Delighted to know that it helped.
      Stay tuned for more 🤘🏽

  • @sandipanchoudhury7131
    @sandipanchoudhury7131 2 года назад

    One of the best videos regarding autolayout. Such an easy and detailed explanation!

  • @Sameeeerx
    @Sameeeerx 2 года назад

    TBVH watched like 20+ vidoes but your's method of teaching was very amazing like wow 👌👌👌👌

  • @manishpatil212
    @manishpatil212 Год назад

    @udayrajsathe you have broken down the subject very well and explained it with clarity! How and when to use the Auto layout is more important than explaining what it is and what it does. Kudos for this tutorial!

  • @yugantsonawale
    @yugantsonawale 2 года назад

    Great tutorial i must say Figma will be glad to have tutorials made by you for its users.

  • @radhikakulkarni7081
    @radhikakulkarni7081 3 года назад

    The best Auto Layout Tutorial I have come across! Thanks a lot !

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thanks Radhika. Glad it helped 😊

  • @cindypatricia1262
    @cindypatricia1262 2 года назад

    the best figma auto layout tutorials!! thank you Udayraj!

  • @sagarrana9429
    @sagarrana9429 2 года назад

    This is one of the best videos on you tube, thank you so much for the video.

  • @artchinda
    @artchinda 2 года назад

    best auto-layout tutorial I've seen

  • @rishidatta8178
    @rishidatta8178 3 года назад

    Thankyou so much for these video. I have completely understand Auto layout topic now after seeing so many videos.Thankyou.....

  • @Sameeeerx
    @Sameeeerx 2 года назад

    What an amazing video & what a polite and easiest way to teach Loves it Awsome 👍

  • @sk8trsurfr
    @sk8trsurfr 2 года назад

    Honestly one of the best explanations of Auto Layout in Figma. Thank you Udayraj!

  • @emilytchuu9876
    @emilytchuu9876 3 года назад

    I wished I have seen your videos before the other tutorials. It was clear and no useless talking :)

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thank you Emily. That’s what I aim to make 🤟

  • @karansuri1908
    @karansuri1908 3 года назад

    This is the best video on figma auto layout. Thankyou so much

  • @nisheethranjan1188
    @nisheethranjan1188 2 года назад

    I saw so many videos but this was the easiest of them all. Thanks man for making my life easy!! Keep going.

  • @CreativityBucketlist
    @CreativityBucketlist 2 года назад

    This is probably one of the best Figma tutorials I’ve ever seen. Thank you so much for this!

  • @lalitbarai
    @lalitbarai 3 года назад +2

    Tutorials like these makes you feel more confident & at the same time enhances your skills as well. Thank you for your wonderful contribution.✨

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Thanks Lalit. Your comment really made my day 😊🤗

  • @wild_encounters007
    @wild_encounters007 3 года назад

    Very Helpful, Good tone of voice !

  • @amarinapinheiro
    @amarinapinheiro Год назад

    Amazing tutorial! Unfortunatly figma chances all the time, so take a bit more time to figure where is everything

  • @kammaisuria7659
    @kammaisuria7659 4 года назад +2

    I must congratulate you Udayraj, your tutorials are really well explained and provide excellent examples. Keep up the great work!

    • @udayrajsathe
      @udayrajsathe  4 года назад

      This is so encouraging. Thanks 😄

  • @khanhnguyen5637
    @khanhnguyen5637 2 года назад

    Thank you for this video! It saved me time working

  • @ivanawijaya7835
    @ivanawijaya7835 2 года назад

    I've been struggling with auto layout for quite some time. And this tutorial helps me a lot! thanks for making such a great content!

  • @sahilaujla
    @sahilaujla 3 года назад +1

    Thank You So much bro!!...Your content is awesome....Just keep working hard and your channel will definitely grow...Keep it up 👍👍

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Glad to know that it helped. Thank you so much 😃

  • @rohanbhattacharya
    @rohanbhattacharya 3 года назад

    I was stuck with something. I watched this and I am telling you this is a superb tutorial!!! Thanks :)

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thanks Rohan. Stay tuned for more 😊

  • @chandnianand584
    @chandnianand584 3 года назад

    Very well explained all the concepts

  • @DebjeetMajumdarYT
    @DebjeetMajumdarYT 2 года назад

    Loved it! Very helpful.

  • @md.iqbalhossain1794
    @md.iqbalhossain1794 3 года назад

    You have covered almost everything ! Thanks

  • @Uxashish
    @Uxashish 3 года назад

    Thanx a lot sir , for putting that much amount of effort, learning a lot from these tutorial. All of your tutorial are very well planned & easy to grasp.

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Thanks a lot Aashish for all the appreciation and support 😊

  • @zishanahmad5572
    @zishanahmad5572 Год назад

    Excellent Work.

  • @andtothewestamerica
    @andtothewestamerica 3 года назад +1

    Such a well done video, thank you!!

  • @karenbeal6137
    @karenbeal6137 3 года назад +3

    Thanks for this - very clear - mostly! However in the example at 17:56 _ on the horizontal responsive design component - you fix alignment really quickly at the end without explaining what you did. It would be super helpful if you could describe each step you go through rather than skipping over these steps - for newbie Figma users like me!

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Sure Karen. I’ll keep that in mind 😊

  • @Kriti_Handcrafts
    @Kriti_Handcrafts 3 года назад

    Thanks for making this video..I had so many confusions ..but now I have a good understanding about Auto-layout

  • @The_Bobber_Men
    @The_Bobber_Men 3 года назад

    Fantastic, you make this boring topics easy to learn.💖 thank you.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      I'm so happy to hear this 😎
      Keep watching and don't hesitate to reach out to me on Instagram/LinkedIn

  • @tirthsuthar3528
    @tirthsuthar3528 3 года назад

    needed this video so badly! after the update it was too confusing! thanks for the video! keep putting such videos bro.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thanks bro 😌
      Keep watching 🤞🏼😎

  • @poncardas
    @poncardas 3 года назад

    New subscriber here! Great video man!

  • @AshishTibrewal
    @AshishTibrewal 4 года назад

    Thanks for sharing this Udayraj. Brilliant explanation and examples

  • @tinygreenturtle
    @tinygreenturtle 3 года назад

    Great quality of a content

  • @andrescarrilloestrada984
    @andrescarrilloestrada984 4 года назад

    Great video you are a natural at this !

  • @ngocquynhnhuha6271
    @ngocquynhnhuha6271 3 года назад

    I struggled with Figma at beginning, but your videos save my time
    You provide the clear instruction & link to practice, it's so amazing
    Keep up with posting videos frequently, bro

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thanks a lot. I'll definitely start posting more content soon. Stay tuned.

  • @TheGitsart
    @TheGitsart 3 года назад

    bhai aapke videos kafi helpful hote he, aap bahot acchese explain karte ho, mujhe sirf ek question he, figma me jo bhi website banate he usko hum publish kar sakte he kya? ya figma sirf practice ke liye hi he?? plz ans me thanx

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Thanks 😊
      We can only design websites in Figma but not publish them as it is.

  • @shamsudeen9475
    @shamsudeen9475 3 года назад

    Very well explained

  • @AkshayKumar-id1ye
    @AkshayKumar-id1ye 2 года назад

    It was really awesome to have more grasp on Auto layout feature and I wanna give one feedback, please show slowly how you do things rather than speaking and doing it faster coz. you are a pro and it might get beginner puzzled and might restrict them only to think, how he did that?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Thanks for the feedback :) Will slow it down in future videos.

  • @prashantgotad3739
    @prashantgotad3739 3 года назад

    This video is very useful thank you

  • @smilli6415
    @smilli6415 2 года назад

    when making cards..how did you do fixed width horizontally and hug content vertically and can you explain what that means ?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      I didn't want cards to have flexible width thus > Fixed width horizontally.
      At the same time it means that the content should adapt vertically. So you can use Hug Content to automatically adjust height.

  • @tracyocalllaghan
    @tracyocalllaghan 3 года назад

    Great video! The pracrice file doesn't have the auto layout applied however when I open it in figma?

    • @udayrajsathe
      @udayrajsathe  3 года назад

      That’s intentional 😊 So that you can follow along with the video and try it yourself. I believe that the best way to learn it is by doing it.

  • @virajdeo
    @virajdeo 2 года назад

    Lai bhaari!👌

  • @sattisatpal1566
    @sattisatpal1566 3 года назад

    Explained very well👍

  • @ajayji1009
    @ajayji1009 4 года назад

    Nice Udayraj! Also please try to make a video on the difference between Style and Component :)

  • @ReadyDesignerOne
    @ReadyDesignerOne 4 года назад

    Very nice content, haven't completed all yet, but great tips. Thank you

    • @udayrajsathe
      @udayrajsathe  4 года назад

      Glad you enjoyed! Thanks a lot 😎

    • @ReadyDesignerOne
      @ReadyDesignerOne 4 года назад

      @@udayrajsathe hey thats cool. Variants is another cool feature. Making a design system will be more fun

  • @sayekatchakraborty4621
    @sayekatchakraborty4621 4 года назад

    Yesss.. waiting is over🤘

    • @udayrajsathe
      @udayrajsathe  4 года назад

      Did you like it? Let me know if you have any suggestions.

  • @chiaza7735
    @chiaza7735 2 года назад

    Thanks. At 9:58, what if I want to shrink all the circles to a smaller size while having them maintain their circular shape and the relative distance between them? I've tried, but whenever I shrink them to a smaller size, the circles always distort in shape and the padding between them and the outer box increases.

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Sorry for delayed response. Is this resolved already?

  • @Uxashish
    @Uxashish 3 года назад

    Another amazing tutorial 🔥🔥

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Thanks Aashish 😊
      I am really glad to see that you're enjoying the content.

  • @oykumdiker8704
    @oykumdiker8704 2 года назад

    time slot tags stays the same when you narrow the frame. is there a way to get 9:00 PM to the second line with autolayout when the frame narrows?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      I think setting up text to Auto height will fix the issue. Feel free to ping me on LinkedIn / Insta. Would love to help

  • @kshitijj2
    @kshitijj2 3 года назад

    Bro you are awesome 😎😎

  • @Tawfik_TH
    @Tawfik_TH 2 года назад

    Thanks a lot!

  • @adityapatil1839
    @adityapatil1839 3 года назад +1

    bhari video hota

  • @krunalkushte5552
    @krunalkushte5552 3 года назад +1

    Need more information in interactivity for prototyping

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Have you watched my Prototyping and Interactive prototype videos ?

    • @krunalkushte5552
      @krunalkushte5552 3 года назад +1

      @@udayrajsathe No, actually i am going through all the video's

  • @MeetRayka
    @MeetRayka 3 года назад

    thank you for making this!

  • @Sameeeerx
    @Sameeeerx 2 года назад

    HI There!! Could you please make same kind of video for the New Figma Update [Config 2022]?
    PLEASE?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      I was on a break. I'm working on new series with all updates in 2022.

  • @asimqamar7720
    @asimqamar7720 3 года назад

    What if we want to add a small button in "Alert and Dialogue" section.
    I mean suppose I want to add a cart button at the bottom right of the card, So if apply fill container on it, it will cover the whole bottom of that card, I wanna avoid that, I just want that button to be square shaped at bottom right.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      then in Resizing options you can select Fixed width instead of Fill container

  • @stanmx
    @stanmx 3 года назад

    Thank you for shared.

  • @saepuloh475
    @saepuloh475 3 года назад

    Thank brotherr!

  • @bayazidibrahim2263
    @bayazidibrahim2263 3 года назад

    in complex auto-layout my paragraph is expanding only right to left.it not expanding left to right can you help to solve this. It acts as a fixed thing.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      It might be because of Text alignment and Frame constraints. I can tell better if you can share your file with me to review.

    • @bayazidibrahim2263
      @bayazidibrahim2263 3 года назад

      @@udayrajsathe thanks brother,
      I solve that problem 5 minutes ago. Figma dosn't allow any line breaks in paragraph on auto-layout .I didn't known about that.thanks

  • @subtlechuckles185
    @subtlechuckles185 3 года назад

    This was incredibly helpful! thank you so much Udayraj! I had one question not related to auto layout. When you were entering in the dates on the calendar, did you use a shortcut to tab through the text fields? I couldn't figure out how to do it aside from manually.

    • @udayrajsathe
      @udayrajsathe  3 года назад +2

      Just regular clicks. I actually fast-forwarded the video 😅

  • @smilli6415
    @smilli6415 2 года назад

    can you do adjust content video.. thats super confusing ..

    • @udayrajsathe
      @udayrajsathe  2 года назад +1

      Noted! I'll try to work on that video.

  • @amarinapinheiro
    @amarinapinheiro Год назад

    14:24 This part simply didn't work for me at all. the buttons were responsive, but the text vanish on the clip content. Tried everything

  • @j.carvalho777
    @j.carvalho777 3 года назад

    man! i love u! :D

  • @emmanuelcelis1609
    @emmanuelcelis1609 3 года назад

    Can we show a prototype website responsive from desktop to mobile or we need to create one prototype for each one?
    Thank you for the video!

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Hi Emmanuel,
      We need to create one prototype for each one right now. But Figma is making that task easy for designers 😎

    • @emmanuelcelis1609
      @emmanuelcelis1609 3 года назад

      @@udayrajsathe so we design each version and developers make one website with both versions?

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Yes. That's absolutely correct

  • @fajleyrabbe2930
    @fajleyrabbe2930 4 года назад

    Helpful video.

  • @ashikurrahman9327
    @ashikurrahman9327 3 года назад

    3:39 If i add auto layout to list and give the name of the persons in the list then the aligning of the connect button is collapsing ...What should i do ?/Plzz help bro :)

    • @udayrajsathe
      @udayrajsathe  3 года назад

      I'll be happy to help. Can you ping me on Linkedin or Insta? so that we can chat better and share screenshots if needed :)

    • @ashikurrahman9327
      @ashikurrahman9327 3 года назад

      @@udayrajsathe Thank you for your consideration .I will contact you on instagram as i get free.Thank you

  • @aniketjoshi7518
    @aniketjoshi7518 4 года назад

    Please create an app or webdesign using all features in figma in one design, so it's possible to practice and understand it in one go. Thank you UDAYRAJ

    • @udayrajsathe
      @udayrajsathe  4 года назад +1

      Complete Website Design Tutorial is under process. Planning to post it in couple of weeks. Also started working on Mobile app idea. Stay tuned 😀😄

    • @aniketjoshi7518
      @aniketjoshi7518 4 года назад

      @@udayrajsathe Thank you UDAYRAJ for taking action on my request and very great full that you are sharing such important knowledge.

  • @uxconquer7441
    @uxconquer7441 3 года назад

    that's great.

  • @TechMantra2
    @TechMantra2 3 года назад

    Whoever disliked it isn't from the design background. May God bless that homosapien

  • @pvsabnis
    @pvsabnis 4 года назад

    Game changer feature....!! XD in dust now :D

    • @udayrajsathe
      @udayrajsathe  4 года назад

      Design tool competition is always good for us 😎😀

  • @joanerhabor3233
    @joanerhabor3233 2 года назад

    I tried and tried everything but the testimonials are not responsive. Every other thing is. What am I doing wrong?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Must be layering issue. Can you share a file with me at ‘udayrajsathe@gmail.com’ to have a look?
      You can also ping me on LinkedIn or Insta and we can discuss more 🤟

  • @shahriarrafi4975
    @shahriarrafi4975 4 года назад

    Waiting for this

    • @udayrajsathe
      @udayrajsathe  4 года назад

      Took me 12+ hrs to create this. Let me know your feedback 😀

    • @shahriarrafi4975
      @shahriarrafi4975 4 года назад

      @@udayrajsathe Amazing

  • @onaykeren7350
    @onaykeren7350 3 года назад

    nice

  • @hasinaparven4413
    @hasinaparven4413 3 года назад

    great

  • @hiteshgandhi21
    @hiteshgandhi21 3 года назад

    I am an auto layout pro 🤩

  • @jayjitporel1666
    @jayjitporel1666 3 года назад

    We cant see due to the subtitles! 👀

    • @udayrajsathe
      @udayrajsathe  3 года назад

      You can always turn off subtitles 🤟😊

  • @smilli6415
    @smilli6415 2 года назад

    great examples but you went very fast .. couldnt understand

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Sorry for that 😅
      Will try to slow down in the next video.

  • @hirakdas5444
    @hirakdas5444 2 года назад +1

    the video could have been made slower. it is way too fast to consume all the information at such a pace.

  • @ahmdsaad10
    @ahmdsaad10 2 года назад

    This video is more than amazing ... Thanks a lot!. If we have a question, how can I contact you?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Hey, you can contact me on Linkedin or Instagram

  • @MrGonebonanza
    @MrGonebonanza Год назад

    thanks for the tutorials friend. you are a great help!

  • @tlong-productions
    @tlong-productions 3 года назад

    Thank you