Lined Icons

How To Create Lined Icons using Figma  

 

I am going to teach you how to make line icons for your mobile apps websites by using figma software.Figma is a plate designing software you can create you a UX and also pro like them if you're not if you're not a sigma user, please have a look at it it's a very it has very good future it has very good features if you want to learn more UX for mobile apps and your website don't forget to don't forget to check other tutorials from Sigma playlist you will definitely enjoy them. I have covered brief very detailed how to design for mobile apps like dating app and how to create mobile app landing page on all those things

figma is a vector-based software. i can scale the elements into at any distant that's why i'm taking small canvas here I have opened fewer keys in flat icon flat account is there upset where you can find thousands of free icons you can download their source and use in your project actually open this just for the reference to show you how to make icons as I like this occurs very much. that's why I open this and I am showing you how to design these kind of icons like Hawaiian icons whenever you are going to design an icon illustration or anything first you have to know its basic shape in which shape it is actually whether it is rectangle square oval circle triangle or anything first you have to define these shapes and then push it from there. here I have drawn a vertical rectangle and I have removes few color and a given stroke and also I have given little bit of rounded areas to its corners I have taken a circle and make it hot and I selected the both I just made them rounded corner and drawn the circle above to give it a user icon given stroke color made on the dublicate and make it feel why I'm doing this to substitute the user shape from the rectangle actually I have drawn. I have taken in this shape and and from the shape options I have chose subtract so if you see the ship has subtracted from the rectangle so that I have space to add in actual user icon  no take line tool and write the horizontal lines and make a little bit bolder distribute them vertically   and without taking new flame and run new shops in it I am actually duplicating the existing one to use few shapes from it to drop pencil.

I have taken vertical rectangle and set it up both the top points and had given complete rounded to it to give it a more rounded look and for the pencil point I have taken triangle shape drawn a triangle shape and i aligned it with respect to do the rectangle now has acted the bottom point of the pointer and give it a reduced rounded corner to give it a more rounded look and I have cited both the shapes and combined them have offered the full color and given stroke and they not have chosen outside option from the stroke options and after I have completed with the pencil  line.

 This pencil as it is in the reference I have duplicated the second icon and remove whatever the show is not required and I have adjusted the existing shapes and I have new shapes to it to create a new icon by doing this way you can drag this lot of time because you are not doing everything from start again but instead of that you are using the existing icons that way you can say a lot of time   to create the lira coin have drawn with colectomy and given lambda various to the corners to give you a boots to the gear an outcrop in the same shape in first if you adjusted it I mean I have selected both the shapes do get them now rotational ok this way I got the outer shape of the gear now select all the shapes the fill color the road and I can hack among them now you see the shape by combining crater the boots I'm going to have negative 18 okay now I got pointers to the inner shape like this now I set all this points and give them the redness now you can see the shape of the gear and you've got a little cut in the bottom edge so I have it will endure stress Center.   

let's drop that when a digital point where you got a shot let's do a trick for that I need this Pope landed ok now drawn a picture but every time T and I have a land it percent of the gear   to create the capturing icon I have drawn a square shape and given rounded corners to all four sets and if you see in this therefore arrow indicators now the size for that I have drawn a pear shape and I have subtracted it from the square so that you can see that plus subtract and where you can see the four points - rather I should have taken the square they rotated it served the top pointer and bottom point and given day this to me down the radius no you can you see the actual almond ship which duplex I and have given stroke to it can we got the actual I ship to draw people take over circuited and draw a circle give stroke put duplicate it and make it smaller to fit inside the big circle they have given me color to it. so that it looks like more per pupil to give a slit had a pointer I'm adding few pointers and delete the center for inter so that it will split the plane   go to stroke options and leave it on the option I follow same process to all the icons what we do in all the icons carefully this is the process for all things I'm doing don't get confused if you confuse anywhere stop there stop the video there and watch it again from back it's very simple process you see just ongoing drawing basic rectangle shapes by combining them and subtracting them.

I am creating custom shapes and by giving them it with the founder radius and adding points and deleting some points and make a split in the center of the line please keep watching the dental end of the video so that you'll get detail understanding and how to create different icons in different shapes you  to export the icons in different formats select all the frames and click export option from the right bottom don't select icons but the frames because by selecting frames all the icons will export it in the same dimensions hundred by hundred or else if you expel a few select only the icons and export them they will get in different sizes because each icon in different shape so that it will export as per the share dimensions and all the icons comes in different sizes which is a little bit add that to the developers when you given it for the data point see you can export SVG also which is scale the vector graphics that can expand to a new instant if you do you know it will not lose its pixels there's the plus point of the SVG.