Figma Components: From Zero to Hero | FREE COURSE

let's talk about components in UI design these are regular elements like for example buttons or forms that are reused throughout the design process and the reasons for that are very simple speed and efficiency with the component you don't need to recreate an element every time you want to use it you simply grab it from the library place it in your design and you're good to go the thing that makes components super powerful is the fact that any change you make to the main component is then passed down to all of its copies automatically so for example if you have the same button that you use in multiple places and you want to change its color you do it just on the main button all the other copies will be updated automatically uh this saves a lot of time and makes maintenance a lot easier easier now the concept of components is implemented in pretty much every mainstream design app out there sketch has it figma has it XD has it even though they're named differently in figma and X these they're called components but in sketch they're called symbols regardless of the name they do exactly the same thing and this is what we'll be discussing in this course but hey for just meeting my name is Adi I'm a professional web designer and developer and in this course I want to show you the ins and outs of working with figma components and we'll start by learning how to actually create one or more components then we'll discuss the uh differences between a main component and an instance or a copy of that the following lesson is about making changes right so what can and cannot be modified in a component or an instance and what happens when you do make those changes next we'll talk about instance swapping so how to do it what are the benefits and we'll also talk about component nesting uh then we'll briefly discuss about naming and organizing and how uh giving a component the right name can be very helpful the following lesson will be about component of variance right so we'll see what they are how we can use them and why they are so powerful next we'll be working with component properties which are super cool these are relatively uh new but they take this feature of of components to uh to the next level uh and finally we'll talk about uh or briefly discuss interactive components which allow you to use components in a more let's say interactive way uh in figma prototypes so uh we have quite a few things to cover but I'll do my best to explain everything in as much detail as possible so you can follow along even if you're not very experienced with figma now speaking of figma did you know that there is a place where you can get over 20 000 UI kits and website templates built for figma and that place is called envato elements it's really easy to get started go to elements.envato.com go to graphic templates choose websites or UI kits then scroll down and choose figma pick the template you want and you're done all the assets have simple commercial licensing and you're not bound to any contract so you can cancel whenever you want and elements is chock full of other goodies as well video templates music and sound effects icons situations and much much more so if you're interested check out the link in the video description now let's get the show on the road and learn about creating one or more components in figma before we get started you should know that the figma file I'll be working on is available for download just check out the links in the video description oh and don't forget to subscribe to envato touch Plus for more free courses and tutorials just like this one alright let's create some components in figma you can create a component out of any selection of objects or layers and to create a component you first need to select the layers you'd like to include so for example I can select this text layer and I can create a component out of it or I can select this button which is a group of elements or in this case it's it's a frame and I can create a component out of that now to actually create one you have a couple of options first with the desired elements selected you can go into the toolbar and you can click the create component button alternatively on Windows you can press Ctrl alt k or on Mac command option K you also have a different option you can right click your selection and you can choose create component whatever the method the result is exactly the same so click and figma now creates a component notice the selection boundaries here are turning a different color they are now purple the icon in the layers panel is also changed you have a full diamond and also uh the name of the layer is also changed or sorry the color of the uh layer name is changed to match the purple of the selection here so now you have a component created and with it you can for example copy it Ctrl C and it can go into a different page and you can paste it here so for example I have this layout and I can use that to paste in my new components I'm going to update the text and now you'll see that any change that I make on my master component and we'll talk about master versus instance in a future lesson but let's say I'm going to change the color of the text on my main component right I want to make it something darker like this yeah as soon as I do that uh the color on the copy of the component changes automatically which is really really cool uh we'll explore this this behavior in more detail as we're progressing through the course but yeah that's how you create a component now depending on the number of items in your selection you also have the ability to create multiple components so let's say for example that you want to create a different style of button here right so you can right click you can detach the instance this will basically unlink it uh from the component we just created now it's just a normal group of elements right and let's say you want to change the way it looks you want to swap out the colors and make it white on Blue so you want to create a component out of this but also let's say you want to select this text and create a component out of that well if you select both of them and you go to the toolbar notice we now have a drop down because our selection contains more than one element and in the drop down you have three options the first one will create a component that has both of these elements inside but the second option will actually create a multiple components so it's going to create one for the green text and one for the button okay so let's choose create multiple components so now we have two new components created for us and now of course I can duplicate this I can drag it into another page I can change this text I can do whatever I want now uh just a quick uh a quick notice here this copy of uh of the component has a different icon in the layer panel as you can see here it's an empty Diamond compared to the full diamond that you see on the actually the first component that that we created so just keep that in mind for now okay so let's take a look at a few key points to remember from this lesson you can create a component out of any selection of objects or layers to create a component first select the layers you'd like to include then either click the create component button in the toolbar or right click on your selection and choose create components alternatively use the keyboard shortcuts command option K on a Mac or Ctrl alt K on Windows when your selection contains more than one element you have the option to create multiple components at the same time right then that's how you create one or more components in figma and as you saw when you make a copy of a component that copies a little bit different so let's talk more about that in the next lesson so main components versus instances what's the difference between these two well it's quite simple actually the first time you create a component that's the main one any other copy of that main component is called an instance so let's explore these differences in more detail and let's also see the different ways of creating an actual instance of a component uh we'll actually first start here by creating a components out of this button right so now I have a main component with the name of button and to create an instance we can simply copy it so command C or right click and copy or Ctrl C of course if you're on Windows and let's go in here and I'm gonna paste it right under this text right so now we have the main and the instance so copy or you can also duplicate with command or control D that's going to create an instance and you can also copy or duplicate an actual instance of a component to create another instance another way to uh to create an instance of a component is by using the assets panel that you see right here in the top left so you open that up and you open up the page that houses your component and in my case it's called button and I can simply click and drag from here and I can drag it wherever I want and this will of course create an instance and the third way to create an instance is by using quick insert or as it's also called the resources model so you can find that right here in the toolbar or you can press the keyboard shortcut shift I to open up this window and then you would just navigate until you find the um the component you want drag it in and you're done and that's how you create or insert component instances now uh let's talk a little bit more about the differences between main components and instances uh first one the first one that we see is actually the icon in the layers panel so on the main component we have a full diamond it's this one right here and on an instance we have an empty Diamond the color of the layers is exactly the same as the purple but uh the icon is what sets them apart now a crucial change or a crucial uh sorry difference between components or a main component and instance is the fact that any change you make to the main component will automatically Cascade down to all of the instances okay so for example if I go into this main component and I decide okay I want to change the horizontal padding because it uses Auto layout right I can do that here and it's going to change it on both the components and the instance if I'm gonna go here I can of course change this let's say 64 but it's only going to change it on the instance right so it doesn't work the other way around any change that you make to an instance is not automatically being applied to the main component there's a way around that you can manually push these changes uh back to the main component by going or selecting the instance and going to the inspector and selecting push changes to main component right and as soon as you do that whatever it is that you changed on the instance will be pushed to the main component so that's another difference between the two now a third difference is that you cannot add content to an instance right or change the position of the elements except of course the the auto layout properties that that you just saw so for example uh let's say I want to grab this icon and add it to my button I cannot go into the instance and paste it in right it it just it doesn't work even if I try it from the layers panel but if I go to the main components of course I can add that content to my button no problem whatsoever the instance will be updated and from the instance I can of course remove this icon but it doesn't actually remove it because if we take a look in the layers panel the icon is still there but it's hidden right its visibility is hidden so you cannot actually remove content from an instance nor you can add content to an instance you can only do that on or in the main component and also you cannot change the position of the elements right I cannot take this icon and move it on the other side of of the text but I can do that very easily in the main component right I can change its position so those are the key differences between main components and instances now let's take a look at a few key points to remember the first time you create a component you create the main any other copy of that main is called an instance component instances have a different icon in the layer panel any change made to the main component will automatically Cascade down to the instances you cannot add or remove content in an instance or change the position of the elements component instances can be created in three ways from the assets panel by using quick insert and by simply copying or duplicating the main component or another instance so that's a quick look at how main components are different than instances now let's expand on this topic a little bit and see how we can make changes to components and instances and what exactly happens when we make those changes that's coming up so let's Dive Right In we have this uh simple section here that has these two uh boxes with contact information right and I want to make a component out of this so I can reuse it across my design so I'm going to select the first the first box and I'll create a component and then I'll duplicate it to create the second one and this is here just for reference so here are a couple of changes that you can make to an instance of a component right first of all you can change the content that's pretty obvious right so you can grab the content that you want and you can change that very easily and as you can see the instance now has a different content compared to the main another property you can change and by the way these are called component overrides and they're basically the changes that you make to the supported properties of a single instance so another override would be uh the fill and the stroke right so I can change the fill color to whatever I want I can have it literally any color and that's going to be independent uh from my main component and I can change text properties as well so if I don't want this to be bold I can change it to maybe a regular I can do the exact same thing with the fill color of the background right I can change it like so I can grab the color of the text that I want and I can change it again just like this right so now I can delete that that reference image also independent from the main component right I can change the following I can change the Border radius to whatever I want I can add a layout grids if I want to I can change them of course we don't have any layout grids on these elements but if you're if you have like larger components that require layouts grids then know that you can change those on instances you can also change the export settings so for example if on the main components I had an export setting of PNG 1X uh the instance can have totally different export settings I can export an SVG how I can export a 4X PNG for example so notice these are now different between main component and instance I can also change the layer names so the column here I can rename it to a box if I want to I can rename the text as well to content and of course that's going to be independent from uh from the main component now overrides can also be applied to a layer and text Styles right so for example let's say I have this menu right here that has a bunch of different items right each item has a different icon and the text is different on one item which is the active one so let's actually create a layer style or a text style I should say uh for the active text so I'm going to click here click the plus and choose active menu item so now let's select this let's create a component and now let's select this text and create the inactive menu item text style so now I'm gonna duplicate that first menu item and in its instance I can change the text style to the inactive right so now the active one was of course using the semi bolt as the font weight while the inactive was using the medium right so you can clearly see a little bit of difference there but we can also do the same with layer Styles right so I can create a color style and I can call this menu active and I can create a layer style from this one and call it menu inactive right so now I can go into my instance and I can select the text and I can swap this for a menu inactive just disregard the icon for now we'll get to using images in just a little bit but as you can see between main component and instance you can also swap text Styles and you can also swap color styles or layer Styles instances can also be resized so if I want this instance to be bigger than the main component I can do that no problem with normal resizing or I can hit k for uh scale and I can resize it like so so that's of course independent from the main component and if at any point I decide okay I made way too many changes to this instance I want to go back to its default State well a couple of ways to do that you can go into the toolbar and click reset all changes or you can right click and select the same thing or you can go in the inspector and here you have actually a few additional options you can reset all the changes or you can reset just the name or just the size and of course if you want to reset every single change you just click that and it goes back to exactly the way the main component is moving on to this third example that I have here I want to quickly mention pushover right so I I talked about this previously but I want to show it to you again because it's very important so let's say for example you have this element you create a component out of this and you duplicate it you create an instance and then you change the content right it's called a spending and let's change the fill color of this to something like this to a red yeah so now we have uh main component and instance now what if I'm using this instance and I'm playing around with I don't know maybe the font sizing and I see okay maybe I like this font size uh better than what I had in the main component because this is just an instance changes I make here don't get applied to the main component but what I can do is I can select the instance I can go into inspector and I can select push changes to main components so the main component will now get all the changes that were applied to the instance and from here you can of course just select the proper color we have to change this again to uh to the red but that was a simple example of how to push or to apply the changes you make to an instance back to the main component and if at any point I decide okay I don't want uh this instance to be linked to my main component I can simply right click and choose detach instance or press Ctrl alt B on Mac OS it's probably command option b or alternatively you can go right here and select detach instance so now this is like any other group it has nothing to do with the main component anymore I can change this to whatever I want and that change will not be applied to this element anymore now let's take a look at a few key points to remember from this lesson changes made to an instance are unique to that copy the changes can be applied to the main component by selecting push changes to the main component On Any Given instance the following properties can be modified text fill and stroke Shadow and blur layout grids export settings and layer names instances can also be resized or scaled to reset the changes made to an instance you can right click it and select reset all changes an instance can be unlinked from the main component by using the detach instance command so as you can see even though instances are linked to a main component they can be edited individually to a pretty large extent so in that regard you have quite a bit of freedom now something really cool that you can uh do with component instances is called instance swap so let's have a look at that next in figma instant swap is the ability to change one component instance with another and there are quite a few situations where uh this can be very helpful so let me show you a few examples so let's say that I'm gonna create a component out of this drop down menu and also a component out of this button okay and at some point I want to swap these around maybe I want the log out button here and I want to drop down here well instead of manually switching these uh let's actually create an instance okay so I'm gonna actually drag oops drag the main component out here and let's also create an instance of this logout button so I'm going to drag it somewhere around here so now we have instance and instance and to swap I can go to the inspector of course I need to select the instance and I can go to the inspector click the drop down and choose a different component instance and I can do the same here so now I just swapped that component instance with another now this can be very handy for something like this a menu right where you have an icon and a piece of text so first what I need to do is select all the icons and create components out of them so click down here or up here sorry in the toolbar create multiple components so now each icon is its own component so I'm gonna grab the overview or the grid icon and I'm gonna paste it right here basically replace this one okay so now with these two selected I'm going to create a component so now I have a component that has an instance inside and a piece of text then I'm gonna select the component and duplicate it as many times as I want and I can of course go in change the text I can also change the fill color and the text properties and then on each instance I can select the icon instance and I can go in here and I can choose a different icon same goes for this transactions I need to select the icon instance go in here and where it says swap instance I can find the icon that I want and swap it just like that and I can do the same for the rest this is for messages find the icon change the text change the style and I'm good to go and now of course this benefits me a lot because it makes maintenance a lot easier if I want to make a change to all of these menu items I can simply make a change to the main component and that change will be cascaded down to all the instances like for example maybe I want to change the spacing between icon and text to 8 pixels instead of 12. right that's going to be automatically applied super cool now there is another way of swapping an instance and you can do that by right clicking right so you select the uh the instance that you want to swap you right click and if the components are named properly you'll have an option here that's called swap instance but we'll talk about that in a future lesson for now let me show you another way of using instance swapping so for that you would go to the assets panel yeah you would open up the corresponding page here you would select the component that you want to bring in for example this overview or sorry accounts should be here right that's the next on the list so accounts has this uh stacking icon which is let's see if we can find it it's this one here click and drag hold down Ctrl Alt and just release it on top of the instance that you want to swap and you can do that for a large number of items so click again Ctrl alt and replace it just like that and that's how instant swap Works in figma and also remember that you can Nest components or should I say you can Nest instances of a component and I showed you that right here when we created this so we had Grid 2 which is an instance and then we have the parent frame which is a main component and instant swapping works just as fine on instances that are not nested inside a different component just like we saw in this example here now let's take a look at a few key takeaways in figma instant swap is the ability to replace one component instance with another instance swapping can be done from the inspector or from the assets panel alternatively if the components are using the same hierarchy you can right click and select swap instance components can be nested and instant swap works on these just as well so that's a instance swapping and nesting now as I mentioned previously you can instant swap by right clicking and selecting the option but that only works in specific cases where the components are named accordingly so let's see what that is all about let me start by saying that a design file should always be organized and figma gives us a lot of tools for that one of these will automatically organize components if they are named a certain way let me show you let's assume that we're working on this sidebar component where we have a menu and each menu list has an icon attached to it now when you are creating new menu items as you saw in the previous lesson you'll probably be using the swap instance functionality in figma okay so let's actually kind of duplicate this and let me ungroup it and let's ungroup this again so we just have access to uh to the icons right so let's select all of these icons and let's create a bunch of components now when you want to use one of these icons you can go to the assets panel or the quick insert right you'll have the full list of icons right here but let's say you have other components apart from this in the same document well figma will basically show you a full list of old components that you have with no way of organizing them and uh sometimes it could be hard to locate the correct component but watch what happens when we take a bunch of elements by selecting them and going right click and uh rename let's see where that is oh we actually need to go back here into layers and we can right click here and rename or we can press Ctrl or command r okay so figma recognizes that I selected 10 layers and it's going to say rename 10 layers so what I can do is I can use the current name but before that I can say icon or menu icon let's call it actually menu icon and you can see preview of what the new icon name will be and what I'm going to do here is I'm going to use the slash separated naming convention in figma so what you do is you do a slash and I'm going to say rename so now all of these icons are named menu icon slash settings menu icons slash person logo card and so on and so forth so now when I go to the assets panel and I open up my my correct page here you will see that these components are basically organized now Under menu icon and this becomes even more obvious when I open up the quick insert and as you can see we now have a category here that's called menu icon so when I click this I can see all of my menu icons so that's a very neat way of organizing these now also if I'm gonna do an instance of one of these elements I can go in here in the inspector and I can do swap instance and you can also see that my icons are now organized Under menu icon right so I can choose uh whatever icon I want from here additionally with this instance selected I can right click and I can now choose swap instance and I can swap for any icon I want I remember in a previous lesson I was telling you that you can sometimes right click an instance and choose swap instance well that only works when there's a proper hierarchy to those components right and in this case we do have a proper hierarchy because they are neatly organized under the name of menu or the category of menu icon right so that's the slash separated naming convention but you can go one step further than that let's say that we have these icons right we have a bunch of monochrome icons in different sizes so I have 32 by 32 and 16 by 16. so what I can do now is I can select all of these okay and I can create multiple components or I can um rename them first Ctrl r and I can say icon slash monochrome slash 32 slash and then the current icon name so let's rename those and then let me do the same for these the 16 pixel variants Ctrl R to rename them so icon monochrome 16 and then slash again current name of the file okay so with those selected let's create multiple components and let's do the same here and now when I want to use one of these icons they are organized in the following way monochrome icons by the way this is the name of the frame so frames also help us organize components this by using frame hierarchy basically right so in the monochrome icons frame I have all of these components so when I go to Quick insert I choose monochrome icons I choose the icon and then monochrome and then the two sizes are now available to me 32 by 32. and I can even take it one step further see now we have color icons and I can do the same thing here so I can select these and I can rename them and I can say color slash 32 slash and then current name so let's rename those and I'll do the same here color slash 16 slash the current name notice that I didn't use the icon name anymore because we already have the name of the frame as color icons so now let's create components and for these so now under quick insert I have the color icons as 16 and as 32. but now notice that I don't have all of my icons like in a single category because some of them are named uh using the icon slash convention and then monochrome While others are named like this color slash icon so let's uh be consistent here and name them accordingly so let's do the following uh I'm going to use monochrome icons and color icons as my main categories right the the frame names so for the icons inside let's select these let's rename them and under match let's do this icon slash monochrome slash 32 slash okay so let's replace that with nothing so we get the icons back to the name they previously had so now we can name them properly we can say monochrome icons that's the main category right so we can simply rename them to 32 Dash the current name and let's do the same here Ctrl R here we can simply do this rename and let's do the same here these are called color or sorry I should say this color slash and I'm going to do the same here color slash so now these are named 16 slash the name of the icon these are named 32 slash the name of the icon so now when I need one of these components I can go to resources lesson five and I have two big categories here color icons which have the two sizes I want and then I have monochrome icons that also have the two sizes I want so you can really play around with these as much as you like and rename them the way you see fit this is just one way of doing it but if you would rather have these icons in the same frame let's say icons you can grab these paste them in you can delete this and then you can rename these the following way so we'll have icons which is the name of the frame slash monochrome slash the current name of the icon so let's rename those let's actually copy this and then let's select all of these let's rename them as monochrome slash the name of the icon and then we'll do the same for these sets this time these will be color slash color slash current name okay so now because all of these icons are named monochrome slash 32 slash the name of the icon and the 16 version and then the color 32 and color 16 versions when I go here they're all going to be organized under icons and then I can choose either color or a monochrome and then either the 16 or the 32 pixel version so as I was saying it's really up to you how you organize these but figma does give you the tools for that and with that said let's take a look at a few key takeaways in figma the easiest way to organize components is by using frames a much more powerful way of organizing is the slash separated naming convention this allows you to create as many levels and sub levels for component Organization for example a component named button slash large slash full slash icon will be placed in the categories of button large full and icon uh use this system to separate components based on their style function or destination you can rename components in bulk by using the rename function in figma and that's about it for naming and organizing components a very useful feature now so far we've looked at some basic usage for figma components so what do you say we turn it up a notch and work on some some more complex use cases let's start with component variance to put it simply variants allow you to group uh similar components in the same container let's take a button for example right it can have different states uh pressed Mouse over disabled and so on well instead of creating a separate component for each of these states and have them scattered across your document you can create a single component with multiple variants or versions if you want or variations for each of these states okay so let me show you how you would create these variants let's consider the following scenario right we have these three elements we have a hero section that features a button with an icon and then we have a call to action section that features a similar button but a little bit bigger and with no icon and then we have a form which features again a similar button because it uses roughly the same color the same fonts uh but this time it's a pill button or uh I should say a ghost button it doesn't have a fill color instead it has a border and the text inside is colored and it also has an icon so instead of creating these three buttons as three separate components we can create them as a component set okay and that component set will have a variance so here I have a copy of this button let's go ahead and turn it into a component now with this still selected let's go up here and choose add variant so this will create a component set where we have the initial version and then a copy of that copy which we can edit modify to our liking now a couple of things have happened here we can see the button in the layers panel with its normal icon but each variant has a different icon so it's also a diamond shape but it's filled with a solid color and it's of course different from the instance icon we've been seeing so far and also different from the main component icon also in the inspector we can see a new section called properties which defines a property name and property values and these property values are actually the names of the two variants that we see here so in terms of the property we can say type we can call this whatever we want but we're essentially creating uh different types of button in this component set okay and the first one we can call it default with icon and we can actually use uh spaces here and the second one when we rename it make sure it's uh name says type equals or whatever the property name is and the second one will say large without icon and you can probably name these a little bit better okay so now let's actually make this a second variant look like what we have here so Let's see we have 48 and 32 in terms of padding let's do that so 48 and 32 that's good we have no icon so we can simply delete that and we also have a bigger font size here right we have uh 21 pixels with 30 pixel line height and I'm actually missing a font here but I'll simply replace it so 21 30 and let's make this bold like so and let's also update the um the font here let's actually keep this on medium like so okay so that's the uh second button variation by the way you can uh resize this however you want and then we have a third variation here so let's either select the um the component set and click on this plus sign the where it says add variant or we can uh do it here in the toolbar whatever works just fine so let's actually click this and that's going to create a copy of the original uh button so with that done uh let's take a look at this one and see what kind of properties it has so 48 uh 24 for vertical and 16 spacing let's actually copy this icon let's paste that icon in let's make sure the auto layout properties are set correctly so 48 there let's also remove the fill color and let's copy the properties for this and paste them here now this is actually white okay and then let's um copy the color for this and let's paste it here and of course let's also update the the typeface there all right so now I have a component set with three variants or three versions of my button right we have the default with icon we have the large without icon and let's actually rename this to Ghost with icon now when it comes to using these buttons we can do the following we can for example select this bit we can go to Quick insert uh lesson six and then I can choose my button okay so that's an an instance of what we just created and I can delete the old one but now here's the interesting part with this button selected I can now go to the inspector and I can choose whatever variant I want do I want the large one or the ghost one it's simple I just select them from here and then of course I can copy this instance and I can go in here and I can paste that in I can select my variant and I can change the text here to whatever I want and then I can do the same here right in the form I can delete the old one I can choose my variant I can of course make this fill the container if I want to and I can change the text right and this is all possible thanks to component variance I have one component set that has three different versions and then when it comes time to use that component I can choose from whatever variance I have defined which is pretty awesome now in this demo that I just showed you we actually created component variants from scratch but you can also merge existing components as variance so for example in this demo we have some form elements we have a check box that has first of all a blue color or a green color and then two states we have checked or mixed and then we also have radio buttons right we have a green radio button and a blue one and both have two states checked or unchecked so right now if I want to use either a checkbox or a radio button it's actually pretty easy because they're organized under form Elements which is the name of the frame and then because I'm using the slash separated naming convention I can go into the various categories and choose uh the exact component that I want right but here's the thing when you have like multiple levels and sub levels it can get tricky to find the component that you want so what if we just had two components one for the checkbox one for the radio buttons and here's how we do that we select all of these components and in the inspector we can see an option combined as variance so let's click that and let's do the same here combine as variance so now for both of these sets let's go ahead and Define some properties blue and green these are the values right let's double click here and Define this property as color Property 2 let's rename it as State and let's do the same here property one color property two state so now when it's time to use one of these components I can open up either the quick insert or the assets panel right it works exactly the same way and under form elements I just have two components check box and a radio so now let me actually put a frame Behind These so you can see them better so now when I select the check box for example I can choose between different variants like this do I want the green color Okay do I want the mix State I can do that or maybe I want the blue color instead everything is nicely laid out for me here in the inspector where I have access to the property names color and state and also the different values for those properties and the same goes for the check box right I can select the instance and I can choose green or blue and because the state just has two values I can actually use this toggle switch and figma does this automatically for me which is pretty awesome so that's how you can use component variance to your advantage in cases like this where the slash separated naming convention just isn't enough or it might actually create more problems than than solve than using variance is a really really good option you would just add your variants with the different um you know variations of the component and then figma will allow you to choose the different ones in a very efficient way I would say so yeah that's the second option if you already have components created and named you can select them and combine them as variants of a single component okay now let's have a look at a few key takeaways figma variance allows you to group similar components in the same container in other words have variations of a component in the same place component variants are part of a component set and you can have as many variants as you want variants will declutter your figma document because instead of having variations as separate components they are grouped into a single component set variants can be created from scratch or by combining existing components into a set all right and those are component variants now let's move on and talk about probably one of the most powerful features in figma and this was actually introduced in 2022 so it's relatively new I've already talked about it in this lesson it's called component properties and let's explore that in more detail in the next lesson as we saw previously component variants can be very powerful however there is a certain threshold where using them becomes inefficient and that's when you have too many of them okay so let's assume that your document or you have a component with 200 variants okay you have a button with various States various colors light and dark mode it can happen right you can reach a very high number of variants well when that happens it's gonna be pretty hard to find the right variant even if you organize those variants properly now to solve this figma came up with something called component properties and these are not a substitute for variance instead they work alongside them to simplify the whole design process so let me show you how to use them before we start you need to know that there are four types of component properties we have instance swap text Boolean and variant let me start with the easiest one which is text properties so let's take this button and turn it into a component and let's duplicate this and let me grab the original and place it somewhere outside now let's assume that I want to change the content of this button I wanted to say something else well the way we used to do it was we selected the text inside and we will change it to whatever we want it but with component properties we can do that a lot easier so what we do is we go to the main component and we select the text inside there and in the inspector where it says content we can see a little button here that says create text property so let's create that we can name it whatever you want in my case I'm going to leave it at text and the value we can also specify a default value so let's name this button text create property so now this changed the default text inside my button my main component but then when I select the instance in the inspector I have a property here that's called text or whatever name we just gave it and I can actually rename this right here in the inspector without having to select that text again of course I can do it the old-fashioned way but this is a lot better so that's one component property that's the text property what about Boolean properties well Boolean properties refer to States like on off visible invisible and so on so for example let's say I want to create a version of this button with no icon so I can go in here in the main component and I can select the icon and in the inspector where it says a layer we can see another create component property button this time it says create Boolean property so let's click this and we're going to name it show icon and this can be either true or false and by default I want it to show the icon so let's create the property but then when I select the instance I have another available option here in the inspector that says show icon and of course when I check or uncheck this the icon becomes visible or invisible pretty pretty awesome so that's Boolean property now let's have a look at instance Swap and for that we're gonna go right here where we have these elements right these are exactly the same or not exactly the same but they're 90 percent the same thing right we have a component that has an icon title shorthand notation a number and then another number here the difference between these is of course all the text content is different from one instance to the other the icon is different and also we have another major difference here the color of the text one is with plus and it's green the other is with minus and it's red so let's see how we can create this section by using components and component properties so what I'm going to do is actually first of all select the section in its entirety and then I'm going to select the other icons so let's grab it from there let's paste it here let's do the same here and let's do the same here so now I have these three icons and let's create multiple components of them and let's also rename them to crypto icon slash the current name so they're organized a bit better now let's grab a copy of this and paste it right here so we'll basically replace this Standalone one and then we'll take this and we'll create a component so now inside this component let's select this instance of the icon and right here in the inspector we're going to click create instance swap property and I'm going to call this crypto icon or I can just call it icon it really makes no difference so now I can actually select the default I'm going to leave it at Bitcoin and I'm going to create the property and then I can select this and I can create a text property we're going to call this title select this do the same create property let's call this shorthand select this create another property and by the way you can actually use existing properties and the contents will basically be overwritten so let's create this as I don't know uh price and let's create this as trend okay so now let's uh copy this component and let's go in here and let's paste it in let's remove the old static content and now let's duplicate it and in the inspector we can see a lot of properties so I can change the icon it was what ethereum I can change the title I can change the shorthand like so I can change the price for I don't know whatever it was and I can change the trend to a new value and that's the power of component properties but we still have an issue here we have some properties like this trend that can be positive or negative like we have here so what do we do then well it's quite simple we select the main component we add a variant okay and that variant would be we'll call negative for value and the property is going to be Trend type and here we'll just copy the properties from here we're gonna paste them here and we're also going to change the uh the sign so now if I'm gonna duplicate this once again I can select the trend type we have the default which we can actually rename to positive and then I can go in here and I can select the negative Trend and then I can do all the other changes that I want I can say minus 1.5 percent like so and I can of course change all the other properties just like I did previously now this what I just showed you is called a variant property and I actually showed these to you in in the previous lesson but now you can see them in in a different context so to sum it up we have four component properties right we have text properties which allow us to change text we have Boolean properties which allow us to switch the visibility of an element on and off we have instant swap properties which allow us to do instant swapping from the inspector and then we have a variant properties which allow us to switch between different variants so let me actually move this over we can switch between the different variants which is pretty pretty cool now there are of course other use cases for all of these component properties so for example I could use them on these buttons here I just set two of them for the text and the icon but I can create a variation of variant of this button to accommodate the Ghost type right that's going to be another property variant property I can create an instance swap property for this icon right because we have one icon here but we have a different icon here so you can use these in a lot of different applications and it's super super powerful because instead of creating a bunch of variations for this uh this list item right I can just have two variations and then a bunch of properties I really really like this this feature in figma and also before we wrap up this lesson you should know that these properties can be reordered and edited even after they were created so if I were to select this component set I can go in the inspector and I can double click any of the property names and change those and I can also click and drag to reorder these in any way that I want so maybe I want the title to be first I can just drag this up and a figma actually will place the variant properties at the very top let's say I want the icon to be second and a shorthand or actually shorthand second icon third so now when I select any of these instances you'll see that these properties are now properly reordered in the inspector as well right then so a few key takeaways for this lesson having too many component variants can be inefficient they become hard to manage component properties are a better way of managing large amounts of component variations there are four types of component properties instant swap text Boolean and variant by using the inspector component properties can be edited and reordered even after they were created right then we're almost at the end of this course but there is just one last thing I want to show you and that is a interactive components for prototyping that's coming up next prototyping is all about interaction right its purpose is to show you how a design would work in the real world so how a user gets from point A to point B or how that user interacts with various elements now to make this interaction as close as possible to the real product figma allows us to create interactive components that allow us to switch between different variants in a prototype let me show you some examples so let's start with some of these form elements here I have basically a check box that has two colors and two states okay so I can select all of these and I can create multiple components and I can also do the same here and then I can take all of these and combine all of them as variance so now I just have one component set now to create an interactive component I need to select it and then go to the Prototype Tab and then I just need to create an interaction so for example I want an interaction going from the default state to the checked State whenever I click okay so I'm going to select on click change to property green and then checked and I didn't go through uh naming these component properties they're just called property one and property2 but you can name them whatever you want and you can also choose the animation here either you want instant dissolve smart animate I'm gonna choose instant and then I can also do the exact opposite I can click on the unchecked and that's going to take me to the default State okay so now when I create a new frame and I use this radio button I can open up the presentation and let me actually zoom in here a little bit and then you'll see that when I click this changes States it changes from one variant to the other so that's pretty cool what else can we do with this well let's consider this uh this button right let's create or select these three states we have default hover and press and we can go in here and we can create a component set which will add these three as a variance and we can just call them state and this is default this will rename to hover and this will rename to press so with the component set selected we can go into prototype and we can say okay let's add an interaction from this to this and it's going to be while hovering now let's actually change the animation to Smart animate and we can choose an easing we can play around with uh with the different options here for me let's just stick with the defaults and then hover I'm going to go to press and I'm going to say on or while pressing change to State press also with smart animate and then I can go from the third to the first I can select Mouse up for example it's going to go back to the default so now if we're gonna create an instance of this button and let's put it inside a frame and let's open up the Prototype let's actually fill the screen here you'll see that the one I hover that changes to button hover of course the button will have the uh the same text in my case but then when I press it changes the button press and when I release it goes back to the default of course here actually when I release it should go back to hover instead of the uh the default okay so let's actually run this here again and now you'll see that when I press and release it gets me back to hover so that's pretty amazing and one final uh final example we have these tabs here right so we basically want to have a variant where the active tab is on the right side okay so what we can do is we can create a duplicate of that move this around and then I just need to swap out the colors let's go back to the design tab so that's that color 50 and this will simply be White 100 percent okay so with these two selected let's create a component set and with the set selected let's go to prototype and let's select this element create an interaction that goes here and I'm going to say on click we're gonna change to this variant with smart animate and then when I click on this it's going to take me to this variant exactly the same properties so then if I'm gonna use this component in a page like so and we create a prototype we're going to be able to see exactly how this works notice when I click here or here it's going to create a nice animation and that's a simple way of adding animation to buttons menus and a whole lot more in a prototype by using interactive components now some final key takeaways figma lets us create interactive components that give us the option to switch between different variants in a prototype to get started select the component set open the Prototype Tab and create interactions between variants just like you would on any other prototype interactive components represent a great way of animating buttons menus and a whole lot more in a prototype alright folks and that's about it for figma components I hope you enjoyed this course let us know down in the comments if you have any questions and how you plan on using figma components in your design projects don't forget to also check out the envato touch plus YouTube channel for more content like this and also hit that subscribe button and why not give this video a thumbs up if you liked it thanks for watching I'm ADI and until next time take care thank you

Channel: Envato Tuts+

Views: 63,378

Keywords: figma components, figma components tutorial, figma components variants, figma tutorial, ui design, ux design, figma components instances, figma components button, figma components properties, figma components 2022, figma design, figma for beginners, figma component properties, figma tutorial 2022, components in figma

Id: FfeuWbZSRj4

Length: 81min 46sec (4906 seconds)

Published: Fri Oct 14 2022