Design a Responsive Table in Figma Using Auto Layout (2024)

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

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

50% 1

Try Walling now to organize and share your work: walling.app/?source=arash
In this video, I'm going to show you how to create a fully responsive table in Figma using Auto Layout.
Try Figma for free:
psxid.figma.com/31r776
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/45KHoKJ
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

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

8 май 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@DesignWithArash Год назад

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

@olenaguryeva1035 Год назад

Not only the tutorials themselves are invaluable but also the manner you're teaching with a huge consideration of details. Like this use of "Enter" button when choosing elements. Never knew, now I know, thank you so much!

@DesignWithArash Год назад

Thanks a lot. Glad you found it helpful.

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

Thank you very much for this tutorial. It's amazingly easy to learn from you. This is the first video I've watched on your channel, and it definitely won't be the last! Thanks!

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

No problem. Glad to hear that.

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

Best video on tables i've seen yet! So easy to follow and understand thanks!!!

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

Glad it was helpful! No problem.

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

Great tutorial! I recently opened up a Figma for a client and couldn't for the life of me understand what was going on with the table they had created so I decided to recreate it using the techniques in your video. I really like your content, keep up the good work!

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

Thank you so much. Glad you found it helpful.

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

Struggled to create table using auto-layout, your video is straight to point and very much useful. Thank you for teaching this

@DesignWithArash 2 месяца назад

No problem. Glad it helped.

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

A counter point to this approach is if you have a cell with multiple lines and the height of the row needs to expand due to contents in the cell. Based on the approach in this video, the cells would become unaligned. For this reason I think it's better to focus on the row as the primary way to bundle the cells. Thanks for the video. Great production value.

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

I completely agree.

@MrDavidgau 2 месяца назад

Thanks and +1 for thinking in terms of rows instead of columns. There's an oldie here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UCYD2ES1m9s.html if anyone is interested to redo it with the latest Figma UI :)

@surabhisiddaiah3752 Год назад

Was looking for this exact thing today and it appeared on my feed haha! Thank you for such tutorials

@DesignWithArash Год назад

Glad to hear that. No problem.

@malihaparveen2224 Год назад

Thank you for this tutorial! It helped me a lot.

@DesignWithArash Год назад

No problem.

@alisabugi 12 дней назад

Thank you! great vid - very helpful :)

@MikyWolfHopper 4 месяца назад

Your videos are always a big help, thank you!

@DesignWithArash 4 месяца назад

No problem. Happy to hear that!

@raku.aladdin Год назад

man you did it following since from the very beginning now you have 23.5k subscribers keep going brother and help us by providing valuable videos.

@DesignWithArash Год назад

Sure. Thanks for your support.

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

I was having deficlties solving problems for my assignments. You solved it for me. Thanks man. ❤

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

No problem. Great to hear that!

@MrAndypf Месяц назад

Excellent video. Simple and straight to the point! Thanks.

@DesignWithArash 26 дней назад

Thank you.

@julialopes7925 Год назад

Thank you so much! I am having a little trouble with Figma components, 'cause I was used to XD, and you explain in a very easy way.

@DesignWithArash Год назад

No problem. Glad I could help!

@muhammadabdullah-uw7li Год назад

Hi Julia! need an UI expert. Can we get in touch?

@jairorob Год назад

Very good!!! Amazing tutorial.

@DesignWithArash Год назад

Thank you so much.

@user-hd8uw4gj3o 8 месяцев назад

Thanks so much!!! Really helpful

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

No problem. Glad it helped.

@tanmoygolui8379 Год назад

You have explained in a very detailed way. I have one concern. What strategy will you follow when a few cell values in a column called 'Product Description' are 2-3 lines long (Say you have to show a long text in a 2-3 line instead of ellipses) , while other cells are single line?

@DesignWithArash Год назад

Thanks. In that case you should create rows instead of columns. You can set the height of all your cells to Hug Content and then when one cell's height increases all the other cells within that row grows as well.

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

Dear Arash thank you very much. Everything works like in your video except the badges. What are badges? Is it a local components or not?

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

you are the best figma instructor on this platform good job sir❤

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

Thank you very much.

@DorCraft Год назад

Wow, thanks so much! It helps me a lot

@DesignWithArash Год назад

No problem.

@norbertgurmai4167 2 месяца назад

Really useful video, thank you! 🙂

@zagguprince Год назад

Hi Arash, Thank you for the valuable tutorial..

@DesignWithArash Год назад

Hi. No problem. Thanks.

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

great tutorial👌 helped a lot!

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

Glad it helped!

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

Great video! What about if you have some item cells that are larger than others? How do you make height the same in all other item cells?

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

Thanks. You should set the vertical resizing option of your cells to Fill Container.

@buntykumar9008 Год назад

Just Awesome Video it will save lots of time while creating table UI👍👍👍👍

@DesignWithArash Год назад

Thank you.

@JoyJoy-wj4xe 4 месяца назад

To be honest 90% of what I took for here was the advanced shortcuts you were using then learning about tables. Great video.

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

Glad it was helpful!

@SisiBisi-zh1cj 23 дня назад

Thank you, it is done correctly

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

Great job Arash!

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

Thanks.

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

excellent videio, thank u very much, you helped me a lot c:

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

Glad it helped! Thanks.

