Why and How to use an Icon Set for a Design System - Figma

so do you ever find yourself finding an icon set online and just picking one of the icons that you use but then you might find yourself going back and what ends up happening is this can waste a lot of time and in this video we're going to look at why and how to use an icon set for a design system hey youtube i'm roy a ui designer based in the uk we're going to look at choosing an icon set we are going to think about social icons we can extend the icons to a white and black version if you stick to the end of the video we're going to look at how to customize an icon set and how to create an icon now this is not going to be the perfect solution but this is how i would do it so i'll be sharing this in the figma community you can open the file make sure it's at tell in labs and then if we duplicate the file and the nice thing about heroicons is they have two sets which is the outline and the solid so if you want to put this within your design system all you have to do is just i'm gonna actually copy the whole thing so if i just drag and click i also would like to get the document so if i go down here unlock that i think hold shift click command and c go back here and i'm gonna create a new page called icons paste that in and the nice thing here is you already have all the components set up so in order to use an icon you just do shift i and i would then say icon slash or i would say search it's quite a common one so here i'd say okay we want the icon outline now just drag that and there you go so this is how you use your icons and you can go to the instant swapper so you can say hey i actually want the server so if you go to eva this is also a very nice icon set as well and the nice thing is they have outline and feel so you might be in a situation where the icon set you want is not actually in a figma file so what you can do you can download all and because i've done one earlier what i'm gonna do i'm just gonna add a new page and say feather icons so this is where i have the whole folder i'm just gonna do command a and just drag it over here okay so now you can see is absolutely all in order the only thing is we need to create an icon set for this so command r and i would then rename it to icon slash if you want to do the same naming convention you can say outline slash and then current name rename so now you've got this nice naming convention and here you can do component set but we're not going to use variance we're just going to say create multiple components so now you've got your very own icon set so if i was to do shift i and this time we actually want ever the only thing is we've we've called it icon outline zoom so another quick way of doing this is commander again command r i actually want to put ever in front forward slash current name rename so now we've got the ever set so if i was to do shift i and then look for eva so here we go and then what i'm going to do i'm just going to duplicate that and what i'm going to do i'm actually just going to copy so command well that is the uh okay these are the sources so we got them all for you from the place so command c and then we go to your icons make a new page you can say social paste and then what we're going to do is if you hit enter to go into all these uh layers they already been made into another components which is pretty cool but what we might want to do is change the naming convention so for example i would say so these are original but the way i would like it is if i was to click on that one that one i'm gonna do command r i'm going to say the hyphen original i would like to change that to color rename okay and then the negative i like to rename that to command r so that negative i'd rename that to let's say light rename but now i actually want to create a dark version so if you're finding value in this video please hit the like button find that layer i'm going to copy paste drag it over here then here facebook all the way to vk command c go here paste but i didn't paste it in there so i'm going to drag it down and what i'm going to do i'm going to break out of these components because they're instances so i'm going to do command alt b undo command r and i want to rename the light to dark rename and then i'm actually gonna choose the colors so i'm gonna say you want that to be dark and it's not appearing because it is beneath the um background white but we'll saw that in a minute and let's see if i can collapse all the layers this isn't some nice shortcut so uh option l nice and then i'm gonna convert them to multiple components sweet and then after that i just want to bring this to the front so can i bring the front there we go i want to create the squid game free icons right so i'm going to need a triangle a square and a circle so i'm just actually going to look at the existing set and this is obviously a very basic icon so here you've got this and this one and then now i just need a triangle now wherever that is let's see and we got one there so i'm holding shift down click and then if i copy and paste i'm just going to drag it across okay so now oop now if i put down to not to lay out shift a and all i'm going to do really i'm just going to go in and i'm going to i have to then break out of these components so command alt b and i'm going to go in and just start deleting right this is the basic shape delete and delete so now we very quickly played around with these and of course we can now go to the frame hit enter command r and now we are going to change the name so actually it's better to go individually so here i'll just say triangle we actually need to go to the frame and hit enter command alt k yeah no i'm doing something wrong very wrong he enter and why are they not going into components create multiple components there'll always be an icon that you'll need to create but you know from scratch i'll duplicate this and the nice thing about this is they actually do all the different versions 24 48 40 and 60. so design your icon here and you've got all the lines which i think is pretty cool so i'm just going to go in and i'm going to use a polygon and i'm going to try and do the triangle so this might be good this might be bad i'm gonna i'm gonna again look at so again i'm gonna look at here and i can see it's got oh it's not totally it's a 20 and 18 okay so 20 width so if i make this 20 width and constrain it it'll be 20 by 20 okay we've got sharp edges get rid of the feel stroke is going to be center and it's one pixel so is it one pixel we'll go back to we'll go back to here we'll see that feather icon is using two pixels so we can go back and we then change that to two so now if i were to command x go in here command v and if i can get it within within these lines you can see it's quite it's pretty big so i need to reduce this so let's say 18 so now it's time to go within within the bounding box so i'm going to just say around there so if i zoom out the really neat thing is it's done it for all all of the other sizes we can put this all into one design system and so far we've done things like textiles color styles spacing and now we've got an icon set and we're actually building a design system because the plan is to start designing landing pages really quickly using a design system and then planning to then build it out with html css so i hope you enjoyed this video please leave a like leave a comment subscribe hit the bell and i'll see you in the next video you

Channel: Ready Designer One

Views: 9,950

Keywords: Why and How to use an Icon Set for a Design System - Figma, figma, figma tutorial, figma design, figma ui design, figma web design, web design, figma website design, figma tutorial web design, ui design tutorial, website design, web design process, website design tutorial, tailwindcss, startup, startup ideas, design startup ideas, awwesome, figma icon design, figma icon, icon figma, figma icons, design system, figma design tutorial, figma icon library, figma icons free

Id: 9cjbKwDT2s0

Length: 11min 16sec (676 seconds)

Published: Thu Nov 04 2021