How To Design RESPONSIVE UIs With AUTO LAYOUT and Fill Container (Figma Tutorial)

แชร์
ฝัง

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

  • @rawan9018
    @rawan9018 9 หลายเดือนก่อน +4

    this is the first time in my whole life I could make a responsive design in FIGMA really appreciate that !

  • @ArtFlex.Official
    @ArtFlex.Official 2 วันที่ผ่านมา

    this is the first time in my whole life I could make a responsive design in FIGMA really appreciate that !

  • @arielaw4
    @arielaw4 6 วันที่ผ่านมา

    Thank you! This is exactly what I needed! Very clear video

  • @fabsync
    @fabsync 6 หลายเดือนก่อน +1

    The best tutorial on the subject! The real deal!!

  • @christophercapio5005
    @christophercapio5005 ปีที่แล้ว +7

    this 10 min video solved like 80% of my figma problems

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

    Wo your style of explaining is Absolutely amazing the pace and the examples and the tutorial is perfect.

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

    Ugh finally a video I can understand ! What to do what if it an image card ? I’ve tried it with a image but having issues making it move

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

    You can't imagine how badly I needed this. Thank you so much. I've just subscribed too.

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

      Same here, was looking for this solution for a while now! Subscribed as well haha

  • @AnumA.Nafees
    @AnumA.Nafees 6 หลายเดือนก่อน +1

    i was struggling with auto layout but after watching this tutorial now i am able to make responsive design

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

    I found the absolute positioning to be very useful. Thanks!

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

    This is the first video about auto layout that I finally got it and I've watched a lot 😭😭
    Thank you so much definitely subscribing.

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

      I'm glad I could help!

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

      @@mavidesign Explain, please if we have 3 cards with button, how to make it so that when the content in 1 one card increases, the height of all others is equal to this card + so that the button is always at the bottom?

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

    It had been 3 days since I was facing problem in auto layout now it's resolved. :)

  • @waste-fellow-28
    @waste-fellow-28 ปีที่แล้ว

    Yo, random first video itself is enough to become a fan of this channel😭♥️

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

    This makes figma the best tool

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

    Your tutorials are really amazing, helpful, in-depth, and to the point! Thanks fro all these helpful tutorials!

  • @Moon-luccy
    @Moon-luccy หลายเดือนก่อน

    valuable content, thanks

  • @DuongNguyen-ju1nl
    @DuongNguyen-ju1nl 6 หลายเดือนก่อน

    very helpful thank you sir!!!

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

    Like always, a legend.

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

    Thank you!

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

    Very nice thank you

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

    Thank you so much for the tutorial!

  • @toussaintlouverture1-n56
    @toussaintlouverture1-n56 ปีที่แล้ว +1

    I tried making only layout like in 6:40 but it didn't work the fill container option is not showing why is that ?

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

      I think you did not select the objects first. You have to select all the objects (or child objects within the frame) Right? As he did by pressing "enter in this case. I hope It helps.

  • @QuynhNhu-cj3lm
    @QuynhNhu-cj3lm ปีที่แล้ว

    Thank you so much. It's helped me a lot.

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

    thanks a lot

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

    where did you get the number '72 ' from for rounding the icon? such a random number

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

    Thank you ☺

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

    Hi, is it possible to make the text size auto-responsive and auto-scaling every time I resize the frame?
    I want to create a fully responsive landing page where the text automatically resizes for each breakpoint screensize without creating three separate breakpoints (Desktop, Tablet, Mobile).
    For instance, the text will be 64px on a 1440px Desktop, 48px on a 768px Tablet, and 32px on a 360px Mobile, all on a single page without creating three different breakpoints for Desktop, Tablet, and Mobile. This refers to the actual text size, not the frame with constraints and auto-layout. Like CSS viewport width.

  • @rob.creative
    @rob.creative ปีที่แล้ว

    Why did you have to recreate it to get to this state. Couldn’t you make adjustments to the other one to get the same result?

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

    Hi, I can't seem to have a "fill" option after putting the texts and button in one frame. Do you know what's wrong with that? thankyou.

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

      You probably didn’t enable auto layout

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

      you have to press 'enter' after creating the autolayout, which enables the 'fill' option

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

    I am completely new to figma designing, I created a complete app UI just by watching your videos but something that I didn't realize is that my Design isn't responsive and now I've completed my design, I can't ungroup each element obviously...but is there any way to make it responsive now?

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

      This is quite a complex process and I'm not able to cover it thoroughly over a YT comment.
      To get more specific help and feedback with your project, please join my free Discord server.
      You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
      I'm unable to help everyone over TH-cam - thank you for your understanding!
      Mavi

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

    I couldn't understand how to align the text properly, by not allowing it to overlap a button 😤 when resizing it. I needed an hour to come to idea that it should be set to auto height. Probably this will be helpful for someone....

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

    Everything changes when it becomes an instance or component

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

    👌👌👌

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

    A bit random.

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

      Random? What do you mean by random?

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

    Thanks!

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

      Much appreciated, Jimmy! 😍