Designing Responsive Tables with Auto Layout in Figma

hey everyone it's javi here and in this video i'm going to be sharing some tips and tricks with you on designing tables in figma but not just any kind of table our table is going to be responsive it's going to have hover and click states that are going to be interactive for our rows and at the same time it's also going to be a component that we are going to be implementing variants on top so we can toggle the columns on and off all in the same table and just to give you a quick tease of what that looks like let's jump into figma for a second here so i can show you this table and as you can see if i move this around it's going to be fully responsive to the adjustment and width also if we go ultra wide here and if i drill into the component itself you can see that we've got our fancy variants here in place and as you can see as i turn some of these on and off we've got the whole table that is reacting accordingly so that is what i'm going to be talking about today for those of you who are new to my channel welcome my name is javi and i make weekly videos about product design skills principles and practices to help you build digital products and bring your ideas to life don't forget to subscribe to my channel if you want to keep up with that weekly dose of pixels and code and everything in between if that sounds like something that you're interested in all right so let's jump back into our figma file to start working on this table there is a fundamental principle that we have to get a really good grasp on and really really understand in order to get to designing tables like these in figma and that is the concept of auto layout and how objects flex based on the auto layout properties and this is really important because it is truly the composition that makes this table responsive and so if i'm just going to do a little bit of an abstraction here let's say we're going to draw a couple rectangles right so i'm going to make some rectangles here with different colors and i'm just going to do these for you so we can really understand how flex in the background is working and flex is just the technical name for what you see in figma as auto layout so that is coming straight from the world of code and it's just a property that defines how certain objects behave next to one another given some adjustments to how that code is written all right so now that we got these five columns in place imagine these are columns of your table and what we can do now is go ahead and do shift a in order to create an auto layout frame around these columns so this is doing two things it's first of all creating a frame that is going to be containing all of these rectangles in the same frame and the second thing that it's doing is that it's applying an auto layout with a spacing of one i think we can bring that down to zero and now we have an auto layout that is in type packed there are two options here packed and spaced between and here you have the auto layout positioning so we don't have to talk much in depth about that piece right now what's really important is actually going into each of the objects each of the rectangles that we created and looking at the properties of those instead so here you can see that if i click on any of these rectangles there are some resizing properties essentially fixed width and fixed height and this is going to dictate what happens to the rectangles as this is going to be moving left and right in scale and up and down so the reason why these are not moving right now is because we have a property per rectangle that is fixed width that says no matter how much you move this table it's not going to change the width of any of the objects within it because we want it to be fixed right so let's say now what i want to do is i want to say okay this is going to be instead of a fixed width it's going to be fill container let's see what happens now so not much is happening right now and that is because we have this outer layer that is covering the entire area here of our rectangles and because there is no extra space for that first rectangle to move around it's just going to be staying in the same place and that is why when you make that adjustment not much is going to happen at first but now however let's actually try to do the same thing we did before and actually move this left to right and as you can see now the first rectangle is no longer fixed in width and it's actually moving along the table as we scale so that is one thing to keep in mind what is also worth mentioning is that if i take any of the other rectangles and i change the property there from fixed width to fill container so let's take for example this green one in the middle let's change it from fixed width to fill container you can see that now that extra width that we are adding to the table is being split amongst these two rectangles at the same time right so as you can see the red and green are staying with the exact same width adjustment because they are behaving in the same way as we are adjusting the width of the table if we now wanted to go ahead and take this model and apply to design a table like this what i would do is first of all define the types of columns that are going to make my table based on the kind of objects that live within that column right so in this case for example we would have let's say one column here that is about users and this is going to have an avatar profile picture name and a subtitle this column is going to be text only this column is going to be let's say this little badge and these are going to be tags so we have four different types of columns here and so what i'm going to do is show you how to recreate one of these columns in order to go through that design process but what i actually did is something a little bit different and we will talk about that in a second but just to share with you the practice of creating these columns here in my case we have a little component here that is the single composition of a row item so i could go ahead and take this and this by the way already has a built-in divider at the bottom for the border bottom to be a little bit faster now i can select both of them do my shift a for auto layout and change the spacing in between to zero and now i have a vertical auto layout i can call this users and i'm just going to simply duplicate a couple of these so now we have that in place and it could be worth it now that we're here to also make sure that all of these are going to be resizing based on the fill container property so as i'm resizing the whole column it's going to adjust right as we expected so now if i do this may not be too practical but you get the idea of how things are responding as i do that with adjustment now that we have this in place i'm going to go ahead and create a component out of this and we're going to be calling this column right so we're good to go there and now we want to have a couple of variants for this column because we have different column types right as we described earlier so i'm not going to be doing all of them but just to show you the variant effect for how this works and how it could be handy for you is i'm going to go ahead and just adjust the width here of my variant box probably not going to need this one here what i'm going to do is i'm going to create another column here for just normal text and i'm going to do it outside of the variant for the first shot at defining this because i want to be able to define the auto layout nicely here so i'm just going to do a duplicate i'm gonna drag it outside and then i'm gonna use auto layout here with zero spacing in between to create one two three four five six seven so let's do that three four five six seven so we're good to go there and we can call this column actually because now if i make a component out of it i can drag it into my auto layout here sorry not all the layout my component variant and as you can see it's going to integrate it nicely now we just have to make sure that we are adjusting the property names here so this is going to be called let's say type and now if i come here to each of these columns i can give it a specific name so this type will be users and this one let's say will be text all right so we are good to go there let's just also double check that we do the resizing appropriately of each of these row items to fill container this is very important and now that we have these in place roughly you could go ahead and make a table right so if i just drag this one outside it will create an instance of that column component and now that we have this in place i can actually take you back to the rectangles and imagine that these are the rectangles that we created here in the beginning of the video and so what you would do is literally the exact same thing you would take the column and you could say okay i want this one instead of users i want it to be text and now i'm going to have another text and let's say i'm going to have another text and there's a little bit of an awkward spacing here with the width so let's actually adjust that i think that is coming from this component right here let's see where is that coming from that is coming from the row item itself and i think that is because i copy pasted it from this table here that already has some kind of auto layout in place so let's go ahead and fix that just by moving this a little bit i'm going to change it to 259 and also going to make sure that this is 259 as well so let's give that a shot and this should be a little bit better once we are putting them together so now i think that the width also changed in the row item properties we have to change the resizing again to fill container and now hopefully there's no awkward spacing okay that's great and here's the thing so now we have those rectangles in place what we're going to do now is create a outer frame that is going to be in auto layout so i'm going to hold my shift a around these four different columns and there we go now we have made ourselves sort of a simple table i'm going to rename this a table in this case we have the user column here having a little bit more width than the other three which are text as you can see if i were to go ahead and make all of these fill container you will see that they will proportionally share whatever width the table has so if i were to resize this let's say you can see how everything inside of it is also resizing and if i were to let's say remove a column from this table all of the other columns are going to be adjusting appropriately right if i were to for example add a column you will see that the adjustment is happening but in the inverse everything is becoming a little bit more condensed so that's pretty cool because it's going to allow you to design tables very quickly and honestly if you're not interested in the whole like interaction thing between the columns that we're going to look at now this is probably the fastest way to design tables in figma you're going to be creating the different types of column types that you're going to want to have across your tables and then once you are here you're designing a table for your add-oc design solution or design project and you're going to be just simply adding and removing columns and then defining what those column types will be and now that we have this in place we can also mention that in some scenarios you may want to have one of the columns that is fixed all the time so that could be for example with respect to the first column right here and i could say i want this to be always 400 and just to make it obvious what we're looking at we can take each of these and because we have the background applied to the individual row item i have to do it here we could just change the color here to make a little bit more obvious you can see well not this one because i think this is the color of the background of the file so how about something like that and as you can see now everything else is filled container except this one which is fixed with if i were to go ahead and now resize a table here you can see that the first column is going to stay fixed but all the others are adjusting their width accordingly as we saw earlier but in this case without the first one and this could also be quite handy because sometimes or oftentimes you're going to want to have maybe one column that is always going to keep that width so you know what fits and that information stays relevant across the experience so that is another tip for you to actually design tables uh in figma there are two more things that i wanted to walk you through in this video which i mentioned in the beginning which we haven't covered yet and the first one is how to wrap this around a component which you can then use variants on top to easily toggle columns on and off this is a bit more of a comprehensive amount of work a little bit of manual work as well and this is going to work well for you in the case that you have a very clear understanding of what a structure of your table is across your product and if it makes sense for you to have the you know be making use of variants to easily switch columns on and off that's fine other times what you can do is if you have those columns in place just easily show or hide them if you just have one component let's say you can just show or hide them and that's fine in this case i just wanted to use uh you know the very comprehensive example here just to show you how far you can get right so if i were to now here you can see the variance and each of these variants is essentially a combination of switches that are either on or off for those columns so as you can see i have a true or false for checkbox such who were false for the role column the status the tags and if you want to see this in action then here is the example that i had earlier in the video that i was demoing and what you can see here are those toggles so if i were to show or hide any of these as you can see we have the appropriate changes on the left side here in our table so i'm showing and removing all of the properties of the table based on the adjustments and the variants so there's that if you want to go ahead and do that it's pretty easy even though it's quite manual and the return on investment may not be the greatest but that is something that you can definitely do with tables if you have a very clearly defined structure for them across your product the last thing that i wanted to cover in this video has to do with the interaction design of the individual row components of our table and how to make that work with what we've talked about so far regarding responsiveness and i'm mentioning this because if you'll recall we've been having a very heavy emphasis on the way columns work and this is great because it's really fast and as i mentioned earlier if you don't really care about the interaction design of the rose because it is a lot of extra work and it's not going to pay off for you then this is going to be the fastest way to just set up your column types and easily add and remove them from tables as you are designing them in your product if you want to take it a bit of an extra notch and design those interactions that's cool but just so you know there are some extra steps that we have to take because as it is right now i don't have a lot of control over saying you know what exactly happens if i were to for example hover over this row or that row and it's a little bit hard in finland to do that because we're not really defining this row as an item of our table as you'll notice we just have columns to get a better understanding of how we can make this work i'm just going to quickly walk you through the layer structure of the table that i've already created and as you'll notice this is a table component that is composed of a head component here at the top with the properties of each of the column the property names let's say and here we would have each of the rows and if i dive deep into one of these rows i'm just going to make sure i bring it up here so you can see it this is essentially a combination of frames for each of the columns and this is going to be working exactly in the same way as we defined each of the individual items of our columns earlier right so if you'll recall this was the exact same frame that i used to compose a column what is changing here is that instead of using this component or this frame to create a column i am using it horizontally and combining them to create rows and the way that this will work is that you have to then define per item what is the resizing right so in this case i want to have all of these be fill container with the exception of the more options button here which is going to be fixed width and i believe also the check box here at the left is fixed with so that is one of the main differences but the other main difference with respect to our column structure earlier is that if you'll recall here it's very easy to add and remove columns right i could just say you know i want to remove this from view and it gets removed but of course now because we don't have columns in place and let's say i were to create a or you know not even create but i wanted to remove a column from here and i didn't have these toggles for the variants and honestly that's the reason why i ultimately made these variants so that i could easily add and remove columns from the view it's because otherwise it becomes a little bit hard because i have to be going into each of these and you know removing individual row items from the view because now those frames are belonging to each of the row items that compose a table rather than being a single column itself so you know i could achieve the same effect if i were to remove just one of them it would make this look a little bit weird and i wouldn't want to have that so as you can see it is possible to combine both worlds the responsiveness and also the row structure of our table but it comes at the trade-off of having that flexibility to easily add and remove rows but what we get instead is the ability to to you know introduce changes to how the rows react to interaction and i essentially have the row component built right here so i just created instead of having components for each of my columns i have a component that is for for the row itself and what i did here is i created a row component with three states default hover and active and so as you'll see here i have just a little bit of a change in the way that i styled the background here so it's going from uh in this case nothing to um to gray 100 so this is going from white to gray 100 and then when i am doing the uh you know the active state when i click on the hover row it's going to turn this into a little bit of a light blue and the checkbox will be turned on as well so if we have a look at how this works in prototyping if you have the interactive components built in already in sigma which is currently in beta you can see that we have one while hovering effect for this one to go into the hover and then if i move my mouse out of the hover it's going to go back to the normal state so that is that is one interaction between the two and then the other the effect that we would want to achieve is that when i click on the hover row it's going to turn on into active and if i click on the on the active row again it's going to go back to the hover so if i were to go now into prototype mode and we can do that because i have a frame here with our table component there we go so just to show you how this works if i were to let's say hover over this you can see we have the hover effect in place and now if i were to click anywhere on the row it's going to go to the active state and if i click outside it's going to unclick it and go back to the hover and we can do this for all of the rows essentially right because all of these are instances of the same component ultimately so i could select this one then i could let's say come to the one below it and if figma wants to do this with me as i am squeezing the power of my computer here you can see that i could select and hover over multiple of these because again these are instances of the row component where we define those interactions and that is pretty much it as you can see we have a table with the interaction design it's a component with variance and it is fully responsive and that is all for today i hope that you found this video useful if you did don't forget to give it a like to let me know and if you have any questions comments or suggestions regarding anything that we covered in this video or things that you want to see related to this in the future let me know in the comments section below i hope that you are safe and well and i will catch you in the next one

Channel: Javier Alaves

Views: 11,179

Rating: 4.971292 out of 5

Keywords: auto layout, figma design, ui design, figma tutorial, interface design, responsive design, figma auto layout, figma constraints, responsive table, figma autolayout, figma tables, auto layout figma, figma ui design, auto layout tutorial, auto layout figma tutorial, figma design tutorial, figma tutorial web design, figma tutorial prototyping, figma interactive components

Id: 5_mt85me9D8

Length: 22min 23sec (1343 seconds)

Published: Wed Apr 21 2021

Reddit Comments

[u/ND0Y3M4N]

Nice tutorial

[u/CatchACrab]

Good strategy for tables that have rows with equal height. Starts to break down when you have things like text cells that can expand to fit their contents. In that case, the best method I've found is to compose your table from row components rather than column components.

In any case tables are always the most annoying things to implement in a truly responsive way.