Mistakes Designers make with Figma Components

hey guys in in today's video i'm going to be talking about some of the mistakes that newbie designers make when interacting with or creating components in figma and again this is not necessarily just restricted to newbie designers i've had designers who have experience of let's say years at the very least they say that they have years of experience but they still make these mistakes and maybe you're also making these mistakes so definitely watch this video and let's cover some of the mistakes one by one the first mistake is obviously not creating components to begin with and not knowing when to create components so as an example let me go to an example that i just created here to demonstrate the idea so here i have a header which is not a component and obviously this is a big no no if you're going to be using a component or an item that's going to be duplicated and let's say multiple screens then you definitely need to have components so i'm just going to go ahead and i'm going to include this particular item in some of the other pages but even before you even do that like once you actually have this component created or this item created once before you actually duplicate it to some of the other frames this is the point to actually create it or make it a component so let's just do that so obviously you would create a component by pressing the command option k key and once you've done with that some people would just end here they would say okay their component is done but it's not done and i'm gonna get to that a bit more so the first mistake obviously that's happening in this component is that it's not using auto layouts in some of the some of the inner elements it's not using auto layout in at the top level as well so the first thing that we need to do obviously we need to create an auto layout element and then we need to basically center align it now some people may still stop now but the job is not done we need to first of all if i let's say go ahead and actually include this component here and i move it up so so this is the actual home page and this is the about page now imagine if i wanted to make the about tab visible how would i go about doing that well i can obviously choose the color here and i can give it the color there i can some people actually and i'm i'm honestly telling you this some people actually include this particular bar outside of the component just so they can easily move it around here on some of the other pages just to highlight that and that again is horrible please don't do that that is that sort of like again cr is cringe worthy what you actually need to do is you need to create a component for these specific elements as well so you need to know again any repeatable element that you're going to be changing so on and so forth needs to be a component so what i would do is i would create this particular thing um i would make this particular thing a frame and an auto layout and then i would basically duplicate it and then move it on top so this is going to be our header so just a second this is going to be our header slash header link slash active and i'm going to create a component and then we're going to have another variant of it which is which i'm going to say i'm going to first of all detach it and i'm going to say this is going to be inactive and then basically what i'll say is i'll say that this particular rectangle is going to be hidden or i'm i'm just going to reduce the opacity of it obviously you can just go ahead and hide it so once you're done with that you can obviously change this to let's say black and once that is done then you would basically go about and change this particular thing to header active so now it's active i'm going to delete the previous one and i'm going to basically start duplicating it and as you can see this particular group is also not an auto layout which is a mistake so i'm going to create or make it an auto layout so now that that's done i'm going to i'm going to again convert these two things into the inactive variant which i have created so now that it has fetched it inactive and here we have some of the items so i'm going to start replacing them so we have the about tab we have the locations we have the features and then we have the contact so now this component sort of is done there are still mistakes which i will get to in a short while so basically now we have the component and as we can see the component is not spanning correctly so i'm basically gonna some people would basically just go and increase the spacing here and say okay now it looks good but again that is also not a good way of doing it but at the very least now that you've done that let me just go ahead to this header component now i can basically go to this component and first of all replace this whole thing with the header that i've created and now go to this component and say this is going to be inactive and this about is going to be active so that's the first mistakes people make they don't know what items to make a component and then even if they do make a larger thing a component they don't make some of the inner elements components so that is extremely important let's go to our second mistake so the second mistake is not making the component resizable so this is a mistake that i just did here obviously just to explain it to you now imagine if i tomorrow i wanted to make this this particular page is 950 pixels i wanted to say that this is going to be 1600 pixels and i've made that and as you can see some of the inner content is obviously scaling but the header is not and the reason for that is that the header is not being not scaling properly it's not resizable so the first thing that i need to do is obviously if it exists within auto layout i need to change the fixed width to a fill container and once i do that the header container spans completely and then i also need to set this to auto and if you don't want to do the auto thing from there you can basically go to the component auto layout properties and you can say space between and now this component is scalable now if i as as you can see if i actually scale up and down it's going to work and obviously that's going to be applied to some of the other elements as well so that is something that you need to pay close attention to you just don't create a component don't make it scalable and and just say that your job is done it's not done so the third mistake is not using variance and that is again a mistake i intentionally did here is not using variants here so what i actually have to do is i need to combine these items as variants now that i've done that i can actually go ahead and i can let's say copy the header element here i can just basically click on the about thing i can change this to inactive and i can change this to active so as you can see it's much easier and as you can see that there's a mistake in this auto layout that i created as well this particular rectangle is not not having it does not have a property or fill container so i need to do that and i need to make that as well and once i've done that as you can see it spans completely so again these are some mistakes that you need to avoid okay so the so the next mistake that we want to talk about is not understanding properties and not giving properties correct name and that is something that i've done here in my header component as or a header link component as well so as you can see i have the property named property one and then i have active and inactive and that's not right this property needs to be descriptive descriptive of what it's doing either it needs to be state or we can just change that to active and i can say on let me just do that on and then i can say off and now if i go to some of the elements as you can see it's much easier to turn it on and off and the property name is also reflective of what's what's happening i'm going to be sharing an actual file that of a student that i'm actually teaching and they've made they made a similar mistake of not giving property names correctly so as you can see they have some buttons here and they've done a good job but when i actually get to the com get to the states here you can see they've given a hover state property and the hover state as most of you may know is not a property it is actually a value of a property called state so for example you have to understand what you're actually giving what property names make sense and what don't and then as you can see they've actually introduced a conflict as well because they've kept the same uh state across components so this actually needs to be default and this one needs to be over and that needs to happen for all of these so for example everything needs to be needs to change and they need to and it needs to be over and yeah that's the other other mistake that people need to understand the fifth mistake is not using a base structure in complex components so that's a big problem as well so let me just go ahead and actually create a button here so we have a button here i'm going to create an auto layout around it i'm going to give it a 12-16 auto layout i'm going to give it a background of blue let's say 500 and then give it a text of white so this is going to be our button and i'm going to say this is going to be our button primary slash default so this is going to be the default state i'm going to basically then i can click on the plus icon to create a variant of it and i can say that this particular element is going to be let's say the hover state so i'm going to say this is going to be over and the blue here is going to be let's say 600 just or maybe 700 slightly darker and then i'm going to create plus create another variant again and i'm going to say this particular one is going to be an active state and basically the active state is just going to be even darker so for example it's going to be 900 so here i have these buttons now these particularly look good and i think these look fine but the problem with that is i'm not using a base structure for this component now imagine i had let's say 10 different variants like this currently i have three variants imagine i had 10 different variants and i wanted to update the font size or i wanted to introduce an icon here how would i go about doing that so imagine i wanted to introduce the arrow minus write icon here across all variants and that is something that i wanted to do just just something like this or i wanted to configure the auto layout do you expect me or do you expect anyone sane to actually go and do that same thing on each separate variant themselves like that does not make sense and that's like a lot of effort which is why the proper way of creating something like this is not creating buttons and these components or these variants just by themselves you need to have a base structure that is followed across all of the variants if it applies obviously so what you need to do if you actually wanted to create a component like this i'm just going to press command z to actually revert most of the things here and i'm going to say this is going to be the base structure of our buttons and i'm going to create i'm going to make it a component and once i've done that i'm going to basically create a component around it so as you can see now i have a base structure button and then i have a component on top of it which i'm going to give a button slash primary slash default and now that i've done that basically i can click the plus icon to actually create a new variant i can go to my base structure and this is also very important you don't apply the background on the larger or the outer container you actually apply it on the base structure so now you're going to go to the base structure you're going to give it a background and then similarly you can create another variant and you can give it a another background as well and i can choose the background from here and i can give it here and as you can see even though i have the top layer selected but if you're actually messing with the selection colors it's looking at some of the colors that you basically have applied within the component and it's going to be changing them in their current location so obviously it's going to be changing the color on the base structure so now that i have that done i'm going to make this active i'm going to make this hover and then we have the default one as well now in the same scenario that i previously talked about i wanted to introduce an icon so i'm going to say arrow minus right so now that i have that done i'm going to choose font awesome and here we have the icon and i'm going to say it's going to be centered and as you can see i've introduced an arrow and imagine i had 20 different variants like this it this particular arrow and the styling that i basically apply here imagine i wanted to increase the padding on the left and the right all of that would be applied across all of the buttons and i don't have to go to go individually and do and apply that so that's a mistake that people make when they're actually creating different types of variants that use very similar properties you need to have a base structure i cannot stress this enough another problem that that a lot of people do is actually using a base structure that's one let me just go ahead and actually see if there are any other problems so when a person does not use a base structure let's say you don't want to use a base structure you just have two uh variants particularly now let's say if i'm actually going to go ahead and actually going to change this text to text component and then let's say if i actually change the act change it to active it all works fine right now the problem what happens is when let's say people are actually creating these button components i'm going to create another button component i'm going to give it an auto layout and basically i'm going to give it this auto layout a background of let's say blue again 500 i'm going to create a button slash and i'm going to say this is going to be the default variant and then i'm going to basically create another component i'm going to say this is a larger button or something and i'm basically going to say that this is going to be a large variant so i have these two components and let's just go ahead and actually combine these as variants so now i have these two variants i'm going to say these are different sizes this is going to be perhaps the medium size it's going to be the larger size and the larger size i'm basically going to say the font is going to be really big let me just convert that to an auto layout as well so we can see it the font is going to be relatively big and the spacing is also going to be relatively big so now this actually works this works fine however the problem with this particular thing is now imagine i actually have a button click for home or something along those lines now that i've done that if i actually go ahead and actually toggle the size variants as you can see the text disappears the previous text that i placed here was click for home but now when i actually change it to the larger variant it says the large button and some people may assume that the problem is that they need to give a button here and that's that's going to fix it but that necessarily is not always the problem because as you can see the problem still appears here however it has disappeared so the way to fix this particular thing is to always ensure that the text layers that you want consistent across these variants have the same label here on the left hand side bar it doesn't matter if this says like large button or whatever this is irrelevant what basically figma looks at is this particular thing these both things on the left actually need to be consistent so now if i actually create a button and i say this is going to be basically a check out button and then if i let's say replace it from to a larger size as you can see the text is preserved because the type or the title for this particular text or the text name is pretty similar on the left hand side bar so that is something that you definitely should not ignore and that's a big no-no in the design world so let's get to our last mistake which is not making or not using interactive components so i've actually made a bunch of buttons here which have hover and active states now imagine someone actually goes through the effort of doing that but doesn't actually make these uh interactive components like i would personally ask them like why did you even go through the effort of doing that i can understand you want to point that out to the developers so on and so forth but i mean just go ahead and actually make them interactive why why wouldn't you just go ahead and do that so in order to make these interactives you basically need to link them together so i've said okay on click this need this needs to change to this particular variant but obviously since it's a overstate i'm going to say while hovering this would change to this and if i click this hovered state it would change to the active state so i'm going to say on click it's going to change to the active state now if i actually go ahead and look at my buttons here you can see if i'm actually hovering over it let me just zoom in hovering over it the overstate is applied and once i click on it as you can see the active state is applied but i don't want this active state to always remain when i click on it so it should be while pressing instead of on click so now if i actually go here so while hovering the state changes and one while click the button is actually interacting and showing me the behavior you can also go one step ahead and actually create the animation that's going to be there so developers know what sort of animation or css animation they need to apply so you can say whether it should be ease and ease out and it should let's say go for let's say 300 seconds and similarly you can do the same thing here ease and ease out and 300 seconds as you can see now it's very smooth and if i click on it it's very smooth as well and perhaps on click i can say that it doesn't need to be like that smooth it needs to be a bit faster so as you can see it works well so those are some of the mistakes that i would i would highly recommend for you to avoid those are big no-nos and those would definitely uh really matter when you're actually developing as a detail-oriented designer as someone who actually cares about how things are structured and whether the component library or any component that you're creating is scalable so that's pretty much it for this video do subscribe to hit the bell icon and i'll see you in the next one take care

Channel: AM Design

Views: 124

Rating: 5 out of 5

Keywords: figma, ui, components, variants, base structure, figma tutorial, figma components, variants in figma

Id: Ei9yebCBY0w

Length: 17min 45sec (1065 seconds)

Published: Sat Oct 02 2021