Figma Tip: Using Auto layout min and max values

Поделиться
HTML-код
  • Опубликовано: 12 июл 2023
  • In this two minute tutorial, learn how to use min and max values when working with your designs. Added Bonus, learn how to use the updated text truncation and max lines feature for paragraph text.
    Figma is free to use. Sign up here: bit.ly/3msp0OV
    ____________________________________________________
    Find us on ⬇️
    Twitter: / figma
    Instagram: / figma
    LinkedIn: / figma
    Figma forum: forum.figma.com/
    ____________________________________________________
    #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023 #responsivedesign #autolayout
  • НаукаНаука

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

  • @DesignLB
    @DesignLB 10 месяцев назад +5

    I absolutely ❤ your tutorials, they're short, concise, and straight to the point! Keep 'em coming!!!! 🥰🥰🥰

  • @HansvandeBruggen
    @HansvandeBruggen 7 месяцев назад +4

    This is hands-down the single best video I’ve seen on this channel so far. It is clear, to-the-point, and respects the viewer’s time. If this presenter wrote a book, I would read it. More content like this, please!

  • @HardiRiddhi
    @HardiRiddhi 10 месяцев назад +1

    More power to the design team at Figma and Miggi for explaining this concept with such ease

  • @jessehahka
    @jessehahka 11 месяцев назад +4

    I like this mini tutorial. Thank you, it’s very helpful.

  • @princestudio8035
    @princestudio8035 11 месяцев назад +19

    You must add percentages and FR units to it. It will be a complementary part to variables and will change the way to do responsive design!

    • @person81045
      @person81045 10 месяцев назад

      FIrst we need Grid

  • @aaronmahlke
    @aaronmahlke 11 месяцев назад +4

    I love the aprupt ending

    • @figma-miggi
      @figma-miggi 11 месяцев назад +5

      Was applying a post trim in RUclips and I accidentally the ending. I didn't think it would be so abrupt or warranted a new upload. The additional thing I said was "Happy Designing."

  • @ArseniyKruglov
    @ArseniyKruglov 10 месяцев назад +1

    Figma is getting better and better ❤‍🔥

  • @maxjt11
    @maxjt11 9 месяцев назад

    Excellent tutorial, extremely efficient

  • @saas-space
    @saas-space 10 месяцев назад +1

    Great tutorial!

  • @evonevon7287
    @evonevon7287 10 месяцев назад

    really cool tips!!

  • @victorzollikofer1292
    @victorzollikofer1292 10 месяцев назад

    Wow that was straight forward

  • @proboto6680
    @proboto6680 10 месяцев назад

    lightspeed! many thx

  • @effectvision
    @effectvision 4 месяца назад

    @Figma That's great, thanks. Can you please make a video how to make the image component to retain aspect ration, while increasing and decreasing the size of the card? Thanks!

  • @amandastauffer5703
    @amandastauffer5703 7 месяцев назад +2

    Would help to have more details - the tags wrap because you've set them to wrap, but the text is set to vertical - things like that matter because trying to follow this gave me very different results.

  • @MyDigitalHub
    @MyDigitalHub 11 месяцев назад

    That waa fast. Awesome

  • @InesaShevchenko
    @InesaShevchenko 9 месяцев назад

    Great. And what about the image ratio?)

  • @briannaaikens6039
    @briannaaikens6039 8 месяцев назад

    Hi there! I'm trying to use a min/max valur on each of my cards and then have them stack once the entire row hits a minimum width. Is there a way to do this? I want my cards to get to 320px width first, then start wrapping on the page to allow for tablet and mobile page widths. I don't want to set a fixed with on each card because then that won't allow the content within each card to wrap until it hits 320 width. Help. 😅

  • @MetaWoody
    @MetaWoody 11 месяцев назад +3

    It would be very very helpful if you could share this file so we can immediately play with it. Thanks!

  • @OkAnup
    @OkAnup 5 месяцев назад

    Bruh, that width was inactive. I never noticed there was a max/min drop-down; I was struggling to make my design responsive for 3 hours... thank you very much 😊

  • @silage2000
    @silage2000 8 месяцев назад

    Was this guy bursting to go to the toilet, or something? Why was he going so fast? I had to watch it nearly 10 times to catch everything he did. SLOOOOWWWWW DOMN BUDDY!!!

  • @sohanvjartakhani
    @sohanvjartakhani 4 месяца назад

    worth it

  • @dewanbageradorsho
    @dewanbageradorsho 11 месяцев назад

    Good

  • @gospoda2
    @gospoda2 10 месяцев назад

    Can you set a max width for the text? Instead of just the lines of text. So basically I want to give a character limit to a line of text so it wraps if the frame exceeds that.

    • @Figma
      @Figma  10 месяцев назад +1

      If you set the text field to auto height and a fixed width or min-width the text will wrap. A simple calculation I use (This is Miggi btw) is the font-size multiplied by the character limit divided by two. So a character width limit of approximately 64 characters wide at a font size of 16 would be 16*32 or 512 max width. In CSS code you could specify 32em with em being the font size of the text block.

    • @Figma
      @Figma  10 месяцев назад

      Also, yes. (Miggi)

  • @sumberdanadesign7588
    @sumberdanadesign7588 10 месяцев назад

    This is what I need, fast & furious tutorial

  • @henriquedantas430
    @henriquedantas430 5 месяцев назад

    I felt so respected by this fast tutorial! 🥹 Thank you so so much!!!

  • @jasonbocchi7736
    @jasonbocchi7736 9 месяцев назад

    Great tutorial, just wish you'd slow down a tad. Thanks

  • @thisissam123
    @thisissam123 11 месяцев назад

    there's a typo on the thumbnail, also great vid!

    • @figma-miggi
      @figma-miggi 11 месяцев назад +2

      Ha, thanks was trying to move too fast. I just updated the thumbnail and trimmed the clip so it shouldn't show when it updates.

  • @utkarshmishra7814
    @utkarshmishra7814 11 месяцев назад

    Supafast

  • @byebyebirdie8027
    @byebyebirdie8027 10 месяцев назад

    I blinked and he was done.

  • @incyphe
    @incyphe 10 месяцев назад +1

    He better respect the 1:57 time limit!

  • @jdanielortega
    @jdanielortega 4 месяца назад

    This is awesome but it's still pixel based. Designing with pixels as units should be illegal by next year, please add FR or Percentages

  • @Chris-jm2gx
    @Chris-jm2gx 11 месяцев назад

    mix/max on the thumbnail
    I thought mix is a new feature 😆

    • @figma-miggi
      @figma-miggi 11 месяцев назад

      yeah, I knowww. I fixed it though. refresh :D.

  • @Sanny.V
    @Sanny.V 11 месяцев назад +1

    Please add fill width to child items when creating an auto-layout. Doing this 1000 times a day is so useless and time consuming . The case that your child item is a fill width is way more likely than the other options.
    It would be such a time safer when the default would be a fill width.

    • @cinderful
      @cinderful 11 месяцев назад

      He demonstrated in the video that if you select the parent, hit enter, it selects all child elements and then you can set them all to fill at the same time

    • @Sanny.V
      @Sanny.V 11 месяцев назад +3

      @@cinderful well yeah, that's my point. If you are a professional you are doing this action a 1000 times a day. It would be so many selections, enters and parameter selections less a day if it would be set as default.

  • @eliagavriluyk8733
    @eliagavriluyk8733 3 месяца назад

    And as always, ha

  • @alifhunter
    @alifhunter 10 месяцев назад

    and as always what?

    • @Figma
      @Figma  10 месяцев назад +1

      "Happy Designing" (Sorry I messed up the upload) - Miggi

    • @Figma
      @Figma  10 месяцев назад +1

      ( Its how you know a human did it. )

    • @alifhunter
      @alifhunter 10 месяцев назад

      @@Figma haha no worries, it's funny, i thought it was on purpose lol