Design a Responsive Table in Figma Using Auto Layout (2023)

today's video I'm gonna show you how to design a fully responsive table in figma super fast so let's dive in the first thing we need for our table is the main table frame so I'm going to hit a on my keyboard to select a frame tool and I'm just going to draw a frame just like that the dimension doesn't matter at the moment so now I'm going to rename it to table and I'm gonna set its width to something like 1100 again it doesn't matter because it's going to be responsive and I'm going to leave the height as is now I'm going to tear in this table frame to an auto layout frame so I'm going to hit shift n a on my keyboard and before we start adding elements to this table frame I'm going to set its resizing options to fixed with and fixed height for now later we will change it but if I didn't do that when I put elements inside it tries to hack the content inside and it makes the process much harder so now we need to create our table cells so I'm going to hit t on my keyboard to select the text tool left click to create a text layer and here I'm going to type customer which is going to be our headers label now I'm going to add other layout to it hit shift and a and here I'm gonna name this Frame header cell and I'm going to change its height so we need to change the vertical resizing option to fix night and I'm going to change it to 44 because I'm going to make sure that it has a fixed 44 pixel height now I'm going to align everything to the center left the horizontal spacing between items doesn't matter at the moment but in case you want to add more elements to this cell later you can set it for example if you want to add a checkbox right next to this label you can set it at the moment I'm going to set it to 12 and as for the horizontal and vertical padding I'm gonna set the vertical padding to 12 and the horizontal padding to 24. all right cool now while this header cell is selected let me change its color I'm gonna add a feel to it and I'm going to use a very light gray like this and I'm going to select the text inside and just change its color to something darker like this all right good now I'm going to select this header cell and I want to add a stroke to it however I'm going to add a stroke to only one side the bottom side so while it's selected I'm going to head over to the stroke section hit this plus button and here I'm gonna specify that I want this stroke to be added to only the bottom side here and the color can be a darker gray like that and we are basically done our header cell is ready later we need to adjust the resizing option of this text but for now let's move on and we will get back to it later alright now I'm gonna select this main table frame and I'm gonna set its padding to zero because we don't want it to have any padding just like this so our header cell can be aligned perfectly to the edges of its main pattern frame all right now it's time to duplicate our header cell and I'm going to create the item cell now so first let me rename it to item cell and what we need to do here is change the height it should be a little bit larger so I'm gonna set the height to 64 instead of 44 just like this and this one is going to be our item cell and we can go ahead and select this text inside this item cell and make it a little bit lighter just like this alright now it's time to select these two cells like this hold down the shift key and select them both and we need to put them inside another other layout frame to create our column so I'm going to hit shift the name to add other layout to them and I'm going to rename it to column all right now let's change the duration of our other layout to vertical and just remove the spacing between items next we can select this item cell and start duplicating it so hit Ctrl D or command D on your keyboard as many times as you want and here is our table column that includes a header cell right at the top and a few item cells underneath before we continue I'd like to take a moment to tell you about a great tool that's helped me stay organized and collaborate more effectively with my team it's called Walling Walling is a visual tool that allows you to create beautifully designed walls to Showcase your project deliverables and impress your clients with Walling you can quickly collect ideas notes files and links for your new project and organize your project in different wall sections you can even customize your wall with your own logo and brand colors and with walling's collaborative features you can invite your teams or clients to collaborate with you in real time add comments or vote on ideas plus with powerful task management features you can ditch your old project management app and manage your tasks on the same project wall visit walling.app today to create a free account and start organizing your ideas and projects with ease thanks waling for sponsoring this video now what we need to do is Select this column and just duplicate it hit Ctrl D or command d a few times let's suppose we want our table to have four or five different columns I think four is enough and now I'm going to select our table frame and I'm going to set the spacing between these items to zero but we have a problem these columns are not taking up the whole available space within our table frame to fix that we just need to select all these frames alternatively you can just select the table frame hit enter to select all the child items and just change their resizing option to fill container now we have another issue our cells our cells inside these columns should take up the hole available width of their own parents so I'm going to hit enter to select all the cells inside these columns and I'm going to change the resizing option to fill container just like that and you may say that all right we are done however there is one more thing we need to do why all these cells are selected I'm gonna hit enter once again to select all the text labels inside and change the resizing option to fill container as well and now we are basically done but I'm going to go ahead and change the siding of my table a little bit to make it look even better alright so now I'm going to select this main table frame and I'm going to change its vertical resizing option to hot content to hack the content inside vertically and now I can make it a little bit rounded so I'm going to increase the corner radius to maybe 12 and also I'm going to add a stroke to this main table level so let's go ahead and add a stroke to it and I'm going to use the color that I used for these Strokes so let me paste the color code and just like this our table is ready now let's check it out and see whether it works or not I'm going to select this table and I'm just gonna resize it and as you can see we have a fully responsive table but there is a problem here we forgot to change the background color of these item cells so let's go ahead and select all these item cells inside these columns I'm going to select these columns hit enter to select all the cells hold down the shifting on your keyboard and just deselect these header cells just like this and I'm going to change their background color to white just like that now it looks much better okay now that our table is ready let's see whether we can add another type of item to these cells or not I already prepared a checkbox and a few badges to add to these cells so let's suppose you want to add a checkbox to the First Column cells okay so here I'm going to head over to assets and here I'm going to drag and drop this checkbox right here now I'm going to copy it select all these cells just like this and hit Ctrl V or command V and while these are selected hit the left Arrow key on your keyboard to move it on the other side of this label what if you want to place badges into the last column cells well we can do that as well so here I'm gonna go to assets and I'm gonna drag this complete badge to this cell I'm going to hit Ctrl C or command C select these cells and just paste it here and move it to the other side and you can go ahead and get rid of these labels and I can change the type of batch here to the cancel badge just like this to make it look a little bit more realistic and now let's give it a try once again as you can see it's still responsive but here is a tip I have for you sometimes it makes sense to make one column within your table or two columns it depends to have a fixed width and let the other columns to be fluid how can you do that it's so simple let's suppose you want to have this First Column to have a fixed width in that case you can simply select this First Column within your table and then here just change its resizing option to fixed width and you can specify its width right here let's suppose you want this First Column to have a 400 pixel fixed width just like this now if you go ahead and select your table and you try to modify its width look what happens you see now these three columns are fluid and this one has a fixed width but you might say if I select this desktop frame and I try to resize it nothing happens it's not responsive yes it isn't because we didn't set the constraints here so what I'm going to do is align this table to the center and I'm gonna select the table and here I'm going to set the constraints to left and right just like this if I select my desktop frame here and I try to resize it there we go our table is fully responsive if you want to enhance your table by making its headers sticky make sure to check out this video and as usual if you found this video helpful please hit the like button and subscribe to my channel for more UI ux design tutorials have a great day and see you next time

Channel: DesignWithArash

Views: 13,639

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, figma table, auto layout figma

Id: HfcMYRIC0Fw

Length: 10min 24sec (624 seconds)

Published: Tue May 09 2023