The row appellation mistaken. Since you can only select them individually, they are cells. It is not possible to place the row and column in a separate frame in the figma. Otherwise I liked the video. 👍
The only issue that I found here is when the text of one column goes to the second line everything breaks up the rest of the columns because of the hug content set vertically.
Thanks for this great tutorial, but I guess by making columns fill container, one trade off is all columns are created with the same width in this case, is there anyway to make columns scale proportionally according to their preset width?
I'm sorry, but this is not just fluid? responsiveness is a lil' bit more than this, right? Nonetheless, great tutorial and I'm amazed by how much one can improve his productivity just by using autolayout and frames instead of rectangules (which is what I have been using till now)
You just saved me months of learning. You're a great teacher as well. Everything was clearly explained and very easy to follow. All the best and respect to you Mizko :D
Great tutorial but can you update the video with the new figma controls. the right side figma interface doesn't work the same as the tutorial, reason is I don't see fill container in the new layout in figma
Hi Mizko! What about make reusable components for header cells, content cells, rows and columns with variants of states for interaction functionalities? I have seen some tutorials about but looks some complicated… we’ll glad to see your method for this! 😀
Thanks Michael, another fantastic video! If I could offer a small suggestion - perhaps you could start the video with showing the final product so viewers can see what you're going to build. I was intrigued, but found myself wondering what the table was supposed to look like and only saw it at the end. I notice it's in the thumbnail, but it can be easily missed and would be nice to see the responsiveness in action before deep diving into how it's created. Love your work and am loving the Figma Masterclass so far. Keep it up! (Oh, I did gently smash the Like button)
Love your tutorial. But all the columns are the same (relative) size. Is it possible to create a responsive table where the columns have a relative size? Like 20%-25%-40%-15%. Because the "Fill container" automatically awards them all an equal space... I am searching and experimenting for a few days now, but haven't been able to come up with a working solution... Keep up the good work!
@@carolinemiguel8223 Yeah, I got it to work... you create a text, put it in a autolayout. Set the width for the text to fill and for the autolayout to fixed. Then for the autolayout turn on the absolute positioning and set the horizontal constraint to scale. Copy this as many times as you need and set each to the desired width. I needed a division off 40-60% and used 200 and 400 pixels width. It doesnt matter that much what you take as width as long as the ratio is correct for what you need. Then select it all and add an auto layout to it and set the width to fixed. If everything went correct, your item should now scale and each colomn should keep it's relative size. Please try and see if you get it to work. And let me know. If you can't get it to work, I might make a tutorial out of it ;)
You have the best tutorials for everything , I really love watching your videos as a beginner it is very helpful and filled with a lot of valuable information.
Frankly, the fact that FIGMA by their own admission, doesn't have a native table feature in their roadmap - is disappointing. All those work arounds and tutorials we do are a waste of time for SaaS or enterprise apps prototyping :(
The trick is.. how to create a responsive table with columns of different widths.. all columns are flexible (no fixed size column). Can it be done in Figma? Say a table with column1 = 25% of the entire table width and column2 = 75% of entire table width. Not much use of a table on which all rows and columns have exactly the same size. (e.g. a name, description and rank column have different size content.. it doesn' t amek sense for the rank to be as big as the name.. and for the name as bigg as the description.)
How did you select the entire row on 7:29? I can easily duplicate columns, but not rows since I can only select a single row within a column. I have to select each row in a column to duplicate entire row. Thanks!
Mizko ! Can't tell you how much I appreciate this video. Can you please tell how you instantly selected the whole row at 7:28 in this video. I've been using this table design over and over but every time I want to add or remove a row I'm stuck cmd shift clicking each cell. It's driving me nuts! Thanks for all your help so far
Since it is fill container and columns duplicated, Can I Implement this if I need custom spacing for the columns and make it responsive? (eg: Sl no. needs less space compared to address column).
@@elahehhosseini9809 There are no defined rules for grid layouts, it's more about what you need for the specific project. UI Design generally happens on smaller devices, so we try to use spacing that is reasonable.
Great job i learn something new. Please I will like if you can give me some tasks to work on. Am still a beginner but have got some knowledge already . I want to improve more thanks
works great, but what if the text "michael' in this case, is a sentence? seems auto layout doesn't know how to deal with the increased size of the text container
Hello Mizko, I just tried to buy the class but the website declined my credit cards. I am 100% sure my card is fine as I use them almost everyday. Now I am not able to pay, so I am not able to take the class. :(
This is great example to create a responsive table. However, the text inside each field is limited at this moment. Taking the real world scenario how can you fit a large amount of text in any specific row? any help would be much appreciated
Hey Mizko thanks for another great content. Always love following your work here! But do you have a video on how to make email design and maybe some tips on how to export them to email providers like mailchimp and klaviyo? TIA!
After CTRL+D the column, My columns are pasted not next to each other horizontally but vertically under each other. But I did everything the same like you did. Can you help me?
Wow I'm doing this exact layout with a menu on the left and table on the right and was wondering how to set up my grid system. This was epic, thanks Mizko!
Thank you so much! I've been using Figma for my work, started with just creating an "illusion" of tables (making lines that look like a table, but it's a mess if you need to change anything), then came to some plugins that I have no idea how to work with, that create components, and sometimes these tables are resizable, sometimes not... also a mess.... Now in 10 mins I have everything I need, and it could have saved me hours of work, if I watched it earlier! Thanks a lot!!
Thx! But one question, I convert my table to a component and when I drag from the table component library in another page I can't add more rows/columns. They are always out of the frame, when I duplicate them. Is there a solution or should I create a bunch of columns/rows and hide them and turn them on, when I need more?
In this format how can I prototype when I hover a row to show another color? I don’t think you can, you will have have to create row styles instead of columns correct?
2weeks of learning autolayout and here i understand everything in 40min wtf a good teacher can definitely save a lot of time and also frustration of students. thankyou mizko
Thanks Mizko. It's a great Tuto. My only issue with that solution (with columns) is that you can't have an hover state for the entire row when you start prototyping. Have you made a video that solves that?
@@Mizko My cells are already interactive components. But as you do that and create your table, as you hover a row, only the cell will be hovered, not the entire row. Problem unsolved ?
wawwwww what an amazing video. i have watched it so many time until it hit me what i was doing wrong. and than wooooooohhhhh. i worked. this is so existing🙂
Hello Mizko Thank you very much for your very useful and excellent tutorial I have a question If I want to give the rows of the table a style (for example, a round border), is it possible to use this method and autolayout ?
@@Mizko It actually broke for me as well. Basically in the 1st column all the raws moved down cause the first raw became bigger, but in all the other columns the raws didn't move down
Spent hours yesterday trying to find a tutorial that would teach how to create a responsive table on Figma without "hiding" steps!! This is amazing Mizko!! Already subscribed to your channel. many thanks for this video!!!!
![[NEW COURSE] The Ultimate Figma Masterclass Course](http://i.ytimg.com/vi/VLNBUKOByqg/mqdefault.jpg)
![[NEW COURSE] The Ultimate Figma Masterclass Course](/img/tr.png)
Become a FIGMA EXPERT With me today!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
The row appellation mistaken.
Since you can only select them individually, they are cells.
It is not possible to place the row and column in a separate frame in the figma.
Otherwise I liked the video. 👍
Thank you for all the effort to prepare all these videos and share your knowledge. Amazing!
The only issue that I found here is when the text of one column goes to the second line everything breaks up the rest of the columns because of the hug content set vertically.
So how did you fix it? cause if it's altered/set to fixed content, it becomes weird 😌
Truncate text makes the trick
Give fixed length to the rest of the column based on the second line text in the column
Thank you!
Thank you
Thanks for this great tutorial, but I guess by making columns fill container, one trade off is all columns are created with the same width in this case, is there anyway to make columns scale proportionally according to their preset width?
Not yet. However if you want, you can set some columns as fixed and the rest can scale relatively.
i was trying do that, don't see that it's not possible in figma yet :(
I'm sorry, but this is not just fluid? responsiveness is a lil' bit more than this, right? Nonetheless, great tutorial and I'm amazed by how much one can improve his productivity just by using autolayout and frames instead of rectangules (which is what I have been using till now)
You just saved me months of learning. You're a great teacher as well. Everything was clearly explained and very easy to follow. All the best and respect to you Mizko :D
Thank you Huyen!
Great tutorial but can you update the video with the new figma controls. the right side figma interface doesn't work the same as the tutorial, reason is I don't see fill container in the new layout in figma
Hi Mizko! What about make reusable components for header cells, content cells, rows and columns with variants of states for interaction functionalities? I have seen some tutorials about but looks some complicated… we’ll glad to see your method for this! 😀
Thanks Michael, another fantastic video!
If I could offer a small suggestion - perhaps you could start the video with showing the final product so viewers can see what you're going to build. I was intrigued, but found myself wondering what the table was supposed to look like and only saw it at the end.
I notice it's in the thumbnail, but it can be easily missed and would be nice to see the responsiveness in action before deep diving into how it's created.
Love your work and am loving the Figma Masterclass so far. Keep it up!
(Oh, I did gently smash the Like button)
Thanks for the feedback Jason! Will definitely include it next time. I did intend to do that but I forgot.
May Be you can just scroll to the end of the Video, just an advice. I have done it in the same way
Vodafone Mobile App UI UX Design Using Figma 🎉
Full Video: ua-cam.com/video/Oky0Q7mZVH8/v-deo.html
Boooooooooommmmm ❤️🔥
Love your tutorial. But all the columns are the same (relative) size. Is it possible to create a responsive table where the columns have a relative size? Like 20%-25%-40%-15%. Because the "Fill container" automatically awards them all an equal space... I am searching and experimenting for a few days now, but haven't been able to come up with a working solution...
Keep up the good work!
Me too. Have you found any ways to make it work?
@@carolinemiguel8223 Yeah, I got it to work... you create a text, put it in a autolayout. Set the width for the text to fill and for the autolayout to fixed. Then for the autolayout turn on the absolute positioning and set the horizontal constraint to scale. Copy this as many times as you need and set each to the desired width. I needed a division off 40-60% and used 200 and 400 pixels width. It doesnt matter that much what you take as width as long as the ratio is correct for what you need. Then select it all and add an auto layout to it and set the width to fixed. If everything went correct, your item should now scale and each colomn should keep it's relative size. Please try and see if you get it to work. And let me know. If you can't get it to work, I might make a tutorial out of it ;)
You have the best tutorials for everything , I really love watching your videos as a beginner it is very helpful and filled with a lot of valuable information.
Appreciate it Aditi!!
Frankly, the fact that FIGMA by their own admission, doesn't have a native table feature in their roadmap - is disappointing. All those work arounds and tutorials we do are a waste of time for SaaS or enterprise apps prototyping :(
The trick is.. how to create a responsive table with columns of different widths.. all columns are flexible (no fixed size column). Can it be done in Figma? Say a table with column1 = 25% of the entire table width and column2 = 75% of entire table width. Not much use of a table on which all rows and columns have exactly the same size. (e.g. a name, description and rank column have different size content.. it doesn' t amek sense for the rank to be as big as the name.. and for the name as bigg as the description.)
How did you select the entire row on 7:29? I can easily duplicate columns, but not rows since I can only select a single row within a column. I have to select each row in a column to duplicate entire row. Thanks!
@Mizko You should redo this video with colored elements, it’s virtually impossible to follow even at slow speed and with 100s of pauses each time.
Mizko ! Can't tell you how much I appreciate this video. Can you please tell how you instantly selected the whole row at 7:28 in this video. I've been using this table design over and over but every time I want to add or remove a row I'm stuck cmd shift clicking each cell. It's driving me nuts! Thanks for all your help so far
Mizko please!!
Since it is fill container and columns duplicated, Can I Implement this if I need custom spacing for the columns and make it responsive?
(eg: Sl no. needs less space compared to address column).
i still didn't understand why you put those numbers like 32 for margins and 16 for gutters. are these random numbers?! how did you find them?!
It's for consistent spacing in UI design.
@@Mizko yeah i know, but how did you find them ? Are there any rules about it?
@@elahehhosseini9809 There are no defined rules for grid layouts, it's more about what you need for the specific project.
UI Design generally happens on smaller devices, so we try to use spacing that is reasonable.
Great job i learn something new.
Please I will like if you can give me some tasks to work on. Am still a beginner but have got some knowledge already . I want to improve more thanks
Niceeee. Thank you! Can you do a video creating the mobile version of a table with many rows and columns ? ✌
dayumm thank you so much i have subsribed you just after completing this video crazy stuff!!!
Wooo! Nice work :)
hey im having trouble selecting the entire ROW to make changes to color, instead I have to select each head of each column...
works great, but what if the text "michael' in this case, is a sentence? seems auto layout doesn't know how to deal with the increased size of the text container
How do you decide how much gutter and margin you give to any grid layout? Is there a math to this or is this random?
Hi there. I do have a question, the frame on the left side which is fixed is in the same frame with all the other elements, right?
I only have constraints and the option left and right is not choosable. Any suggestions?
Didn’t help
This isn’t the current workspace in Figma
this is BARELY responsive, no tablet? no mobile?
good video
Awesome tutorial!
I would have preferred the dashboard in light mode cos I was struggling to see some of the elements. Good job anyway 👍
as usual, great content!
Thank you Kim!
yes, thanks for sharing this valuable video
I can not find resizing in the right side bar, how can I add it?
Hello Mizko! Is there a link to this figma file?
We've got our very first HEAD....lol
Hello Mizko, I just tried to buy the class but the website declined my credit cards. I am 100% sure my card is fine as I use them almost everyday. Now I am not able to pay, so I am not able to take the class. :(
Hey there! I received your email and responded. Look forward to hearing from you soon. I'm sure we'll get to the bottom of it.
This is great example to create a responsive table. However, the text inside each field is limited at this moment. Taking the real world scenario how can you fit a large amount of text in any specific row? any help would be much appreciated
Hi. Did you find any solution for this scenario?
never heard about figma before
I really enjoyed your content, congratulations!
Could you show us Brazilians how this table would look on mobile devices?
Hey Mizko thanks for another great content. Always love following your work here! But do you have a video on how to make email design and maybe some tips on how to export them to email providers like mailchimp and klaviyo? TIA!
Thank you Maria! I haven't done many email designs for a very long time.
After CTRL+D the column, My columns are pasted not next to each other horizontally but vertically under each other. But I did everything the same like you did. Can you help me?
Gawd damm, thats beautiful, man!
This is very useful! 👏👏👏
Thank you for sharing!
Thank you Julia! Glad you found it useful
OMG - you literally just saved my life. This is the BEST tutorial on building out tables. Thank you SO SO much
Glad you enjoyed it.
Wow I'm doing this exact layout with a menu on the left and table on the right and was wondering how to set up my grid system. This was epic, thanks Mizko!
Always happy to help 😉
Mind blown, take your like
i Love you Bro.. thank u ❤️️
Great video solving my issue！ I searched for grid layout set up for using side bar last day and you just posted thus one :D
Always here to help! 😉
I am one of the 23 students then! Great Stuff, very practical and insightful!
Woo! Thank you Benv! Really appreciate the support
Thank you so much for this!
Thank you so much! I've been using Figma for my work, started with just creating an "illusion" of tables (making lines that look like a table, but it's a mess if you need to change anything), then came to some plugins that I have no idea how to work with, that create components, and sometimes these tables are resizable, sometimes not... also a mess.... Now in 10 mins I have everything I need, and it could have saved me hours of work, if I watched it earlier! Thanks a lot!!
Thank you for this video. I have a doubt, though. The side bar wasn't created using a rectangle or frame! so how did you do that part?
Thx! But one question, I convert my table to a component and when I drag from the table component library in another page I can't add more rows/columns. They are always out of the frame, when I duplicate them. Is there a solution or should I create a bunch of columns/rows and hide them and turn them on, when I need more?
In this format how can I prototype when I hover a row to show another color? I don’t think you can, you will have have to create row styles instead of columns correct?
you reminds me of avatar aang
So for desktop should I always start designing with1440 x1024 or is it ok to start with 1920 X1080? sorry im new to this
This man is a genius! Your way to explain things is just amazing! Thanks a lot!
This man is grateful for the kind comments, thank you!
@@Mizko I'm a woman but thanks!
@@byebyebirdie8027 Lol! No I was referring to myself as 'this man'
@@Mizko Oh so sorry! English is not my first language. Keep up the good work!
@@byebyebirdie8027 Hahah, don't be sorry. I'm just glad you're enjoying the content.
2weeks of learning autolayout and here i understand everything in 40min wtf a good teacher can definitely save a lot of time and also frustration of students. thankyou mizko
The height of the icon boxes is way smaller, and it's only fluid, not responsive - but other than that it was useful, thanks!
YOU ARE AWESOME THX✨🤩
Thanks Mizko. It's a great Tuto. My only issue with that solution (with columns) is that you can't have an hover state for the entire row when you start prototyping. Have you made a video that solves that?
Thanks! Ha, well you can turn each cell into an interactive component ;) Problem solved.
@@Mizko My cells are already interactive components. But as you do that and create your table, as you hover a row, only the cell will be hovered, not the entire row. Problem unsolved ?
MIND BLOWN.. Awesome! I struggled always creating a table. now its clear.
wawwwww what an amazing video. i have watched it so many time until it hit me what i was doing wrong. and than wooooooohhhhh. i worked. this is so existing🙂
Mizko. This tut made my live easier. Thanks a lot and don't stop. Regards from Poland :)
Hello Mizko
Thank you very much for your very useful and excellent tutorial
I have a question
If I want to give the rows of the table a style (for example, a round border), is it possible to use this method and autolayout ?
Ok, but what about the prototype in the browser? I chacked and it worked inside Figma but not in the browser when I show it as a prototype.
Bro you are a lifesaver, now I have the ultimate table in my hands:)
I screamed at 7:08
Thank you ! this is always on point and a fun tutorial, the strategy is very coder-friendly.
Woo! Awesome. Yes, it's inspired by Flexbox.
Just loved the way u explain things in depth and make it easier to understand. hats off to u dear.
THANK YOU!! Really thank you, Mizko.
Amazing tutorial. How do you further add elements in the table? For ex : Want to add a VIP tag next to the name
That was superb
Loved this video! Your content is always so helpful and relevant; thank you for sharing your wisdom with all of us!
Thank you Diego!!
7:15 u hit what 😳💀💀
any idea how to do responsive table with different sizes width of columns?
🔥🔥🔥
Thank you!
What have I been doing all my design life... Mind seriously blown!
You are amazing, sifu!!! Thank you so so so so much!!! Subscribed!!!!!!!!!!!!!!!!!!!!!!!!!
So how would you go about adding a hover interaction to each row? considering the cells are separate components and not grouped with the row?
First! Great vid as always :D
Ha! Thank you Mr. Rad!
Dude you are a genius....literally did not see that coming.😅
what if one cell has 2 lines of text? It will completely break the layout.
It won't :) Autolayout is powerful. You can wrap the text easily.
@@Mizko It completely broke for me, I followed all the tutorial, but still broke when I put 2 lines of text. Any suggestion?
@@Mizko It actually broke for me as well. Basically in the 1st column all the raws moved down cause the first raw became bigger, but in all the other columns the raws didn't move down
Excellent one bro. Keep doing amazing stuff! Thank you.
I really like your simple teaching style
Thank you Prerna!! Means a lot and glad you found value.
Boom!
Amazing tutorial! Thank you🤍
Hello, are the classes recorded or live?
Recorded!
Absolute quality. Thanks again.
No way this is GOLD!!! Thank you
This is game changing man! Thanks a lot!
You put a big smile on my face! love it man!
Amazing, Thank you Mizko
Spent hours yesterday trying to find a tutorial that would teach how to create a responsive table on Figma without "hiding" steps!! This is amazing Mizko!! Already subscribed to your channel. many thanks for this video!!!!
Can we do this in xd?
You might. I have not used XD in a while. I might jump back into it and see how they are progressing soon.
WITCHCRAFT!!!!!
ARRY POTTER DROPPING THAT WIZARDRY