@user-il5lx4nd5e Месяц назад

Absolute legend!

@DesignWithArash 26 дней назад

Thanks a lot.

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

Thank youuuuu so muchhh

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

No problem.

@user-rd9wy3yv9w 5 месяцев назад

Thanks for a tutorial!

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

No problem

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

How would you make a row interactive? Let say it would light up when you hover it?

@krystynatymofiejewa189 Год назад

THANHS SIR I GOT IT😍

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

Thanks, is very cool, But how can i do in this table a horizontal scrolling and keep the responsive shape? Can you explain how to do please? THKS

@alono4473 Год назад

Nice video!! Question, what if in a cell or header cell there’s a long text? Will it still work responsively?

@DesignWithArash Год назад

Thanks. Yes, you can set the cells' vertical Resizing Option to Fill Container to make them responsive vertically as well.

@chioj36 4 месяца назад

This is amazing and helped me so much thank you

@DesignWithArash 4 месяца назад

No problem.

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

You are so cool. I love your videos

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

Thank you so much.

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

Thank you for doing this video. When a text wraps the row changes its height but we want all the rows to be the same height. also the divider should be consistent across the whole row. How can I achieve this using the column approach?

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

That's hard to explain here but I may create a video on that.

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

You my friend are a legend

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

Thank you very much.

@kurtroscillo6085 Месяц назад

Try making that a component now. You'll be restricted to adjusting each column width per instance, with options limited to either hugging the content or being fixed. Adding text properties to each cell will reduce the amount of clicking required. Instead of clicking into the text boxes, you'll only need to click each column and then select each cell to change the data. I also made each column it's own data set using component properties so you can easily change data sets per column.

@zahraaizadi7800 Год назад

چه نکته های خوبی میگی. من نمیدونستم که با یه اینتر ساده همه فریم های فرزند به این راحتی انتخاب میشند😁🤩

@DesignWithArash Год назад

ممنونم. خوشحالم که خوشتون اومد.

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

thanks a lot

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

No problem.

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

Hi Arash, did you make this video after figma 2023 config? is it suitable for the new update? Thanks for your hard work.

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

Hi. No, but it is still applicable. Thank you.

@RitikBharmoria Год назад

Pretty Good

@DesignWithArash Год назад

Thank you.

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

why did u change line heights to cells , can you not give padding instead. whats the difference

@r3nyfenny374 День назад

But what if you need to move the lines on the left side and the right side?

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

I got problem that once I done first column and want to duplicate the 2nd, 3rd column and so on. But the newly duplicated keep going down of the 1st column instead of right beside the 1st column (Like yours 5:11) as it blocked me to do so.

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

Please change the direction of your Auto Layout frame in the Auto Layout section.

@user-pk3no9xv4m 5 месяцев назад

I don't have a fill container option at 6:00 No idea why...

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

Not bad for a simple, and fast table. The only problem is that the architecture restricts the way users can interact with it. Example - setting a hover state to highlight the whole row or simply aligning all the content from different rows. Any tips on how to make this component more flexible?

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

In that case, you can create a row with multiple columns and create different states for it (interactive component).

@overflowid0 28 дней назад

i liked even the native ads

@DesignWithArash 26 дней назад

Thank you.

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

Great video, the problem is adding a rollover to a row

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

Thank you. Yes, but it's not needed in the design stage.

@raghavsharma9420 Год назад

Please bring more videos about smart animate of Apple's website

@DesignWithArash Год назад

Sure.

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

Is there a way to achieve this responsiveness but using rows instead of columns?

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

Yes. You just need to create the cells for a row and put them in an Auto Layout frame. Next, set the direction to Horizontal. Finally, select all the cells inside and set their resizing option to Fill container. Then, you should duplicate the row a few times.

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

Is there an easy way to merge cells in a column or row?

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

Nope.

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

@@DesignWithArash bummer. Ok, ty.

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

@@DesignWithArash But this video was still quite helpful, so thank you!

@Jwarddesign-ca 11 месяцев назад

I can hardly see the details in the Frame and Auto Layout property panels. I have to pause the video and lean into the video real close just to barely see a number. That's ridiculous! I have the playback quality on 1440 HD and it's still blurry and too small. It's not my eyesight. So frustrating!

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

Is it possible to create a responsive table using components?

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

Yes.

@valueinvesting. Год назад

plz make video on aipods landing page animation in figma Plz We are waiting..... ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

@DesignWithArash Год назад

Sure.

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

open na noor!

@mr.neon7371 3 месяца назад

کاش اموزش فارسی هم میزاشتین خیلی محتوا خوبی دارین

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

ممنونم. متاسفانه وقت نمیکنم به دو زبان ویدیو تهیه کنم.

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

Thanks for great tutorials. Not too surprising coming for a college professor but man, you look like you barely graduated from college. LOL.

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

No problem. Haha. I've been teaching since I was 21.

@atomicrus Год назад

works good for single text cells, but not for random hight cells

@DesignWithArash Год назад

You can make the cells vertically responsive as well by setting the vertical resizing options for all the elements to Fill Container.

@idmick91 Год назад

@@DesignWithArash But then you'd get different heights per cell in the same row right? Would be nice if one cell in a row grows in height, and the rest of the cells in that row respond/grow with it.