Figma Tutorial: Design a Responsive Table (Master AutoLayout!!)

[@Mizko]

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

[@gg-vm1oh]

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. 👍

[@anukritirathore6403]

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

[@ngochuyentrinh]

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

[@Mizko]

Thank you Huyen!

[@kate_lizzerd]

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!!

[@byebyebirdie8027]

This man is a genius! Your way to explain things is just amazing! Thanks a lot!

[@Mizko]

This man is grateful for the kind comments, thank you!

[@byebyebirdie8027]

@@Mizko I'm a woman but thanks!

[@Mizko]

@@byebyebirdie8027 Lol! No I was referring to myself as 'this man'

[@byebyebirdie8027]

@@Mizko Oh so sorry! English is not my first language. Keep up the good work!

[@Mizko]

@@byebyebirdie8027 Hahah, don't be sorry. I'm just glad you're enjoying the content.

[@eternityis333]

OMG - you literally just saved my life. This is the BEST tutorial on building out tables. Thank you SO SO much

[@Mizko]

Glad you enjoyed it.

[@aditichayani7985]

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.

[@Mizko]

Appreciate it Aditi!!

[@Nath.o.s]

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!!!!

[@JasonKangSW]

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)

[@Mizko]

Thanks for the feedback Jason! Will definitely include it next time. I did intend to do that but I forgot.

[@praneethkrishna6782]

May Be you can just scroll to the end of the Video, just an advice. I have done it in the same way

[@szlangacom]

Mizko. This tut made my live easier. Thanks a lot and don't stop. Regards from Poland :)

[@tinaaaaw]

What have I been doing all my design life... Mind seriously blown!

[@deepalimehra2195]

Just loved the way u explain things in depth and make it easier to understand. hats off to u dear.

[@thedesignux]

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.

[@tayoakinnagbe1382]

So how did you fix it? cause if it's altered/set to fixed content, it becomes weird 😌

[@DinoRossYT]

Truncate text makes the trick

[@arp6080]

Give fixed length to the rest of the column based on the second line text in the column

[@FablesOutofSpace]

Bro you are a lifesaver, now I have the ultimate table in my hands:)

[@benvsantos]

I am one of the 23 students then! Great Stuff, very practical and insightful!

[@Mizko]

Woo! Thank you Benv! Really appreciate the support

[@anatsharon1224]

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🙂

[@haooyy]

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!

[@Mizko]

Always happy to help 😉

[@DaJungleDred]

No way this is GOLD!!! Thank you

[@uimass]

MIND BLOWN.. Awesome! I struggled always creating a table. now its clear.

[@MoodNSoul]

You put a big smile on my face! love it man!

[@JHFS16]

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

[@JHFS16]

Mizko please!!

[@scottmackenzie9711]

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

[@jintian.]

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

[@Mizko]

Always here to help! 😉

[@bobbyantic]

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!

[@KimAlban]

as usual, great content!

[@Mizko]

Thank you Kim!

[@daniel_rad]

First! Great vid as always :D

[@Mizko]

Ha! Thank you Mr. Rad!

[@farshadamirshoghi9323]

Amazing, Thank you Mizko

[@josephkelly9564]

Great tutorial Mizko

[@TyranVz]

Gawd damm, thats beautiful, man!

[@jaecobliu5352]

You are amazing, sifu!!! Thank you so so so so much!!! Subscribed!!!!!!!!!!!!!!!!!!!!!!!!!

[@shamnadshah1622]

Boooooooooommmmm ❤️‍🔥

[@tanyacequi6556]

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! 😀

[@amberschen1124]

This is AMAZING!

[@kevinpaul3616]

Excellent one bro. Keep doing amazing stuff! Thank you.

[@Jennifer-fk5xi]

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?

[@Mizko]

Not yet. However if you want, you can set some columns as fixed and the rest can scale relatively.

[@lukasspfc18]

i was trying do that, don't see that it's not possible in figma yet :(

[@diegoalba3482]

Loved this video! Your content is always so helpful and relevant; thank you for sharing your wisdom with all of us!

[@Mizko]

Thank you Diego!!

[@iamgavcarter]

Absolute quality. Thanks again.

[@iamthomasogun]

Dude you are a genius....literally did not see that coming.😅

[@saurabhdaswant7833]

dayumm thank you so much i have subsribed you just after completing this video crazy stuff!!!

[@Mizko]

Wooo! Nice work :)

[@nunosobrinho2108]

Thank you for all the effort to prepare all these videos and share your knowledge. Amazing!

[@degn-musicproducer9663]

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]

Thanks! Ha, well you can turn each cell into an interactive component ;) Problem solved.

[@degn-musicproducer9663]

@@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 ?

[@georgejurukovski]

Top work mate!

[@Mizko]

Thank you!!

[@olajideakinpelu3495]

Master!!!! Awesome man.

[@mcjiehembile3992]

Thank you ! this is always on point and a fun tutorial, the strategy is very coder-friendly.

[@Mizko]

Woo! Awesome. Yes, it's inspired by Flexbox.

[@pieterspoelstra3391]

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]

Me too. Have you found any ways to make it work?

[@pieterspoelstra3391]

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

[@educationplus8829]

This is game changing man! Thanks a lot!

[@prerna2727]

I really like your simple teaching style

[@Mizko]

