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

hey beautiful people it's misco here and today i'm going to walk you through how to create a highly responsive table design inside figma leveraging auto layout so let's get right into it guys but before we do i just wanted to take a moment to thank every single one of you over the last two weeks i've had over 700 students enroll into my figma and ui design masterclass within the 700 students 23 of them have already graduated and received a certificate and i have been receiving an overwhelming positive response and feedback from every single one of my students so i just want to let you guys know i am forever grateful and if you do want to check out or learn more about my figma and ui design masterclass make sure to check the link in the description early bird prices are still intact so take advantage of that so without further ado let's go ahead and design this highly responsive table design so here i have a frame for 1440 a resolution and i've got a bit of a design a sidebar and also a navigation up here and if i resize this it's obviously responsive as well now i only want to make sure that this table is going to be responsive inside this content area over here so what i'm going to do is i'm going to hit f my keyboard and draw down a frame just to cover the content area and i'm going to go ahead and hit layout grid the plus on the right hand side change the grid to a column change the count from 5 to 12. i change the red to a white just in case people find it difficult to see the red on the uh navy background change the margin to 32 and then change the gutter to 16. so this is why i've done this right so i'm going to go ahead and just rename this to grid and i'll lock this for now and i'll turn this off so when you were designing with a fixed sidebar for a dashboard for example what you what normally people would do is they would go ahead and add a grid layout on top of this right so they might go columns and they hit 12 um just make it white so people can see it and sometimes they might go left right and then give it a width of 80 80 pixels and then they might offset it to the right hand side now this is a very very inefficient way of doing grid layouts for dashboards like this it's not scalable because as you scale this out it's not going to really fix and it just doesn't not work so i'm going to turn that off and i'm going to turn this grid back on and let me just quickly go ahead and constrain this to the left and right hand side right and you can see if i now stretch this out this grid layout is responsive for this dashboard design right with the fixed sidebar and you can see that the grid layout only extends to where the bounding box ends right here so if you if you're designing a dashboard with the fix a sidebar this is how you would go ahead and create a responsive grid layout all right so let's go ahead and create this table first thing i'm going to do is hit f on my keyboard and i'm going to draw down a frame and then what i'm going to do is just rename this to table this is going to be the parent container and i'm going to hit shift a and turn this into an order layout i'm going to make sure that the order layout direction is set to horizontal i'm going to change the margin between the elements to zero and the padding to zero as well and then i'm going to change the constraints and resizing for the horizontal axes to be fixed because i don't want this to collapse when i put items inside so if i change it back to hug contents and i draw a box inside you can see if i select the table it's not full width anymore because it was set to hug content and it will automatically hug whatever is inside so if i hit command z and just revert back to what i had changing this to fixed and then i'm also changing the constraints to left and right so if you can see now with the dotted lines this is always going to be constraining to the left side and also to the right hand side as well so if i give this a fill and i stretch this out this entire container this table the container right the parent container is responsive so we've got everything down pat for the container so i'm turning off the fill so that now that has been correct uh created i'm gonna hit f on my keyboard and i'm just gonna quickly draw down a frame down here this is going to be the head of the table so a table in a web page is created with a few elements inside a table you first have the header which is where you have all the labels and then underneath the header you have a row so now that you've got your head i'm going to go ahead and just rename this to head and i might just give this a background color so you can see this a little bit more clearly you can see that i'm going to turn this grid off as well we've got our very first head and i hit t on my keyboard and i type in for example name so this is going to be the the name column i'm going to go ahead and select my head hit shift a turn this into an auto out component i'm going to make sure that the direction is horizontal that there is no spacing in between and in terms of the padding this is going to be 16 24 16 and 24. you can create whatever spacing that you want and now what i'm going to do is i want to make sure that this item here this head in terms of resizing on the horizontal axes it's not going to be fixed because i want it to be responsive it's always going to be flushed to whatever space it has it's not going to be hugs because right now it is hugging the content but i want this to be flushed all the way to the edges i'm going to make sure that this will always fill the container right you can see that this now fills a container so once that is done what i actually want to do is i want to go ahead and hit shift a once again and i want to wrap this header right inside a order layout called a column because when i'm creating this table i want to make sure that i have a column for name a column for a description a column for job details and then another column for whatever i want might be notes right so now that i've got my column i'm going to make sure that the direction is vertical the pad this margin is zero and the padding is also zero as well so you can see it is nicely tucked right inside and i want to make sure that everything uh the horizontal axis for the resizing is fill container but for the vertical axes it's going to be hug contents because if i go ahead and now duplicate this head i want to make sure that this column is always hugging all the content inside so now this head that we just duplicated i'm going to rename this to row i'm going to remove the background color and i can rename this to name to michael so this will be the first entry under the name right so if i go ahead now and duplicate row i can now create five rows or six entries or seven entries whatever however many entries i want for this table it will be created right now the magic is here this is going to be highly responsive so if i go ahead and select this column now and hit command d boom you've got two columns inside your table i hit the command d again you've got three columns and then you command d again you've got four columns right so this is how you can create a highly responsive and scalable table design inside figma and it's systematic as well so if you want to add more all you have to do is hit command d and duplicate the rows now the final thing that you need to do is you want to make sure that your table right is selected and you want to make sure that everything is constrained to left and right what you can do is a little hack is hit enter on your keyboard and this will nest down your selection for to whatever is inside the table inside the table we want to make sure that all the columns are filling the container that's correct hit enter again you also want to make sure that all the rows inside your table inside your columns are also set to fill container you can see that because they're fixed width they extend outside of your table and that means it's broken so you want to make sure that fill container is selected you hit enter once again you want to make sure that all the text inside is also filling the container so you can see that right now everything is inside this bounding box and everything is systematic so if i go ahead right and hopefully this works if it doesn't work you guys can scrap it mizco is just wasting your time but i'm sure this will work if i resize this now this is going to be highly responsive as well and this is the benefit of utilizing auto layout as well if you decide to add some icons in the last column because generally for the last column in a table you have all your actions and icons you can go ahead and imagine this is an icon that we're drawing down and i'm going to delete the word word michael i can go ahead and select this row and i can align this to the right hand side so if i go ahead and just apply this to all these so let me just go ahead and delete all these and duplicate this row you can see that let's delete this one oops and if i resize this this will always keep your actions flush to the right hand side and it's always going to be responsive so from here now if you want to design highly responsive designs you can achieve it in seconds because if you want to do a design for 1920 you can see that it will automatically scale everything out for you so hopefully this gives you a better understanding of how to create a responsive table inside figma and if you want to learn how to use auto layout and master it to not just create a little component but to create an entire web app website or even a mobile app make sure to check out my figma masterclass course because we'll be covering everything to do with design systems taking that design system to creating highly responsive designs inside figma all right guys hopefully you enjoy this video i will see you in the next video very soon [Applause] [Music]

Channel: Mizko

Views: 52,159

Keywords: figma, figma autolayout, figma tutorial, figma autolayout tutorial

Id: EjkAeYzy2C4

Length: 10min 11sec (611 seconds)

Published: Mon Sep 13 2021