Figma Basics Tutorial for Beginners (Free Design Tool!)

hello and welcome in this video we're gonna learn how to use Sigma to create graphic assets for your app one of the really nice things about figma is that you can use it on PC and back and that's because it can be run completely in a browser window they also have a desktop app if you prefer that another area which figma shines in is that it's free for individuals if you want more collaborators on a Figment project then you're gonna have to start paying but for individuals you can use all of the features completely for free and personally I've been using figma for free for years now I'm gonna go through all the core and basic features and figma that you're going to need to create graphic assets however I'm also going to get you to do your own practice because really that's the only way you're gonna get good at this I'm also going to warn you that with all the things that I'm gonna be showing you in this video it might seem overwhelming but the more time you spend inside figma the more exercises you do like the ones following this lesson the more app designs that you do inside figma the more comfortable you will be inside of it and the better you will become does that sound good all right let's get started so the first thing to do is just to visit figma comm and sign up for a new account it's going to be completely free for us to use the only time you're gonna have to pay is if you want to use the collaborative features as a team and I think yes for an organization you can pay for a single person I think 12 dollars a month gives you some more perks and but for free you can get three projects to members and that's pretty pretty good because you're gonna find that this tool is very similar to sketch all of the capabilities even the shortcut keys in the locations of where you'll find things very similar so if you're thinking about paying for sketch you can take a look at this tool first and then decide the other thing that's really cool about figma is that it works on both Mac and Windows you can also use it in the browser and you can also download desktop apps in this demo I'm just going to do it in the browser because it's a pretty low effort to do and that's most often how people will start using figma and once they use it a little bit they'll go ahead and download the desktop app so sign up for a new account and once you do you're gonna jump into this area where you see all of your figma files so I'm gonna go ahead and open a new file just before I do that though if you wanted to get the desktop app you can go ahead and click this link here and it's gonna redirect you to the appropriate app for you so let's start a brand new file and let's jump in so when you open up your first figma file it's going to be a blank canvas what you're gonna want to do is create a frame and that basically outlines the area for your design so you can either press a on your keyboard for a shortcut key and that's going to open up a bunch of different default frame sizes for you or you can click this button here or pull down the drop-down or rather I'm already looking at the frame panel so if I were looking at something else I can select okay if I were looking at something else like this and you click this button up here it's gonna show you the different frame templates so I'm gonna go ahead and click on iPhone eight and it's gonna create this frame for me to create my design in I'm gonna delete this default frame I accidentally created alright so that is my frame and the concept of a frame you can also think of it as a screen so this would represent one screen in my app and if I were to add another frame that would be my second screen and then you can go ahead and and title these if you double click the name right there so for example this could be my home screen and the second one could be like my profile screen or something like that and actually I accidentally reversed the order so it could be something like that in order to navigate around there is a zoom button up here so you can go ahead and zoom in or out zoom to fit different percentage sizes in here the shortcut keys + + - to pan around on your canvas you would hold down the spacebar on your keyboard and you'd be able to drag around like that you can also zoom by holding the command key and scrolling up or down and that is going to allow you to zoom in as well without touching this sort of view control here now we're going to get to inserting some shapes and text onto our frames so go ahead select this first frame and you can either click this icon here or you can use the shortcut keys as you can see here on the side you'll notice that a lot of these shapes are very similar to sketch if you watch the last video let's start by putting a rectangle in there so select that and your mouse turns into these crosshairs and you can just draw a rectangle if you hold down shift it's going to force it to be a square so go ahead and try that try a couple of different shapes even with a circle for example you can do an ellipse or if you hold down shift it's going to be a perfect circle you'll notice that you're putting things into the frame it appears here on the left-hand side and this is sort of like a file navigator and lets you see all of your shapes and all of your elements as layers on your frame you can also rearrange these if you wanted let's say the circle over top the square you could rearrange the layers here and we're going to talk about this right hand panel here in just the next section but for now I want to point out to you how you can see all your shapes here some other handy features you can toggle the visibility by clicking this eye next to the layer or you could lock up certain layer by locking it like that and then you're not going to be able to accidentally edit that shape and you won't be able to select it so this can be useful if you want to avoid modifying that specific element now let's try a piece of text and that would be this text tool right here so go ahead and click that click anywhere you want to add some text and go ahead and type something then you can go ahead and rearrange that so we talked about layers and how when you're adding these elements into your frame they appear over on this left hand side and you can rearrange these different layers and lock them and turn them toggle their visibility on and off now I want to talk about grouping so for example if this text in this square you want to treat it as one component and you want them to move together let's say this represented some sort of profile picture or something like that you can go ahead and select both of them and either press command G for the shortcut key or just right-click and choose group selection now once you do that both of them appear as this group and let's say you can rename that as a profile photo or something like that and you can just drag them together as a unit like that now this is useful because you can go ahead and lock the entire group or you can toggle the visibility of the entire group and you can just keep those elements together especially as your frame gets more and more layers and components on top of it it's a good idea to start grouping things together that makes logical sense so that you can stay organized the other reason you'd want to group some elements together is if you want to turn it into a component which we are going to explain a little later on in this lesson but for now I want you to understand the concept of layers and the fact that you can group layers into groups like that now we're going to take a look at the right-hand side of the screen so we started here on the left this is where you get to see everything in your figma file from your frame to your individual groups and elements if you select one of them the details for what you selected appears on the right-hand side and you can do a whole bunch of things with that element for one thing up here if you select two elements you can align them together so if I highlight both of these I hold down shift and click both of them I can go ahead and align left like that or let's say I wanted to talk about line them together so that the tops of both elements line up together I could do that and there's a whole bunch of other options let's go back to just selecting one thing I can change the XY coordinates the height with this is that rotation so I can play around with that if you hover your mouse over the label for the textbox you can actually just drag it so you don't have to enter a number in there you can go like that now this part is corner radius if you have a box let's say the square right here you wanted to turn it into a rounded element you can go ahead and drag that let's say I changed this to 20 you can see that it becomes a rounded square there's a ton of things you can do here you can change the color here this takes a little bit of explaining the constraints so it's basically where you want that element to cling to if your frame size changes for example in this screen the default is left top so you can see these sort of two anchors here if I change this frame and I just kind of forcefully dragged it out you can see that it clings to the top left it doesn't matter how I change this but for example if I change the two right top you can see that now this line is here and this line is here so if I change the frame size it's gonna cling to the top and right so you can see how that clings on that anchor and that anchor point okay so let me just undo this all right let's keep going let's change that back to the left top we have fill we can fill this with different colors we have stroke and this is just another name for border so I can give it a red border give it a blue border or I'm modifying the text here am i let's see oh I'm modifying the whole group that's why the stroke is being applied to the text end the shape is because I was changing the stroke on the whole group see if you want to apply styles to a whole group of elements that's another reason why you would group them together let me undo that because I kind of just wanted to change the stroke on the rectangle so I'm gonna highlight that instead and now I can do a stroke just on that guy let's change that to blue and let's set that to like for just that as an example you can also do some effects let's see what we have here drop shadow so you can see that that's a really easy way to just put a shadow on something you can blur something out so if you have a photo or something like that and you want to add an effect you can do a layer blur or a background blur and finally on this bottom part here you'll notice an export section and here you can dictate if you want to export this at 1x 2x 3x or all three and you would add all of these different options and it allows you to specify the formats and the suffixes because for the iOS graphic assets when you need all three sizes the 2x and 3x versions have this suffix like this and this works the same way in sketch you'll notice if you're coming from sketch this is all very familiar and then at this point if you wanted to export the shape you could just click this button right here or when you're finished with your design as long as you have all of these export settings for the elements that you want to export set you can just mass export everything now we talked about rotating but in terms of scaling there is actually a tool here called scale in the shortcut key for that kay but if you want to scale this square and you choose scale what you're gonna end up doing is just dragging the corners like that and it's going to scale now one more thing I want to talk about are these buttons up here so there are a couple of different options let me undo that didn't mean to that I wanted to open up this menu to show you union selection subtract intersect and exclude now this is going to allow you to combine two different shapes together to create a new one and you can play around with these different settings but how you use them is let's say you wanted to make this square and this circle into this new shape that looks like that and if you highlighted both of them and you clicked Union selection it would turn it into one shape so that's one way you could play around with shapes you can also subtract something so for example if I drew a rectangle like that and I wanted to exclude I basically wanted to cut off this top part I could do that and instead I could choose subtract selection and then you know I would get a shape that looked like that so these tools up here are sometimes helpful so for example if you wanted to create like an arrow or something like that or I could do that and then I could rotate this 90 degrees it looks like I'll have to do 180 more than that 270 put them together like that and then highlight both of them and then click on Union and then I would have my new arrow shape another button I want to talk about up here is called mask and this can be helpful if you want to basically show a background through a certain shape let me show you what I mean I'm gonna go ahead and drag an image from my desktop into figma and yes you can do that if you didn't know let me try that again oh there it is okay and it's covering my arrow now let me move the air on top by adjusting the layers so let's say I wanted to show my mountain but I wanted it in the shape of this guy right here I can go ahead and select these two and then click on mask oops let me do it the other way around so the image actually has to be on top of my arrow there and click on mask and there it is so if the term mask is confusing to you think of the shape as a mask that your image is looking through so the last thing I want to talk about in this figma basics tutorial are components now you might notice here there is a button called create component and it kind of looks like this and then down here on the lower left hand corner you can browse your components by clicking this button you can see we don't have any and to go back to layers you would click this button okay so what our components the idea is that a component is a common element that you use across your different frames so for example we have this cool arrow that we created and no I didn't want to move that but I wanted to move these together let me just put this in a group I can move it together let's say I wanted to use this arrow in a couple different frames well I can let's say copy this and then go into my profile frame and then just paste it and I would have two copies well the only problem with this is if I modify one of them so let's say I change you know I change the way that this looks - something like that right this doesn't affect all of them right this only affects this one however if instead I turned my arrow here into a component by clicking this button you can see it turns purple and if I go into my components tab I will see this new arrow and then I can go into my profile instead and just drag this arrow here and what happens now is that when I modify this component it updates anywhere this component exists so I don't have different copies of the same element instead I turned it into a component I'm using that single component in multiple places so for instance if we go back to our layers tab now and I click on this component here I open it up and let's say I shift the background a little bit you can see that it updates whoops let's undo that submit this shifted a little bit you can see that it updates across all of the places where this component lives so that's really powerful because for instance oftentimes in your app you're gonna have multiple screens with a tab bar if your app has a tab bar and you want to update an icon on that tab bar well it would be great if that tab bar were a component so the same tab bar across all your screens would update all at once instead of you having to go into each screen and update that icon you know X number of times depending on how many screens you have so those are components in figma in sketch they have the same concept it's called symbols you're gonna see us using a lot of these in the upcoming lessons okay so what do you think when I first started using figma I felt a little lost too because know me how to use the tool is one thing but knowing how to use the tool to create nice looking graphics for your app is an entirely different thing right so that's why it's gonna be really helpful for you to try the practice exercises in the next lesson to just get familiar with figma and start using it to produce more practical graphic assets for your app just like coding the more time you spend creating these graphics using figma and just immersing yourself into design the easier it's gonna get the more naturally it's going to come with that said I'll see you in the next lesson

Channel: CodeWithChris

Views: 62,043

Keywords: figma tutorial, intro to figma, figma intro, figma tutorial for beginners, figma tutorial 2020, figma tutorial app design, figma design, figma for beginners, figma introduction, design tool, figma, ui design, ux design, how to use figma

Id: WhlNnf1711M

Length: 18min 39sec (1119 seconds)

Published: Tue Mar 10 2020