Figma Tip: Auto layout wrap

Поделиться
HTML-код
  • Опубликовано: 9 сен 2024
  • Here is a quick tip on how to get your design elements into an auto layout frame with wrapping behavior. Also some tips on how to align your elements within a wrapped-set auto layout frame.
    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 #autolayout #design #figmatips

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

  • @djkasperg
    @djkasperg Год назад +29

    I appreciate short and concise videos like this. They are great for referencing functions in Figma without having to scrub through an hour long video to find what you're looking for.

  • @danielasegadilha6488
    @danielasegadilha6488 Год назад +3

    Such a great and fast video! I wish almost all videos were like that

  • @magaliquiros9329
    @magaliquiros9329 Год назад +2

    Figma is the best 💕

  • @parz1v3l
    @parz1v3l Год назад +1

    Just the video I needed!

  • @SappPictures
    @SappPictures Год назад +1

    Thanks Migi, I tried auto layout wrap today but I just couldn't 'wrap' my head around it
    This is helpful

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

    Thank you! Now it becomes clearer.

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

    how awesome is that!
    Fantastic work, Figma!

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

    Waw! I'm really enjoying this concise and well simplified form of tutorial, thank you all at Figma Education sector

  • @nektor1990
    @nektor1990 Год назад +3

    How about wrap-reverse?

  • @josennes2070
    @josennes2070 11 месяцев назад +1

    Buenas tardes, gracias por el video, clarisimo para componentes.
    Me surge la duda de cómo aplicarlo en textos, dandole auto layout y seleccionando wrap no funciona. Cómo podria hacerlo? Gracias

  • @natacho_1
    @natacho_1 8 месяцев назад +1

    Do you know if there's any way to use wrap and set the number of columns and/or rows that you want? I'm wrapping cards that set to "fill container" but I only want 3 columns of them along many rows, and right now they are all resizing to fit in one row.

    • @attheaftermath
      @attheaftermath 7 месяцев назад

      I'd like to know the answer to this. Currently it's a cool feature but without the ability to dictate the number of columns, it's not fully responsive.

  • @ooogabooga5111
    @ooogabooga5111 11 месяцев назад +1

    the problem is that the contianer itself is not scaling when I set it to fill

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

    Great quick tip.

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

    Nice. Great. But in the meantime, is there also the possibility to change the order?
    Example: Left text, right image, below row: left image, right text. If I now apply the wrapping I get as a result: text image image text. But I want text image - text, image ... ;-)

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

    this is cool, but when are we going to be able to select the amount of rows and columns like flex behaves?

  • @LamirLakantry
    @LamirLakantry 11 дней назад

    I'm making a component that contains text and sometimes another component, which is a status indicator. Basically "[Rejected] Explanation..." Or in other cases just "Comment". But I'm having issues with the auto layout. I want the status icon to appear in the beginning of the text box, causing the text to move over for it, but not the entire text box to move. The following lines should appear underneath the icon, not next to it. Is this possible?

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

    game changing!

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

    How do you wrap a text component that's inside another component?

  • @gc7754
    @gc7754 6 месяцев назад

    Can I not wrap elements in a horizontal direction? I tried interchanging the hug settings between height and width, it did not work.

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

    Very helpful ✅

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

    amazing :D

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

    Can you please share your complet guide tutorial about firma beginner to advence

  • @rekiallard77
    @rekiallard77 6 месяцев назад

    auto layout wrap text ?

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

    How do I get this to work with a body text, link text, body text?
    Like: if you need further help, please (contact) our customer service.
    If these are three textblocks I can’t get them to behave as normal wrapping text. Is there a way to do this?

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

      (It’s three text blocks because the link has a specific styling/token)

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

    i'm having a really tough time making components that are essentially paragraphs and then when i make children of it in autio layout, having the different quantities of text be respected

  • @Shykovart
    @Shykovart Год назад +1

    Its so sad that it doesn't work as css grids. If you need you items to be the same size in any row the only way to achieve that is making even amount of items in every row. But overall better than nothing.

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

      I'm not sure what you mean, but have you tried setting a fixed with on the items? That might solve your issue

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

      @@peppapig807 yes it would, but it's not what i'm looking for. Lets say I have items with min width 100px and max width 200px. If I place 5 items into 400px auto layout with wrap 'on' I will have 1st row with 4 items with 100px width and 2nd row with 1 item with 200px width. And I want that item in 2nd row to be 100px too. Its like having min/max width for grid instead of item.

    • @sean_mc
      @sean_mc Год назад +3

      Agreed. It's a fantastic new feature but it would be great to have an option to force child layers to be the same width and still maintain that responsiveness. The work around I found for now was to duplicate items in the AL layer and then set their opacity to 0 (don't hide the layer). That way, in my grid of 5 cards in 3 columns, the bottom two items match the size of their counterparts and I don't have to give them specific min-max widths.
      If I need to adjust the number of items to go to a 5 column layout for xLarge breakpoints I can just delete or duplicate the invisible items as needed for that screen.

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

      @@sean_mc oh, it's clever! thank you)

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

    RTL?????

  • @user-ts3jf6er9d
    @user-ts3jf6er9d Год назад

    No Samar