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

10 ай бұрын

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

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

2 жыл бұрын

Thank you Huyen!

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

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

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

2 жыл бұрын

Appreciate it Aditi!!

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

@Mizko

2 жыл бұрын

Glad you enjoyed it.

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

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

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

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

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

@Mizko

2 жыл бұрын

Thank you Diego!!

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

No way this is GOLD!!! Thank you

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

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

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

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

2 жыл бұрын

Always happy to help 😉

This is game changing man! Thanks a lot!

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

2 жыл бұрын

Always here to help! 😉

Absolute quality. Thanks again.

as usual, great content!

@Mizko

2 жыл бұрын

Thank you Kim!

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

@Mizko

2 жыл бұрын

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

Master!!!! Awesome man.

THANK YOU!! Really thank you, Mizko.

Amazing, Thank you Mizko

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

Great tutorial Mizko

Amazing tutorial! Thank you🤍

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

@Mizko

2 жыл бұрын

Thank you Julia! Glad you found it useful

Thank you so much for this!

This is AMAZING!

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

Gawd damm, thats beautiful, man!

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🙂

Top work mate!

@Mizko

2 жыл бұрын

Thank you!!

That was superb

yes, thanks for sharing this valuable video

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

@Mizko

2 жыл бұрын

Woo! Thank you Benv! Really appreciate the support

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

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)

@Mizko

2 жыл бұрын

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

YOU ARE AWESOME THX✨🤩

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

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

@Mizko

2 жыл бұрын

Wooo! Nice work :)

I really like your simple teaching style

@Mizko

2 жыл бұрын

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

Mind blown, take your like

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

Thank you!

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.

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

2 жыл бұрын

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

i Love you Bro.. thank u ❤️️

This is magical 😆

@Mizko

2 жыл бұрын

⚡️ How magical out of 10?

@sunkanmiademuyiwa3153

2 жыл бұрын

@@Mizko 10/10

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 ?

Boooooooooommmmm ❤️‍🔥

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

First! Great vid as always :D

@Mizko

2 жыл бұрын

Ha! Thank you Mr. Rad!

Thank you

Boom!

🔥🔥🔥

@Mizko

2 жыл бұрын

Thank you!

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

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

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?

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!

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

good video

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?

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

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?

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?

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

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

2 жыл бұрын

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

@degn-musicproducer9663

2 жыл бұрын

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

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?

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

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

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

2 жыл бұрын

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

@lukasspfc18

2 жыл бұрын

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

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?

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?

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

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

never heard about figma before

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

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

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

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?

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

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.

Vodafone Mobile App UI UX Design Using Figma 🎉 Full Video: kzread.info/dash/bejne/gZ-tkrNwnb28eJs.html

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

2 жыл бұрын

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

@remusb

2 жыл бұрын

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

@Mizko

2 жыл бұрын

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

@remusb

2 жыл бұрын

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

2 жыл бұрын

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

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

Hello, are the classes recorded or live?

@Mizko

2 жыл бұрын

Recorded!

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

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

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

7:15 u hit what 😳💀💀

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

2 жыл бұрын

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.

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)

We've got our very first HEAD....lol

Can we do this in xd?

@Mizko

2 жыл бұрын

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

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

2 жыл бұрын

It's for consistent spacing in UI design.

@elahehhosseini9809

2 жыл бұрын

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

@Mizko

2 жыл бұрын

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

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

@Mizko

2 жыл бұрын

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

@danielenriquezambranosoler3756

2 жыл бұрын

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

2 жыл бұрын

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