Thank you Prerna!! Means a lot and glad you found value.

[@sheikhdaniyalalii]

That was superb

[@sejalnaik5324]

Thank you so much for this!

[@hope-ag]

Mind blown, take your like

[@fatemefadaei7729]

YOU ARE AWESOME THX✨🤩

[@grav3ns3n]

THANK YOU!! Really thank you, Mizko.

[@saadrahman86]

yes, thanks for sharing this valuable video

[@richeaiulia4565]

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?

[@sunkanmiademuyiwa3153]

This is magical 😆

[@Mizko]

⚡️ How magical out of 10?

[@sunkanmiademuyiwa3153]

@@Mizko 10/10

[@marialirio7852]

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!

[@Mizko]

Thank you Maria! I haven't done many email designs for a very long time.

[@GulnisaMirizade]

Amazing tutorial! Thank you🤍

[@bryanorellana483]

Hello, are the classes recorded or live?

[@Mizko]

Recorded!

[@juliavasylieva3021]

This is very useful! 👏👏👏 Thank you for sharing!

[@Mizko]

Thank you Julia! Glad you found it useful

[@ashishk8462]

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

[@varunkrishnaKyathanpally]

Hi. Did you find any solution for this scenario?

[@DesignDen673]

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?

[@Nomeh_]

Awesome tutorial! I would have preferred the dashboard in light mode cos I was struggling to see some of the elements. Good job anyway 👍

[@bahrampour]

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 ?

[@andreeajircan]

Niceeee. Thank you! Can you do a video creating the mobile version of a table with many rows and columns ? ✌

[@yashkurale5428]

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?

[@rahulrs4597]

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

[@motocruiser92]

i Love you Bro.. thank u ❤️️

[@jbmaxcluster]

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?

[@tr3ysmith]

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?

[@merisimamovic965]

🔥🔥🔥

[@Mizko]

Thank you!

[@Anshikakhola]

Amazing tutorial. How do you further add elements in the table? For ex : Want to add a VIP tag next to the name

[@topteamfitness]

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?

[@ChoiJessica]

I only have constraints and the option left and right is not choosable. Any suggestions?

[@remusb]

I did it both ways. The disadvantage of having a separate layer with your grid is the fact that will not snap to it. But hey, people should pick its least evil way of doing things =)

[@Mizko]

Thanks Remus! Incorrect, it does snap. Did you see the frame snap to the grid in the video at 2:53

[@remusb]

The question is: how and when do you pick to go with rows or with columns?

[@Mizko]

@@remusb It really depends on what you are looking to design and how you want it to scale.

[@remusb]

@@Mizko I tried this a few times on my end (now and in the past a lot more) and it's not snapping to the columns (layout grid). In order for a layout grid to work, you must place the elements inside that frame, otherwise, it will be just a visual grid, but snapping will not happen. Cheers! PS: thanks for the fast reply.

[@Mizko]

@@remusb No problem! You can see at 2:53 I snap to the grid and I'm not working within the Grid Frame either. Not sure what you are doing incorrectly.

[@samuxui]

I really enjoyed your content, congratulations! Could you show us Brazilians how this table would look on mobile devices?

[@jessicamitchelle4872]

Hello Mizko! Is there a link to this figma file?

[@zoyaniknam6849]

I can not find resizing in the right side bar, how can I add it?

[@dabs91]

So for desktop should I always start designing with1440 x1024 or is it ok to start with 1920 X1080? sorry im new to this

[@mateuslorenz6999]

Thank you!

[@bonbon8702]

7:15 u hit what 😳💀💀

[@UsmanPro]

Vodafone Mobile App UI UX Design Using Figma 🎉 Full Video: kzbin.info/www/bejne/hZzcYYRtor-Jfpo

[@fflwhuu1849]

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. :(

[@Mizko]

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.

[@michalyael4963]

hey im having trouble selecting the entire ROW to make changes to color, instead I have to select each head of each column...

[@elahehhosseini9809]

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?!

[@Mizko]

It's for consistent spacing in UI design.

[@elahehhosseini9809]

@@Mizko yeah i know, but how did you find them ? Are there any rules about it?

[@Mizko]

@@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.

[@ShushanaAvchyan]

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?

[@Anayo-Ux]

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

[@rhidlor8577]

good video

[@adityamanampiring1217]

any idea how to do responsive table with different sizes width of columns?

[@kofY84]

what if one cell has 2 lines of text? It will completely break the layout.

[@Mizko]

It won't :) Autolayout is powerful. You can wrap the text easily.

[@danielenriquezambranosoler3756]

@@Mizko It completely broke for me, I followed all the tutorial, but still broke when I put 2 lines of text. Any suggestion?

[@Mary-jp6kx]

@@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

[@JeffNoyes]

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

[@mayabitar1316]

Thank you

[@balasekar4536]

Can we do this in xd?

[@Mizko]

You might. I have not used XD in a while. I might jump back into it and see how they are progressing soon.

[@sirjareq]

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.

[@pannontigris]

The height of the icon boxes is way smaller, and it's only fluid, not responsive - but other than that it was useful, thanks!

[@timothyojo7456]

Boom!

[@Ubertrends]

@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.

[@ThugLifeModafocah]

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)

[@HolographicKode]

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

[@starvemarve5530]

I screamed at 7:08

[@colinmaharaj]

never heard about figma before