No video :(

Figma Tip: Auto layout wrap

Подписаться 578 тыс.

Просмотров 51 тыс.

50% 1

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

Опубликовано:

11 июл 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@djkasperg Год назад

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 Год назад

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

@magaliquiros9329 Год назад

Figma is the best 💕

@parz1v3l Год назад

Just the video I needed!

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

how awesome is that! Fantastic work, Figma!

@Augumedia Год назад

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

@SappPictures Год назад

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

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

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

@w0mblemania Год назад

Thank you! Now it becomes clearer.

@nektor1990 Год назад

How about wrap-reverse?

@KAGarcia Год назад

Great quick tip.

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

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 6 месяцев назад

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 11 месяцев назад

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

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

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

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

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

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

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

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

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 ... ;-)

@peppapig807 Год назад

game changing!

@peterstouch8403 Год назад

Very helpful ✅

@evillassasin1520 Год назад

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

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

auto layout wrap text ?

@swagfel Год назад

amazing :D

@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 Год назад

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

@andrewstrasser 3 месяца назад

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

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

RTL?????

@Shykovart Год назад

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 Год назад

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

@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 Год назад

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 Год назад

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