Design a Responsive Table in Figma Using Auto Layout (2024)
88,248
Published 2023-05-09
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: www.instagram.com/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 worldwi
All Comments (21)
-
👉 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!
-
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.
-
Struggled to create table using auto-layout, your video is straight to point and very much useful. Thank you for teaching this
-
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.
-
چه نکته های خوبی میگی. من نمیدونستم که با یه اینتر ساده همه فریم های فرزند به این راحتی انتخاب میشند😁🤩
-
Best video on tables i've seen yet! So easy to follow and understand thanks!!!
-
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!
-
you are the best figma instructor on this platform good job sir❤
-
I was having deficlties solving problems for my assignments. You solved it for me. Thanks man. ❤
-
Was looking for this exact thing today and it appeared on my feed haha! Thank you for such tutorials
-
Excellent video. Simple and straight to the point! Thanks.
-
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!
-
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.
-
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?
-
Thank you for this tutorial! It helped me a lot.
-
Thank you! great vid - very helpful :)
-
Absolute legend!
-
Your videos are always a big help, thank you!
-
But what if you need to move the lines on the left side and the right side?
