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!
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.
Thanks and +1 for thinking in terms of rows instead of columns. There's an oldie here th-cam.com/video/UCYD2ES1m9s/w-d-xo.html if anyone is interested to redo it with the latest Figma UI :)
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.
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!
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!
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?
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.
Thanks, Arash!🤩👍 Great tutorial! Quick question: When texts in cells start overlapping at certain widths, I tried setting a minimum width for the Table (auto layout). But doing this disables the 'Left & Right' constraint option, which breaks responsiveness in the Desktop frame. Any advice on how to solve this?
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.
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?
Thanks for sharing great content. My vector items like checkbox, badges etc get stretched out of proportion cause the cells and content is set to fill container, in order to fix this I must set that cell to hug. I see that you don't have this issue with your vector content. I'm using separately made component cells with hidden content (boolean) and I just switch on and off different content that's prepared in the cell component. Badge, checkbox etc. This weird stretching is an odd behaviour 🤔
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?
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.
@@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.
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!
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
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!
Thanks a lot. Glad you found it helpful.
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.
I completely agree.
Thanks and +1 for thinking in terms of rows instead of columns. There's an oldie here th-cam.com/video/UCYD2ES1m9s/w-d-xo.html if anyone is interested to redo it with the latest Figma UI :)
Best video on tables i've seen yet! So easy to follow and understand thanks!!!
Glad it was helpful! No problem.
Very clear and you didn't skip over any crucial steps! 🎉
Struggled to create table using auto-layout, your video is straight to point and very much useful. Thank you for teaching this
No problem. Glad it helped.
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.
Sure. Thanks for your support.
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.
Thank you so much. Learnt more than one thing in this video today.
Was looking for this exact thing today and it appeared on my feed haha! Thank you for such tutorials
Glad to hear that. No problem.
you are the best figma instructor on this platform good job sir❤
Thank you very much.
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!
Thank you so much. Glad you found it helpful.
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!
No problem. Glad to hear that.
I was having deficlties solving problems for my assignments. You solved it for me. Thanks man. ❤
No problem. Great to hear that!
Great tutorial. Thank you so much! :)
Excellent video. Simple and straight to the point! Thanks.
Thank you.
بسیارررر عالی و کاربردی ممنون از لحن صریحتون
Your videos are always a big help, thank you!
No problem. Happy to hear that!
چه نکته های خوبی میگی. من نمیدونستم که با یه اینتر ساده همه فریم های فرزند به این راحتی انتخاب میشند😁🤩
ممنونم. خوشحالم که خوشتون اومد.
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?
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.
Thank you for this tutorial! It helped me a lot.
No problem.
Thanks so much!!! Really helpful
No problem. Glad it helped.
Great job Arash!
Thanks.
Thank you! great vid - very helpful :)
You my friend are a legend
Thank you very much.
Really useful video, thank you! 🙂
great tutorial👌 helped a lot!
Glad it helped!
Very good!!! Amazing tutorial.
Thank you so much.
excellent videio, thank u very much, you helped me a lot c:
Glad it helped! Thanks.
Hi Arash, Thank you for the valuable tutorial..
Hi. No problem. Thanks.
Can you make an editable table with add, remove and delete icons above the table along with search and filter options
Thank you so much
This is amazing and helped me so much thank you
No problem.
Absolute legend!
Thanks a lot.
Thank youuuuu so muchhh
No problem.
Just Awesome Video it will save lots of time while creating table UI👍👍👍👍
Thank you.
Wow, thanks so much! It helps me a lot
No problem.
You are so cool. I love your videos
Thank you so much.
Thanks for a tutorial!
No problem
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.
No problem. Glad I could help!
Hi Julia! need an UI expert. Can we get in touch?
Thanks, Arash!🤩👍 Great tutorial! Quick question: When texts in cells start overlapping at certain widths, I tried setting a minimum width for the Table (auto layout). But doing this disables the 'Left & Right' constraint option, which breaks responsiveness in the Desktop frame. Any advice on how to solve this?
THANHS SIR I GOT IT😍
Thank you, it is done correctly
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?
Thanks. You should set the vertical resizing option of your cells to Fill Container.
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?
How can you create the alternating row colors?
How would you make a row interactive? Let say it would light up when you hover it?
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.
Please change the direction of your Auto Layout frame in the Auto Layout section.
i liked even the native ads
Thank you.
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
I don't have a fill container option at 6:00 No idea why...
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?
In that case, you can create a row with multiple columns and create different states for it (interactive component).
thanks a lot
No problem.
Great video, the problem is adding a rollover to a row
Thank you. Yes, but it's not needed in the design stage.
Thanks for sharing great content. My vector items like checkbox, badges etc get stretched out of proportion cause the cells and content is set to fill container, in order to fix this I must set that cell to hug. I see that you don't have this issue with your vector content. I'm using separately made component cells with hidden content (boolean) and I just switch on and off different content that's prepared in the cell component. Badge, checkbox etc. This weird stretching is an odd behaviour 🤔
Hi Arash, did you make this video after figma 2023 config? is it suitable for the new update? Thanks for your hard work.
Hi. No, but it is still applicable. Thank you.
Pretty Good
Thank you.
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?
That's hard to explain here but I may create a video on that.
But what if you need to move the lines on the left side and the right side?
don't u think we that we can't give hover effect on row which is quite standard in design prototype.
Nice video!! Question, what if in a cell or header cell there’s a long text? Will it still work responsively?
Thanks. Yes, you can set the cells' vertical Resizing Option to Fill Container to make them responsive vertically as well.
why did u change line heights to cells , can you not give padding instead. whats the difference
Please bring more videos about smart animate of Apple's website
Sure.
Is there an easy way to merge cells in a column or row?
Nope.
@@DesignWithArash bummer. Ok, ty.
@@DesignWithArash But this video was still quite helpful, so thank you!
Is there a way to achieve this responsiveness but using rows instead of columns?
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.
plz make video on aipods landing page animation in figma
Plz
We are waiting.....
❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Sure.
works good for single text cells, but not for random hight cells
You can make the cells vertically responsive as well by setting the vertical resizing options for all the elements to Fill Container.
@@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.
Is it possible to create a responsive table using components?
Yes.
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!
کاش اموزش فارسی هم میزاشتین خیلی محتوا خوبی دارین
ممنونم. متاسفانه وقت نمیکنم به دو زبان ویدیو تهیه کنم.
open na noor!
If this table is “fully” responsive, how does it look and work on a 320px wide screen? Horizontal scrolling? 🤢
Thanks for great tutorials. Not too surprising coming for a college professor but man, you look like you barely graduated from college. LOL.
No problem.
Haha. I've been teaching since I was 21.