Figma Tutorial: Building an Advanced Table - Part 1

Eye Design think is we are going to be building an advanced table inside of figma we use a little bit of their Auto layouts and then we're going to be getting into components and how we can use components and instances to then quickly build out a table automatically so that interests you then please sit back relax and let's jump into the video all right we are here inside of figma we're going to be creating our ultimate table so this will be the first part of a two-part series and this is just going to be the quick getter table built and understand the auto layouts understand the component and how we can quickly put it together so this is the first part the second part to the more advanced we are going to be basically building this guy over here this responsive table grid with components that basically will allow us to quickly fill it up and eventually when we get into the ultimate final one which is part two where we'll have this table so all we really need to do is actually build a couple of very simple components and with these simple components we'll be able to actually quickly populate this entire table just a couple of notes to understand the concept so a table is simple we have rows we have columns inside a column we'll have a header we'll have a we'll have actual row we'll have something at the bottom which I call a footer inside of our row which is like either it can be a row that has a record or it could be a row that has no record we will have to build out a component which is going to actually act as what's called a record slot we are going to also have our cell inside of a row we actually have multiple cells let's actually quickly build out these two slots here I'm going to start with building out my cell by open up my frame and to make a frame which is going to be 100 by 100 I will actually just quickly give it a fill I'm just going to copy over the parameters that I have there just so we can keep it looking nice and pretty and a couple of key things to note this will be an auto layout I'm going to be centering my content I do not mind about the padding at the moment we're going to be keeping this simple and I will actually copy over this text which is called text but it's called cell key thing you know good naming conventions always help you out and actually copy over as well the main convention on my previous cell and I'm just forcing the text to Center itself I'll make sure that text is filling there is this additional thing we don't need that right now besides that is pretty much okay all it needs to do is it needs to be a component and it needs to be able to be swooped or swapped out from like a different slot so we'll turn that in to our component there we go and now what I do need to do is what I'm going to build will be my actual column which is going to contain my record which is going to contain let's go we will build on it first I'll grab this and what I want is an actual just this Frame and that's why I've added all this additional spacing so you can see the layering that we're going to be doing very shortly I'll add an auto loud over this I will be calling this my record and I'm going to call it a slot and I will also just do the same thing or just copy over those parameters paste giving a spacing when we take this away that will be how we can modify the actual end result now what I have is a record slot a record will replace this here I'm gonna create and turn it into a component once again it will actually spit out the actual cell off to the other side which is great and then from here we are actually going to then actually build out our column it is honestly pretty much identical to this so instead of us wasting time you'll notice one thing this has the horizontal layer and I duplicate this I will detach it and all I will do switch it to my vertical now all I need is another slot very simple to this one why not we just duplicate it detach it and instead of this is going to be called my slot I will actually this will be cascading downwards so these will be my actual records because this is going to be my row section it will all pretty much make sense very shortly I hope we will call this our record slot I will switch that call that my record I'm just going to go change that color and I'm just going to turn it into a component as well now this here just needs to be replaced so we'll replace that guy and there we go so Agnes and I will create this so now I have a replacement for this one I also have a replacement for this one which is great and the magic will actually be starting shortly a good thing to note is I am going to make sure that this record slot will be replaced remember this is my record actually let's just change that we're just going to call this record we'll keep it simple this will be my record and my record is going to have multiple cells in it so let's grab this guy and replace it with this one because I have two cells I'm just going to add a number to it just so I can see it as I replace it so there's my slot what I'm going to do is allow for switching which I can basically add a name let's move my record oh that was and now I'll just press my plus button there is my record I will add that in and now you can switch it out which is great so if I was to take my child we'll take it duplicate it I can see the child I can see that I can switch it to this because I can switch it to that now I can actually let's first change the text back just because I already know that I have this one exactly selected I actually go copy I paste it there we go basically it will add in the cells and it'll continue to stack on that access which is exactly what I want another thing to note is that my record that's inside of here which is the thing that I replaced should also be responsive and now I have a grid that basically will fill up with records cascading down and cells cascading from left to right and exactly what I want so what I can do is inside of my piece here is I select one object just one and I can tell that object that I want to hug it from top to bottom so the actual cell size the height of it is fixed but I will make sure it fills left to right and make sure that the container around it will hug it from left to right and we'll also hug from top to bottom it's also good to know that we'll make sure that this will hug the content as well as the content inside though fill left to right and will hug from top to bottom so as I drag sorry and then all I need to do make sure the record Will Bill and then all I need to do there is drag it out done so now we've basically built the way that we can layer our content in a smart way because what we have is actual layered slots we replace the record with the record row that we built which is the default record row and inside of our default record row we have additional slots which are ourselves and we can Define what type of cells they are and because we only had one primary record and that one record is linked to this instance when I duplicate this guy it will create another instance of the same one which is exactly what I want and all I need to do is just make sure that it will fill now when it comes to components it's actually quite easy to make sure we can make it default behave the way we do by going to the actual component shift a I can give it a border because this is an auto layout I don't really need to worry too much about the top section I'm going to give it a space to ignore it you can also if you don't want to you can also use like a DOT something as well but I'm just using a space but now I have it in an auto layout what I'll do is I'll give it a quick border make it white and give it a check because I like to do and I will set it to eight because I also like that and then we also have 16 just to give it a bit of rounding because I have it inside of here I can actually tell the record slot to fill left to right hug top to bottom and do the same here and we can remove that and grab this grab the property and just paste that in at the top now this is my cell remember I want my cell to fill left to right I don't want it to hug top to bottom and there we go so when I create more of them it just responds exactly how I want the same thing for this if I want to I can do this another Auto layer I can make sure that this will always fill left rug top to bottom I can press shift enter which takes me up my layers I can then go to the top layer make sure I paste in that additional whoops we'll grab that border again [Music] I know I can remember the can never remember the actual shortcut there we go so there's our record I feel left for a hug top to bottom and it's responding nicely inside of that frame that I set up for it and that's pretty much it if we want we could actually just say we can call this a day and we can move on we've got our kind of pseudo responsive brain you notice that it breaks when it goes too high the one where we can adjust for that is make sure we just get it to cut and there you go but that's not exactly all that I want to do here because as you may have noticed back on our primary table we actually have this top strip and then we also have this bottom strip down the bottom same for here we can have the top and bottom strip and the easy way for us to do this is see how we actually have this record we can actually make malt a couple of those components but we don't need to make the one exactly of this record all we need is to make it off the parent which is of this record which actually controls for it so why not just do that which would be this person right here the actual record itself so let's just duplicate that and because it responds to this here responds to that I can actually create three things I can create my header section my record section my empty record section and that's what I'll be doing now and this is where you can start layering your actual components to Leverage The Power of the layering and we'll just move that to the side to leverage power I'm going to make intersection first so this will be my first one and I'll make sure that I call this header bam I will duplicate it I'm just going to detach it create it again and instead of being a header I will call this one my record item always good to try to add an additional or use a naming convention and then finally I'm going to create the empty section which I'm going to call it empty why am I doing this wrong empty great there we go because I have it layered all I need to do is actually edit my main piece here which is my record which in some ways if I wanted to I could technically call this my bro and this is why I did it like that to begin with because if it could make it a little less confusing so if this was my row then these are different types of rows and that means I can easily quickly Define what type of cell that I could put in that row now we actually had cells which is great we actually had this cell which is your default cell and we could actually add in a couple of extra cells inside of here let's detach those cells and what I can do is I've got my default cell I'm going to create a new cell and just use all the same stuff why not give me my header cell and let's say my header cell doesn't have a background I'd like my hair to sell to also have capitalized text I would like my header cell to also contain a property which allows me to adjust the text of the header cell and I will just leave it as a default as name as header value as header there we go now it's called health so that's my header cell it's called header saw now I'm going to just make an empty cell I don't want this cell to have anything in it I actually want it to be empty which is perfectly fine but you don't necessarily you could just delete this cell but I'd like to have a cell because at times I like to switch out elements of an empty cell so there we go there is my empty cell I'll create that as a component again now I have my cell my header cell my empty cell and now I have all the pieces I need to quite quickly switch this out and adjust for the elements inside of my row now this is my header row which is inside of my row which is this here and then these are the cells inside and if I was to add in additional rows cells I just need to put it in one place just here I don't need to put it anywhere else and then what this does is it populates down the scale here and as you remembered I could switch these records out but instead of switching these records up for this one I can switch it out for the actual record cell that's identified the advantage of doing it this way is that I can actually now switch out the top section with this the bottom section with that so it's the advantage now what I'm going to do is because I had a only three types here I'm gonna make sure I go to my row and grab my row and make sure that my row can pick cells from three different types so we're going to actually swap out our instances here and these will be my cells that I can swap out I'm going to go in here and I'm going to look for my three cells actually not I'm gonna do just to show you a little bit extra tip if I was to also name this Frame which I will do now this will be cell elements there we go by doing so this will be the reference to these cells so I can select the four which I don't need to initially select before I'm probably just going to delete them down to one and then just select one because life gets a lot easier when you're just dealing with one thing and you'll see that I have it under cell elements cell slot cell empty so on which is fantastic I can add a cell and I can call this cell elements and I can add those in that I will create this and now we'll have that now everything I'm doing is on a black background as you can see it automatically did White an easy way to clear up or at least add in a background color is when you have these defaults to Chuck a background on I'm going to Chuck my background to be similar the dark black that I have and as you can see that goes like that and what can happen is when I select my row I can see my cell slot I can see my cell slots inside my element and you can see that it's on a black background which is pretty cool from here all that I need to do is actually just expose this up the chain so in my row I can go to my elements and my properties and I can make sure they can show my actual nested property which is my cell slot by doing so my row can do so my row can actually see the cell slots I can pick header and I can adjust for the text as you can see it actually because it keeps the naming it actually recognizes the text which is great and here I can also Click on each of these oh actually maybe not we'll go here show nested which will be that one that will show my row nested this was going to show also my row nested which is showing my slot so row nested also showing my bell slot I can drag off and now I can actually just simply adjust for my cell slot so I can make one a header and I can make whatever okay really handy in most ways you could in theory just work with one of these I like to work with more because I like more flexibility but you could as you can see we have my three empty my record item my header I will actually Chuck those in an auto layout I'm going to actually copy this element one because I am very shortly going to turn it into a swappable so remember when I click I'll go copy properties I'm going to go here and just paste that property on there now I have my frame I can give my frame a name I'm actually so these are my different table rows so I'm gonna actually just call this table rows table row I sometimes my dictation software never works which is fun sometimes it does and my life gets really easy all right I'll make sure that my first table row I will make sure I'm accessing the actual slot itself I'm just going to change that to a header I'm going to call this header I will also make sure that the other table slot is actually just empty so that one is going to be empty and now because I have my collection I can easily grab my top slot and instead of making it the record I'm going to actually call this something different because this will be my header section and the great thing is that you can swap it out for more than just a header section and that's why I do it this way [Music] that is my header we'll create that one I will make your that it is actually a different different section so let's actually just swap it out and let's also swap out the bottom one detach that and that will be done there we go so I have my record slot I'm going to swap my record slot out with this one because I already have it assigned and I have a record signed to it I can just go to adjust it here and instead of using this I will actually come up to the top here I'm going to grab that one take that one on I'm just going to take off my row because we're not actually using the depop right we're using the actual row sections now I have it and it swaps out from macro sections which comes out of the record the great thing is I can now just continue to add to it so as I do it will duplicate that and that's basically our table and if I was to add at the top which is my this would be my row I was to add in additional cells we'll add in additional cells there you might not notice that it changes anything to do with the record there but that is absolutely fine because when I drag this off and I go to my record and I switch it out there we go and there is my records I can just double check make sure that they are all filling the way they should they don't always and just what you just have to honestly just make sure that you check inside your tables and that mostly has to do with these ones actually being fixed one deep down I just pressed enter to jump all the way down through the layers there we go those ones are filled all the way down to cell so that is how we can create a table that builds itself and also has all the responsive abilities all you need to do is take this and this and you can make as many cells as you need and you can have the biggest table instantly with all the cells you need inside of your table so I hope that this has been somewhat helpful um if there are any questions I'd love to hear some comments feedback in the chat below I'm always happy to help always looking at new ideas so if you have other ideas that you can do with this then please share it we're all here together to help each other so I hope you find all of this really good and next time we will be getting into actually building out a more like a table that you would use inside of an actual project and then we're going to talk about how we can set it up to work for mobile and desktop and make sure that we build off of this design and actually start to deliver something that looks more like what you'll find in other software so for that yeah please subscribe and we will jump into that video next time please and subscribe and we will be able to please and subscribe and we will be able to please and subscribe and I'll see you in the next video catch you next time bye

Channel: Pixellink

Views: 915

Keywords:

Id: xLouOE0_n3k

Length: 29min 48sec (1788 seconds)

Published: Sun Mar 05 2023