Icons and Vector Network in Figma

[Music] making icons and logos has become exponentially easier thanks to the modern design tools which only gives you the simplest most necessary tools to get you started figma makes it even more powerful with their vector network which offers greater flexibility for editing the vectors now instead of connecting paths one-to-one you can create web-like connections like this you don't need to always continue your vector points you can just draw any one's from any existing ones or you can connect them to others now let me show you what I mean first of all I'm just gonna create a bunch of rectangle to create new icons and duplicate this multiple times then I'm going to zoom in on the first rectangle shift tool I'm going to create a 24 by 24 rectangle Center it and then rotate it at 45 degrees angle now in order to start editing the vector points you have to press ENTER like this and then we're gonna go to the pen tool right here you can press P now normally in the traditional vector design tool in order to recreate this shape I have to do a few vector points like this and I press shift to go here I even have the smart guides to healthy and voila and usually you can't do much more than this you have to close every vector points and it creates a shape so let's delete this and let's try to take it to the next level from here so in figma you can actually extend any of these vector points so I'm gonna start with this one and I'm gonna be precise so I'm gonna create a vector point right here right underneath it and I can use my keyboard to be more precise using Shift + down arrow 1 and then 2 so now I just extended this vector point so if I decide to use the Move tool see how it follows that's really neat I'm gonna go back to the pen tool and I'm gonna do the same with these other points this one click here use the keyboard one and then to escape click this other one click here use the shift down arrow twice and I'm going to close it from here instead I'll do the same on the other side and voila now suddenly all of these faces have become shapes so I can go to the paint bucket tool and I can see that each of them are shapes so I can decide to fill them like this and this and each of them can be filled or hidden like this I'm going to press escape and add a few using one of the styles like this one for example and add a stroke like this one so I have a one pixel stroke that's black now here's the magic I'm gonna press enter and I can move any of these shapes and see how its following it's like magic it feels like a 3d cube likewise I can go to any vector point and move it like this and like this so everything just follows let's try to change the perspective of our cube all we need to do we select these two vector points 1 2 3 4 5 so we're moving upwards by 5 pixel and the top one as well so 1 2 3 4 5 downwards and now we have a different perspective of our cube and you can always change any of these faces to get a different perspective now what if I want to separate the shapes so that I can have different gradients for each of them so let's try to do that make sure to select it and not have a mouse overstate so like this for example and do command C and then get out escape so like this command V now I can move it around and you can see that the shape has been separated but don't change the positioning because otherwise you won't be able to have a perfect cube rearranging manually so I'm gonna go back I'm gonna do the same for the other faces double click this is mouse over click again copy and command V mouse over click again command C command B and now I have the three shapes with these three shapes I can basically decide to do any kinds of gradients so I can remove for example or the stroke I'm going to remove the gradient add a new field and use the color picker to have one of these colors the same thing for this one and then this one as well so I can decide to make this one a little bit darker and now I have my 3d key I'm going to move these shapes command shift V to here under root them actually and center it so I have two different icons and obviously I can play with perspective [Music] like this now let's learn a little bit about basic curves because yes you can create polygons by just creating these vector points but you can also curve them to make them more interesting and to create very unique shapes so the first thing we're gonna do is press P and then from here I'm going to zoom in a little bit and create a vector point here I'll move down a little bit by perhaps 20 points and it doesn't need to be precise by the way this can be from here to here let's say and when I arrived here I can press shift and then when I click I need to hold the click like this and I moved by about 10 to 15 pixels like this so here you can see that I'm using the Bezier curve to really change the direction and the curving so I'm gonna release it right here and now I'm going to go back to original point so from this I just created a drop a drop icon and it's as simple as that now I can always edit the basic curve by clicking here and this is where you can see these little dots where I can change and edit my Bezier curve the other thing I can do well first of all you can see that this is not mirroring both it mirrors the angle but it doesn't mirror the length so I can also edit this right here I can also decide to not to mirror so that it only affects one side just like maybe a flame or something or I can do mirror angle and length then both is gonna be mirrored so if I have more on my drop to be bigger to be fatter I can do it like this using shift awesome so now I can just make this one with a fill instead and check my proportions perhaps make this smaller and centered let's go to the next one there's another tool that you should learn which is called a pencil tool and this is really good if you want to draw something like a mock-up or if you want to have your signature for example so the cool thing about this is that it makes it into a vector and so it's infinitely scalable as a signature but obviously I'm not going to use that in my design system I can always do let's say a more organic arrow like this example escape select here go to stroke advanced stroke and select line arrow for example and obviously all of this can be customized later if you want using the basic curves like so let's make it centered I can decide that one of the point should not have an arrow and also make it fatter and maybe add a circle here awesome so let's create a new icon this time we're going to create the download icon okay so we're going to create a bunch of circles the first one I'm gonna press o it's gonna be 12 by 12 the second one it's gonna be 10 by 10 so make it connect a little bit the third one is gonna be 18 by 18 and then another one which is 12 by 12 make sure that the last one is in the same level as the first one and then we just need to create a square using R and voila this is our cloud icon select all of those and then do Union just gonna Center it if we look at the composition you can see that it's approximately like this you don't have to have exactly what I have but it should look pretty good and should fill the entire space so what I want to show you is to use the stroke effect so I'm gonna remove the fill and create a stroke instead and here I just need to fix it a little bit I'm also going to make it to pixel with and I'm going to flatten this so command e and now it becomes a vector if I press ENTER I can see that I have vector points I'm going to go back to the pen tool to customize this and let's say I want to have an opening here so I'm going to create a point right here maybe for pixel from this one and then another one for pixel finally I'm gonna use the Move tool to select just this vector point and delete and well now we're going to go back to the pen tool I'm gonna press P click here roughly from the middle and roughly here at about 10 pixels down and then you shift to create an arrow from here and see for most design tools you have to close the loop but here in Sigma I can just click from here again and then create another part of the arrow like this I'm going to change the stroke so I'm gonna go to advanced stroke and set to round to make it look nicer cool so let's take a look it's looking pretty good now I just need a check icon and I'm going to be done for the day so here you're gonna press P let's say a very simple very small check mark and then go until here using shift I can have this really nice 45 degrees angle and now let's edit the stroke let's make it too and let's make it round that's it at this point I just want to turn all of these icons into components first of all because I have so many layers I just want to group all the rectangles into a group so rectangles and now I have the icons now what you can do is let's say you select the first icon you can set the constraints first so center and then the center and here I can do command option G and that's gonna put it in the frame and using that frame I can basically do option and then drag one of the the points and make it into a frame of 50 by 50 so I'm gonna use this frame to set my component and I should do the same for all the other icons so let's select all of these icons set them to center and then Center and for each of them I'm gonna create a frame so command option G awesome so now we seem to have some extra layers here we can delete them we're going to name each of these frame so that they can be named as a component so this one is going to be icons close and I'm gonna do the rest as well great so now I have all of these icons as components I can just publish the changes go here and I can see all the icons and styles as well as the assets and components and I'm gonna publish it so I have all the icons that I need to create some of the designs that I want so for example this page and specifically the tooltip here with some of these icons so let's go to our design file and try to do that let's zoom out a little bit I'm going to move these to the bottom for now and I'm going to duplicate well at least I'm going to create a new frame using the MacBook Pro let's copy and paste the hero and the header so I'm going to select this here command V I'm going to remove some of these elements that I don't need and I'm going to change the background as well so this one let's change it to another one or I can use one of the styles actually so I'm going to use the react for designers one let's change the text react for designers as well as this text and move it a little bit up let's say 30 or 20 now let's expand the page the frame and I want to show you how to use the Bend tool so I'm gonna create a rectangle that's gonna cover here to the full width let's set it to roughly 350 set the fuel to white and then press Enter we're gonna go to the band tool here and click on it and then I'm going to move around this side the first portion and move it like this as you can see I'm creating a wave and now with the move tool I can just move this down a little bit and I can play with the basic curve like so to create my wave effect so let's create a tool tip first of all maybe my frame is a little bit too too big for now I'm going to create a circle that's about 60 by 60 right here and I'm going to change the style to let's say this one or this one let's have a stroke as well and the stroke is gonna be - as well as it's gonna have a gradient so I can use again one of the color styles so like this one and I'm gonna zoom in shift to zoom out a little bit go to the components and this is where I can find the icons so the one that I want is the close icon so I'm going to put it right here and I can feel it - white for the actual circle I'm gonna add the drop shadow so let's say a button drop shadow one since it's a horror state I'm gonna set it to shadow - so what this means is that the user is gonna click on the hamburger menu and then it's gonna have the close button let's create a rectangle of for 20 by 500 let's move it right here around 20 from the left set it to a corner radius of 20 we're also going to create a 32 by 32 square and this one is gonna have a rotation of 45 degrees with the corner radius of 5 so what's gonna happen is that we're gonna point this to our menu here and I'm gonna say both of these shapes and the Union like this now they are together so let's change the color code to dark blue like this one we're going to apply a background blur and when you do that make sure that you're not touching the opacity of the layer but the opacity of the fill and we're gonna set it to 80% create a new effect background blur it's gonna be at 40 like this let's add a drop shadow with a blur of 40 and a y-position of 20 and I want to show you a trick to make this rounded right here in this corner we're gonna set it on the Union we're gonna set the corner radius to 10 so we can see it does this really nice corner radius right here and we can obviously change it but I'm gonna settle for 10 let's set an outline as well so a stroke set it to white but make it 20 percent like this so now we have a nice tool tip design we just need to fill the content here let's start with the title so I'm going to press T designers I'm going to set it to white and use one of the style which is 30 set to left aligned with distance of 30 from the top and 40 from the left seems to be spaced out a little bit so maybe I'll just set it to 0 like this now I'm going to create a cell for each section in my course so let's create a frame of for 20 by 44 let's set it to transparent and inside this frame let's add a text section so let's say intro react section white and set a text of 16 like this let's create a line so it's gonna be to the bottom and set it to 140 from the left and set it all the way to to the end like this we should use the same opacity so wide 20% we're also going to bring the icons let's go to components and let's bring the check box like this you can make it smaller let's say using decay maybe to 40 set the color - it's a light gray or blue Center it and then we also need the download icon get here again I'm going to rely it to the right move by roughly 20 pixels make it white at 80% if it's too big we can also use the scale to make it at 40 and center it and then perhaps 30 from the right would be good alright so this is our cell we just need to create a component out of this and duplicate it multiple times I'm gonna move this a little bit so what I'm going to do is to create a component out of this so I'm gonna copy this and go to my design system let's create a new one that's called sales press enter and then for this one as well particularly all the content and I'm going to make the background to be using maybe black or dark grey with dark blue like this one and I'm going to paste my frame here turn this into a component call it cell and now I can just publish the cell awesome now I'm going to go back to my design I'm going to find the cell and use this one instead so let's remove the frame set it to perhaps five from here and duplicated multiple times so for each of them I can decide to hide for example the check box by just pressing delete the same for the download icon and the same for the line all it's going to do is to hide it it's not gonna delete it for real it's just gonna hide it I'm going to change the content and there we go so if another designer goes to the design system and wants to update it for example remove the drop shadow makes this to be another color like this one the white to be not as light and publish the change then the change can be reflected right here but the next person has to review the change in order to update it so when I update it it's just going to update automatically like this so we have learned a ton today we've learned how to create these icons from scratch we've learn how to use vector networks how to use the Bezier curves we've also learned how to design the wave here using the Bend tool and we did a quick UI for the tooltip using a component that is a cell so I hope you had a ton of fun learning all of this stuff feel free to share them on Twitter on Facebook I would love to see what you have created using all of these techniques in the next lesson we're going to learn how to share our designs with our teammates how to inspect properties so for someone who is a developer for example can look at the properties the distances in the size they can also get SVG code as well as the assets provided inside the document so I hope to see you in the next session thanks very much

Channel: DesignCode

Views: 25,496

Rating: 4.9753466 out of 5

Keywords: figma design, design tool, figma course, icon design, vector network, design system

Id: 9vVC9zFA4gU

Length: 30min 29sec (1829 seconds)

Published: Sat May 18 2019