Figma components: the basics to creating robust components

in this video we are going to be exploring figma's components we're going to be starting off really really simple but we're going to be building up into some pretty cool stuff so as you can see on the screen now we have this one component that can just do a whole bunch of awesome stuff we're going to build a whole form with it we'll be able to change between different states of the component be able to change different things within the component it's really really cool figma components are extremely powerful and with auto layout around now it's really robust it's amazing what you can do with just a single component and all the different stuff you can do with it if that sounds interesting to you make sure to stick around hi there my name is kevin and if you're new to this channel here it's all about learning how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and as i said in this video we are looking at figma's components i am going to be starting with the really basics of it and building up from there we're covering quite a lot of material in this video as you might have seen from the length of it so i hope that didn't dissuade you you are here so thank you but i did include timestamps down below if you want to sort of jump past the very basics of it you can but we're going to be looking at components we're going to be looking at how auto layout has changed how i approach making components so i'm just going to be making a button component at the start because what's a figma component introduction if you don't use buttons but there's a good reason for it and i do explore a few things in there that are completely i sort of changed my approach on how i do it to make those components much more robust so i'm going to be starting with that and then we're going to be diving into the more advanced form thing that i do uh where it's sort of a mix of using you know it looks at what we learned with the buttons but pushes auto layout to another level within those components to do some really cool and fun stuff i hope you enjoy it and learn a few things along the way let's jump right into it okay so let's jump into figma here and as you can see i have nothing much going on i have set up some color styles already as well as a shadow but nothing too much going on i will be making a video eventually on local styles and style effects and stuff like that um they're very simple and pretty easy to create and to understand but the one thing i would encourage you if you are making components is to make sure that you have those set up from the very beginning and to be using your color styles right away um so generally speaking if you're doing like a full design system and making a lot of components you probably want to do all of your colors first do all of your typography and then move into these other things but this video is focused just on making components and not doing an entire design system if you're interested in that leave a comment down below maybe we could look at it one day um so i have my frame here and i'm just going to take some text and there's two different ways we could do this actually let's make a rectangle first so i'm just pushing r on my keyboard and then i can come in and make a rectangle and i know every single um tutorial you watch generally will be um using a button to introduce components and that's because they're a really good use case for doing so so let's grab that i'm just going to do a center center maybe my text here could be a little bigger oh 16 is not bad actually maybe then we could just make this a little bit smaller it's a little bit big and i'm going to right away choose the colors i want so on my fill i'm just going to click on the four little circles here because i already have my color style created if you don't have a color style you just click new and then you can create a color style so it's not like it's hard and then i'm going to click on my text there and i will also choose i have a white one right there and so i have a button and i could use this button and if you're used to other design software you probably would do is just option drag or copy and paste you know copy paste and you have more buttons and you just use your buttons that way so in this case though we're going to do things a little bit different and i'll look at a second way you can actually do this as well but let's just start with that and before making it a component what i'm actually going to do is create an auto layout and auto layout i was going to introduce this in its own video but there's such a big part of components now um that i'm going to do that now you can either go to auto layout and click the little plus sign or you can just push shift a and you'll actually see what that's done is it's called it frame two and in my frame two i just have my text and this frame which is the auto layout it changes everything to be a padding now pretty much so i can control the padding of my element that way now this is also really handy to say i did button here i don't actually have to create that box i could just come to here push shift a because you don't the auto layout options not here since i only have one thing selected it doesn't think i want to do that so the contextual menu isn't bringing it up but again i can push shift a and it still works and it turns it into an auto layout and that auto layout i can give that a background fill right here so i can give it the color let's just do a different one i can come and create my button and i can do it that way too so you don't have to create the background right from the beginning but whichever way you want to work but at the end of the day it's the exact same result okay so now actually into components so i would suggest doing the auto layout thing first just because you want to get it exactly what you want it to look like ideally from the beginning and then what you can do is create a component the shortcut for this is ctrl alt k i'm guessing that's command option k on a mac and i really don't like that shortcut because i can't do it with one hand so i tend to come up here and use this guy which is the create component button you can also right click on something and in your selections there there is a cr there is create component so i know it's a component because it has changed here you can see it um if i undo that or let's just make something else let's just make a rectangle um you can see it has my little thing there if i do auto layout on that it changes it to something like that um when it's a component it gets these four little things that make like a diamond shape or four diamonds and that make a bigger diamond that's actually really important because that means it's the master component this is the component that will control all my other components and if you're coming from something like sketch where components usually live somewhere else in figma they live just in the artboard like anything else you don't need to have a separate place for your master components and actually let's just name this and i'm going to call this one primary because it's my primary button i'm not calling it primary button on purpose i'm calling it primary but we'll get to that once we look at organization a little bit so we have my button and then what i'm going to do is i'm going to option drag or you can do command d or whatever you want we want to duplicate it and have another version of this so again or you can copy paste command d's duplicate or alt or if you're on a mac option drag it off and i have my duplicate of it and you'll notice they look exactly the same this is my master component and this one here is the instance of it which means it's pretty much like a copy of my master so let's make a few instances here and one thing with instances that you'll notice um is let's say i come here this would be like click me you'll see it's changing automatically that's part of the auto layout i will do a more in-depth video just on auto layout at one point but uh we'll leave it like that click me another button whatever it is they all look a little bit different from one another on any of these i can go and then if i look up here when i originally created a component there is this new thing that's come up called reset instance if i click that it goes back to the original version so that's kind of cool um another thing i can do is right click on that one and i can go to master component and i can go to my master component so i can actually go back to my master if you forgot where it was or something like that now that shouldn't be a problem for us but it could be a good way also if you're working you might be on a different art board or a different page which is something i would look at in the organization so if you're working on something you realize you need to update the master you right click go to master it just brings you right to exactly where it is which can be really handy so one thing with instances i can change the text you can actually change more than just the text i could actually come here and also change let's change the color of this one to this gray that i have so this is an instance it's still following this one and what i mean by that is the instances that they're linked to the master so if i go back to my master now and i decide to change the padding i want it to be a little bit bigger you can see they're all changing with it so i only have to make one change and it updates everywhere which is awesome i can also come up to my round corners here and let's just say i want to make my primary button should actually be a pill shape i just have to come up to my border radius and just jack it up until it turns into a pill shape and they've all changed to a pill shape but i've changed the color of this one here so what if i come and i actually change the color to this let's see how all the colors changed except for this one that's because this one i already changed the color of it so as soon as you change the color of something it unlinks that one property from it everything else still follows um so actually to show you that this one is an original copy everything about it's the same so if i come and i actually change the text on this one a default button its own it's also changing the text on this one down here because this one hasn't been altered at all whereas these two i'd change the text so the text became unlinked this one the color also became unlinked but all the other properties are still linked to it so again i can come back to here and change the padding on it a little bit and it's changing it on all of them at the same time so that's incredibly useful that you can make minor modifications and you know you might look at this one go i didn't mean to change the color that was silly revert instance and you go back and you have it back to where you were so i guess we can change this back to button just like that and um yeah that's sort of the relationship between your master component and your instances of a component and you'll notice when you have a primary component again you have the diamonds like that and an instance is always going to be a triangle like this or a diamond like this to let you know that it's not exactly the same now there are times when there'll be something you want to change a button's not the best example of this but you might want to change something in here that i can't change because it's linked to my master um so if ever that does happen and you need to change it you know you need to change it you can right click and you can actually detach instance or ctrl alt b for the shortcut and when i do that this is now it's not anything see how it's gone back to just being in this auto layout thing so because it's it's auto layout thing um so it's not an instance it's not anything it's not related to my master now so if i come on my master now and i change the color back to my orangey red well this one didn't change and if i come here and i increase the padding this one didn't change because this one it's detached it doesn't look at the master anymore it's its own thing so that can be useful from time to time if ever you need to break something apart from the master for some reason now let's come and delete these because we won't need them right now what i actually want to do is create different states of my primary button here and this is going to start falling into the organization as well let's create the different states here first and then after that we'll look a little bit more at organization so i'm going to take my primary here and i'll option or alt drag it off so you can see it's an instance and what i'm going to do right away is i'm actually going to rename this to um primary forward slash hover and i'll explain why i'm naming it like that in a second and this one will do primary default so the next thing i'm going to do is actually i'm going to turn this into a master component now what i used to actually do is detach and then make my changes and then make it into a component but i'm going to strongly recommend that you don't detach it you turn it into a master so now it's primary hover but it's a master component and now you can make changes to this one so the change i'm going to make for my hover is the one that everybody always does is a little shadow on there and maybe we can darken it up a little bit so i actually have to unlink because i was using and let's just make it a little bit darker like that so the hover state looks a bit different and i'm going to save that as a a new color style we'll call it primary dark so just so it's saved in there and i can reuse it if i need to so now that one should be set to my primary dark so the advantage of working this way now is that i want to i've messed up my padding i want to change the shape of this one or the size of it notice how they're both changing together this is because i didn't detach if i had made if i had detached these two from the beginning before making this hover state then they would have been detached if i made a change on one i would have to make the change to both of them so by doing it this way what's happened is i'm changing this one and you'll notice that in my primary hover it actually has the instance of my primary default here that default we can whatever it doesn't really matter what this one's called here what really matters is the name of the master so i have the primary default the primary hover and the hover is going to be following for everything but it's also going to have the drop shadow and the color will be a little bit different so to show you how this is handy now is actually let's make some secondary buttons too so i'm going to take this one here and drag it down and i'm going to let's change it a little bit so i'm actually going to remove the fill but i'm going to give it a stroke of my primary color make that maybe two or three pixels three pixels looks okay i get the text in there we'll change the color of the text as well to my primary color so i have sort of like a outline button there so now what i can do is create a new master or a new component a new master yeah that's right and this one i'm going to call it um we'll call it outline default and i'm just putting at the bottom just so it's organized a little better there and then i'll option drag that off to the side uh my outline default i think actually i took the fill off so we might run into a problem if i add a shadow to that let's just try though effects it might yeah see how it's adding it to everywhere so what i actually need to do is let's just select this and i have to give it a fill of white um and with the white fill on there now if i add a shadow to it the shadow goes underneath the button like that so that could be my normal line and then this one would be my outline default so this one now that i've made those changes i can turn it into a master component and that one will be my outline cover i'm only doing two you could have like um i'm only doing two states you could have your active like what's it look like when someone's clicking on it what if it's disabled you could do as many of these states as you want now because all of these were originally based on this one they're sort of like nested components that's why we have uh well not my primary but all these other ones have this nested component inside of this component and it's not really what you hear about when you think of nested components at all it's not how i thought of it but i love this because if i come on this one and i make a change so let's say i change here again the padding because it's a nice straightforward one to change it's changing it everywhere at once that i mean the fact that i can change every single one of my buttons and i could have like 10 different sets of buttons here and have everything updated at the same time i find so cool and so handy you know even i could come in the text here and we could make a change on this text to make it all cap and all of them update right away that to me is really really cool and really really handy but now on to the organization of them and why i name them in the way i did name them um what i'm also going to do actually here is rename my frame here let's call this button or buttons i should say um and the reason i'm doing that is i'm going to come on to another page so page one let's just call this components components and let's make a new page and we'll call this wireframe i'm just going to come in with a new frame we'll just do a big desktop and i'm going to go to my assets now and what's happened is when i've created my components over here they got added to this assets area and you can see it's actually listed under buttons so that's kind of cool it's organized i can go into my buttons and i can see i have my outline buttons and my primary buttons so by naming it with those forward slashes in there it's organized everything here automatically and it's done a little more than that so let's just say i have like let's just create something really fast here okay so the very beginnings of the landing page nothing too fancy but then i want a button so i can come over into my um local compo or into my components here are my buttons i have my buttons primary and i can drag this out and just drop it and now i have an instance of that i go back to my layers i can see it's a regular diamond so i have a regular instance of that button and i can position that however i want to have it positioned and then maybe i want a second one so this one could be by now and then i could option drag that over and i want this one to be more info the only thing is i want my more info i don't want to be a primary button i want this more info to be an outline and well that means i have to go back to assets and then i have to go back to my outline no it doesn't mean that actually uh what i can do now is i can click on that and you can see over here there's a little instance panel and first i can see that i can choose from different instances and this is any instance it's not only going to be my buttons remember instance we're changing the instance where the instance is like a copy of my master so uh first i can also go to my master component so this is what i mentioned if you click that it brings you to the original you can make a change to it if you feel like you need to but in this case we want to go back to my wireframe and if i go to this little drop down i can see i have a default and a hover right away because they're related components it knows they're related because of how i organized it originally i organized it by having them here if you had more versions of it you would see all those versions in this list right here default hover active disabled and any other versions of it you might think of having but so i can come to my primary here and i can change it here as well or i can go to my outline and i can change it to the outline one right there so again say i had another one i don't know why you'd have three buttons more info and something else i'm gonna delete it so it's okay that i made a typo there but i click on it go to my instance go to outline and go to the default or for some reason if i wanted the hover i could bring in the hover one there as well so just a cool uh really cool and awesome way that you can work i think that's really really awesome and so i think we can push that a little bit more now though um because we understand how they're working and if you're really not sure actually what i would encourage you to do is hit pause right now and to try it out and don't you when you're watching things like this it's one thing you're going oh that's really cool that's easy i got it if you're not practicing this you don't got it you need to if this is something that's new to you you need to practice it so i mean it's going to take you a few minutes create a few buttons create the other things try changing the instances around make sure that you're going through the right order because i haven't messed it up a few times when creating my instances and then turning them into more components so when i was creating these buttons here sometimes i was doing it wrong and it wasn't linked back to this one anymore so just practice doing that if you think you got that and you're good to go then you can come back and keep going and if this is going to be tomorrow the day after there's time stamps down below as i mentioned before click on one of those time stamps and you'll get continue off from where we left off because i know this is a little bit of a long one um oh also you'll notice here it says return to instance if i click on that now oops it didn't do it but you can have the option to jump all the way back to like here if i oh i deleted it let's just do that really fast because it's super handy um if i bring that in whoops didn't mean to change it if i bring that in and then i go go to master i can then go return to instance and it'll bring me back here once i'm done which can be nice so you don't have to go hunting back for where you were if you're on a really big document um so what i want to do next and this is going to dive a lot deeper into everything we've been looking at is let's go back to my components page and i think for buttons we're not going to need much more you probably could you could have small buttons and large buttons and as i said a whole bunch of different states here buttons but that's enough of buttons so i'm just going to leave that just like that and i'm going to make a new frame so i'm just going to push f and i'm going to click and drag out something a little bit bigger and i'm going to call this one form elements so the reason i'm calling it form elements remember is when i'm in my assets panel it's organizing it by the name of the frame so giving your different each grouping of components its own frame is really really important for the organization of everything uh so what i'm going to do on this one is let's make a nice simple label label i gotta turn off that all cap it remembers the last settings you've used on stuff uh so turn off all caps whoops turn off all caps um i think i'm gonna lighten it up i don't want my pure uh let's go with this dark gray that i have um and then so i have my label right there and what i'm actually going to do with my labels i'm going to save that as a style uh so on my text i am going to create a new text style we'll call it label this can just really help out in the long run if ever you have to make changes and this is where it is useful to have all of your styles set up ahead of time so create style there so i have my label and then i'm going to push r for rectangle and we can draw out what will be my input and for the input i think i'm going to go with this is why i created some colors ahead of time we'll go with a really light gray background and we'll add in a stroke with this medium gray right there and let's just zoom in on this while i work on it a little bit let's round the corners just a tad to soften it up something like that and then inside of there i'll also place a placeholder so i'm just going to option drag this off we'll call this place folder which we can change so i can unlink it because i don't want it to be the same oops unlink it and let's just switch that over to the regular and we'll go with like a medium gray and bring it to the front i am putting a label and a placeholder and we're actually into one more piece here too which whoops so i'm just option dragging or alt dragging again and this would be important info slash error message you could go underneath right there this one i think what we'll do is we'll actually bring this a little smaller let's go with like a you don't want to make it too small but maybe we'll do like a light italic or something like that uh the first thing i'm gonna do is actually take these two and i'm gonna make an auto layout out of those so it sort of groups it together i don't think i'm going to need my auto layout on that but i'm still going to do it so shift a and then whoops i always forget when you do that i have to switch it to vertical and i want it to be a fixed width in this case so i can drag that out and i can bring this back to that side and you can set this to whatever size you need it to be um then so this is you can see this is group now so i may label there i have my frame here so we could call this input and that's fine the name of that one is okay so my input with my placeholder in it and my label there so this is grouped together and this is important because what i'm going to do is select all of them shift a for auto layout drag this one back over to the side when you're in auto layout you can drag things to be like left right align center or left align so i can do the same thing up here if i needed to move it you just drag it click click um and now with the auto layout we can push things a little more than what we did before because last time we were playing with padding but we don't really need padding on this but what you can do is play with the spacing on elements so that's sort of like the margin control of the things that are inside so you can play with the distances now it's always going to be equal so that's sort of that's why i did the i grouped my placeholder and you could have just made a group instead of an auto layout but the reason i wanted those together is because if they were separate it would actually push everything apart and auto layout always is going to have equal distancing if you need things that are going to be um always together group them first and then make your auto layout so that that group will act as one unit um instead of being separated so just actually really quickly what i mean by that is if i take these two and i group them they're acting as one unit so my label and my placeholder are one unit so if i go in my auto layout now and i change it it's only moving that further and closer apart because it's treating my label and my input as one unit but in this case i don't want to do that so let's just undo undo so there we go i have my frame so i'm going to change the name of my frame now we can call this one input slash default and we have a nice or a nice we have our our label that's there and um we're going to come to why i included this part um in the old days what i used to do when creating components is i'd have two versions of this i'd have one with the message below and one without the message we don't need to do that anymore which is super cool and that's because of auto layout the reason i'm coming up with the default is because maybe we want another one so let's drag that down let's make some changes here let's change this instead of being this gray color let's come in and maybe we'll just change the outline uh so i'm just trying to get into there i'm on my input oh i'm on the right place uh my stroke let's change this to actually let's make a new color uh so on link and we're gonna go with like a success color so we can come into the greens uh greeny blue maybe could be nice something like that and maybe this could actually come up now like no let's see so i could do something like that um label still good placeholder actually in this case the regular placeholder wouldn't be a placeholder anymore this would be like actual text someone is writing out and maybe i'm trying to think maybe i should have done that with this one as well it could do placeholder text and uh regular text so i'm coming back to my main component here and what i'm gonna do is on my i'm gonna select where the text is i'm going to push command d to duplicate that layer and you can see i have both and what i'm going to do with this one is put in user input but my user input will be a darker color so we can come in and put that as the dark one right because you have a placeholder it's always light when you have the user input it's dark so you can distinguish the two and you may go kevin that doesn't look very good when you have both and you're very right it really doesn't so what we want to do that's actually what i'm going to do is just save the screen here plus uh we'll call it success and i don't need you anymore we'll come back what i can do though is i can hide my placeholder or i can hide my user input and as long as one of them is on it's always going to only be one line so this is where it could be useful to have both all the time so you can switch between the two when you're using this component so for now i'm going to leave my placeholder on and hide my user input and because auto layout is on it's automatically growing and shrinking which is really really cool and it makes it a much more robust component by doing that so i have my label uh i have all of that set up that's all good oh you know what i forgot to do the first time around is i never made that into a master when i duplicated it so let's make that or not a master but into a component so let's turn it into a component this time and we have my input default so we can drag that down now and we have an instance of it and this time on my instance let's just change that mid-gray to that green that i'd created and as a default here on my input we're going to turn on user input and turn off the placeholder text and so the next thing i'm going to do is i'm going to come on this one and let's turn it into a new component and this new component will be input success cool and let's come back up to my original one now and we'll drag her on down to make an instance of it on this instance let's come in and we'll do similar to before but we'll come in on you change this to a red color with our dark red maybe let's go with our primary color and i think for this one because it's just an error message so i can just have it say error message i'm going to actually have this one also change the color of it because we want to make sure that it does pop off maybe it could even be like a medium or something it's but we want to make sure like if someone has an error message you want to make sure that they can see it so that can pop up like that as an error message and then so what we want to do is just come on this one turn it into a new master component and then we want to change this one to error so that is my form elements and they're coming together and a button could be part of the form elements but you know we have those i guess we could also do a text area now actually what i was i want to make the the text area one but again i think instead of having a ton of different components um because we'd have to detach from the original like if i wanted to make a copy of this and then get rid of my placeholder and then bring in a bigger box i can't delete anything if i select this and i push delete it will disappear but it's actually just turning the visibility of that layer on and off and it's doing that because it's an instance of my master so i can't actually change that so i can't actually come in and make a new rectangle and bring it inside the instance the only way i could do that is to detach my instance and now i could actually bring it in and make something new but the problem now is if i come on this and i update it so let's say i want to change the color of my you know this this line at the bottom just for fun let's make it uh green so it stands out you can see it's changed here and here but it's not changing on this because it's detached we've removed that from there so one thing we could do and again this is by creating a single component that can be reused in as many ways as possible what we could do is actually i'm going to come in here and i'm going to duplicate that and i know it's sort of screwing everything else up but that's okay we're going to we have this guy here and i'm just going to call this one text area instead and my text area i'm gonna actually switch this to horizontal i'm gonna switch it to horizontal and then what i'm gonna do is come on this and we're gonna drag that out just so it gets to the right width um i know it's a little bit awkward doing it this way but it's because of the way the auto layout um is set up uh we could do it with some math actually to make sure and actually if oh no that's pushing that way that way um so as soon as you see that top one moving you know you went too far maybe there's a better way of doing that you could use some math actually you can get the total width and then just minus your padding and then you'd know exactly how big you need that one and the inside to be but now what i could do with this one is i could actually change the height of it and this one would be placeholder text area so we can have a big box and a small one and again i'm just going to turn off my placeholder and not my placeholder i'm going to turn off this whole text area um just because i don't want to be visible um i mean you could leave everything on on the initial components if you wanted to it depends on the system i guess that you're building out but then by doing something like that what we've done is we've created these elements that you could even make this into a form component now which would have everything involved in it and really have everything nested in which would be an option you could have different you know a two column layout a three column layout a one column layout would have many form elements that people could choose from uh but i think what i'm gonna do is just jump over to this and maybe here it could be uh you know we could have the contact section contact us so i do have uh on splash open here and i sort of like this one so i'm just gonna right click and do copy image and then come over and paste it right in and then we can position it where we want it to um and actually i think let's make this look nice at least so i'm going to do something where this and this can be centered and center aligned there we go so we have my contact us we have that and then here we can do where i'm going to bring in now i'm going to go to my assets and i don't need my buttons yet i need my form elements first so i'm going to grab a few versions of this one two three four let's go with four i'm going to grab them all let's just line them up i don't even think i'd have to line them up but what i'm going to do is hit shift a to make an auto layout they've all sort of arranged themselves in their spacing so i can bring those a little bit closer together on my auto layout let's add some padding that way and we can't see the padding right now so let's give this a shadow effects let's give it a fill of white which fine um and then on my effects we'll use my small shadow and now we can see what's happening let's zoom in on this so now i can give that a bit of padding on the top and bottom a bit of padding on the left and the right and start building out my form element maybe i can round the corners on that a little bit like so so i start creating this contact form uh right here i know maybe i want to show different stuff in here and actually i need a button so let's add my my button that will be my submit button which would be my primary button i can drag that into this auto layout when you're dragging into auto layout it's really hard to see but there's a little dotted line that's appearing around that means it's actually going to fall into there so if i let go now it falls into there i could arrange that however i want and i'm good now actually i've realized one thing i don't like is let's go back to my master component and i actually want this to be a bit bigger so i'm going to double click on you and i'm going to drag that out i want these to be quite a bit bigger and because they're all based on that one master they're all getting bigger the only thing i'm a little bit worried about is that other one and maybe there's a way of if you have a way of doing this leave it in the comments below um whoops wrong i want to bring on my text area because i had a feeling that sort of mucked up so i just have to make the text box on this bigger which is kind of weird and awkward so there we go that looks a bit better and i'll turn that text area back off so it's not getting in the way and maybe going kevin those are overlapping each other though that's really awkward and that's true but what's happening here because these are all auto layout is i want this last one to be my message so i'm going to come inside that instance i'm going to come over to my text my input and turn that off and i'm going to come over onto my text area and turn that on and boom you have your text area so i think that's really cool and now i can do is just come in my label let's change this to first name actually you know what maybe we have too many let's just do name email this one we can get rid of and again you can either just turn it on and off to hide it or you could delete it because you know you won't be using it whoops delete the whole thing there we go because you know you're not going to actually be using it and then maybe i'm going to just bring this all the way to the front my image can go underneath a little bit my image isn't on my desktop there we go perfect okay uh maybe on this i could round those corners but i only want to round this one let's just do 20 20. there we go so these ones aren't round so i can bring that all the way off the edge of the page and we can set up it's not the nicest page in the world but you know you can set up some sort of contact form like that or maybe that's even on the image or something not my favorite page ever but it shows you how the components can work um and work really well i can come on this and change this to say an error and here we could take this i could make this one user input instead of the placeholder and here somebody didn't put in my email address properly so it says hi at kevin powell but they forgot the thing and even here it could be please enter a valid email address down here also we could come in and you know you could change play around with this you don't want any important slash error message uh you could come in and that's this one let's just collapse these down if you push enter or return it will open all the layers and then in my input i can go take a look i can oh we don't need my input i just want my error message we can turn that off and then this one too maybe we don't want that so we can come on that one and then my error message we just turn that off and just like that you can start coming up with a nice looking form maybe this can go on that side so there we have it that is figma components really from the very basics to doing something a little bit more fun and using auto layout and sort of pushing how far they can go because of auto layout the auto layout really does make a lot of what i was doing there possible instead of having 10 versions of one component you can just have that one form element that you can play around with a lot it does take a bit of a change in mindset and i'm still trying to wrap my mind around it and use it in the best ways possible so if you have other ways that you are using it please leave a comment down below and let me know about them because this is something i'm really excited about i'm really happy with this feature and i'm so you know i find it so robust and really really cool i really hope you like this video if you are new to my channel and you just saw this and you enjoyed it please do consider subscribing i am going to be doing quite a bit more design content along with my regular css content that will be the two of them going hand in hand so thank you very much for watching a huge thank you to my patrons for helping support everything i do here every single month your support is helping with this channel so much i can't thank you enough for it and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 101,633

Keywords: Kevin Powell, tutorial, html, css

Id: hnx5UWaP_jo

Length: 37min 49sec (2269 seconds)

Published: Wed Jul 29 2020