Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2022)

hi in this video i'm going to show you the best way to start practicing designing apps and websites in figma so in this video i'm going to give you step-by-step instructions you can literally follow click by click i'll only tell you the stuff that you need to get started designing interfaces so let's get started so we're going to be looking at a tool called figma and it has a few advantages one most importantly for you it's free to get started if you're working by yourself we like using it at agn smart because it also has really good collaboration so we can have multiple people working on the same design file at the same time it's also really fast it works on any computer whether you have a mac or a pc or linux whatever you have it works right in the browser and it also has a mobile companion app so you can preview your designs on a mobile screen so there are really no downsides to starting with a tool like figma as you're watching the video if you have any questions about how to do a particular effect in figma or any comment or something that you want to recommend please put it in the comments below and if you want to find out more tips about ui and ux make sure to subscribe to our free newsletter the link to that is in the description below and it's a great resource for anyone starting an ui and ux so this is the website you just go to figma.com and i'm already signed in but you can sign up very quickly even with your google account and get started but before we jump right into figma i want to show you the way i would recommend to get started so you just want to start practicing now for that i'm not going to ask you to start designing something from scratch because i believe that would be very hard with someone especially if you're a complete beginner in this space and you have no grounding in design principles and things like that so the best way for you to get started is actually to copy other designs and the reason this is so good is because you can see how this design was created so that when you get stuck on something you can actually see how this person who created this file achieved a particular effect or look inside of figma and this is totally fine in the beginning because you're not going to be selling these you're not going to be saying that you designed something when you copied it from someone else this is just for your own practice and it's a really good way to get started so as you can see here this is what figma looks like after you log in and start a file and i haven't even shown you how to start a file because i want you to use another file as your starting point as opposed to a blank file and like i said we're not going to cover everything that you can see here on the screen in terms of what all the various buttons do we're just going to focus about how you can get started now to do that i wanted to start off with a template and what i literally did was i typed into google sigma resources and i got a bunch of results i clicked on a few of them and the third one called literally figmaresources.com is a really good one and i have it open here so when you look at that you'll find a bunch of free templates and this is a great thing about figma there are a lot of free resources on the web that you can use to start practicing to incorporate into your designs so you don't have to start from scratch and i picked one of these that is a food delivery app ui and i have it open here so the way it works with finger ma is because it's all web-based you can literally click this button here that says copy to figma and it will copy that file over to your figma account well first it's going to open it in a new browser tab where you can see it and there might be even like other people viewing this file at the same time but you can see here at the top that it says view only and we want to be able to make edits to this so what we do in this case when we're looking at someone else's file is we just click on the name and then we say duplicate to your drafts so if you're signed into figma it's just going to create a copy of this file in your own figma account and that's exactly what i did and i have it open in this tab right here so you can see it no longer says view only like it says in that tab and i can start editing this all right so now we have a copy of that file that we're going to use as our starting point so in figma as you can see i can just scroll up and down to see the different screens in this file and i can very easily rearrange them you'll notice that in the original file they were placed side by side and i have more of a vertical arrangement and i can just do that by grabbing the title and moving it around with my mouse cursor like that i can also zoom in and zoom out with a pinch gesture on my trackpad that way i can see all of my screens at once or i can zoom in to see a particular screen so let's say now i want to start copying this design what do i do well just to give you the basics on the left here i just have a bunch of layers and then when i select an element i get the settings for that element on the right okay so what i want to do now is create a rectangle like this for my own design now this has a specific shape and this is called a frame so the first tool you need to know about is the frames here or you hit f on your keyboard and anything i press will show here on the bottom left corner so you know exactly what i pressed to activate a particular tool and then i can start drawing a size but now i don't know how to get the exact same size as this and so what i'm going to do is i'm going to delete this and i'm going to click on this screen that exists already and if i look at the frame here and i click on that it shows me that this is using an iphone 11 pro max right so this is a standard size and what i can do in figma is i can hit f again to go into the frame mode and then i can select here from a bunch of templates and i'll select iphone 11 pro max and then it automatically puts in a frame of the perfect size i'll just place that right next to the original frame and i can start copying the design right so i can see here that they have a fancy design element here with the purple but let's keep things simple for now and let's just assume i just want a purple background right so the easiest way i could accomplish this is i could either give this whole frame a background color or i could draw a rectangle that's purple right that can be in my background so if i want to draw a rectangle i can do that from here you can see that this is the rectangle tool and it already says like r next to it so i'm going to hit r on my keyboard and draw a rectangle right so i don't want it to take up i don't need it to take up the whole screen this is fine now i can see by default this is purple so i'll click on it and see here like i said whenever i select something the settings for that element will be on the right so i'll see here that here is the gray color and i don't want it to be gray i want it to be that purple so i can either try to change things here or i can use the eyedropper and this is something that you might already know from something like photoshop if you've ever used a image editing tool or anything like that so i'll use that and i'll pick just this color right so this is good enough for now next i want to create this card so this is just another rectangle essentially right so i'll just draw another rectangle here and try to have it to be approximately the same height so i'll notice here that well the color is different and i don't have the fancy rounding so let's start with the color since we already covered that and this looks like a very light gray it's not white because i can see that the circle is white so what i can do quickly is again i'll grab the eyedropper tool select here so now i have the same color that's on the left here right but i can notice also that the corners here it has these nice rounded corners that i don't have and for that right under the position and the dimensions so if i change this this is just changing the x coordinates and i'm just going to do command z or control z if you're on a mac to go back and these are the y coordinates and by the way i can change these by clicking and dragging you you see the cursor turns to this sideways arrow and i can click and drag left and right to change these values or i can type them in right i can also change the width and the height and here is the angle for rotation but what i want to focus on right now is the corner radius right so this is that rounding effect and so with the corner radius tool i can adjust how rounded these corners are now i'm getting closer to the look of that original file right but i can see on the bottom that i have these rounded corners but i don't want them because the original one doesn't have it now there is a fix for this in figma but the easy and cheating solution would be to just extend this beyond the frame and then it's hidden outside the frame of the phone screen right but if you want to do it the correct way you would come to the corner radius and you would click on independent corners and what this allows you to do is set each corner independently and so if i change this to zero you'll see that it's no longer rounded and if i want to keep the top rounded but not the bottom then i just change the bottom ones right and now it looks correct now the next thing would be to create the circle and the way to create a circle is from the shapes menu you have an ellipse which you can also do with the letter o on your keyboard now by default you'll be able to draw kind of a circle with any aspect ratio but if you want to be a perfect circle all you need to do is hold shift on your keyboard as you're dragging and it'll just be a perfect circle now if i want to find out the exact dimensions of this i can click once and i can see on the left that i've selected the whole group i can double click again and i can still see that i haven't selected the circle i keep double clicking and now i have the circle and it shows me that it's 104 by 104 so i'll go here and change the dimensions of my circle here and i'll type 104 and now i have something with the exact dimensions now i want to know where to place this right how high should it be like because i don't know a lot about spacing right now and i just want to copy what the person did so again i'll double click here double click again and now i've selected this and i want to know how far it is from that edge and the way i can do that is i hold option on a mac or alt on a windows computer and that will show me the distance from all of the neighboring elements if i hover over the uh the text here you can see it's showing me it's 24 pixels um if i select the card it's showing me the distance between all of the edges here right and so what i want to know is that it's 64 pixels away from the top and so i select my circle and then i can start while holding option i can hit the down arrow and now i have 64 right and i can see that left and right it's perfectly centered and figma will help you do this if you move something it will snap to the center as you can see here now i have my circle in the middle right let's quickly change the color now we're experts at this uh this is just white so this is very easy uh now there's also here an icon and icons are things that you'll often need when designing mobile interfaces because you're you'll wanna have an icon for a home screen or something like that and you can literally google free figma icons and again you'll have a result from google that says here are 460 free icons and this is also a figma file so i can literally come here this is a figma file i just hid the interface here by right clicking you can hide the interface and i can come here and select an icon let's say i want to copy this one i literally just use the copy shortcut which is command c or control c i come back to my file and i paste that element right so now i have that icon and figma also helps you with positioning it automatically centers things as you're moving them around so if i resize this without any modifier keys it might distort the image so i'll do command z and what i'll do instead is hold shift like we did with the circle that way it'll always resize perfectly and what i can also do is that if i already have this centered i can hold both shift and option or alt on a pc and start resizing and it will resize from the center out right so this will just save you a little bit of time right so now i have my icon or i can alternatively just grab this icon double click double click and double click again and that now i've selected this icon i can delete the one that i already have and paste it here and now i have that same icon so it's really important for you to have a place to go to to find icons and this one that i found here i literally found it in three seconds so i'm sure there are other free icons because this might not have everything that you need and another thing that would be very handy for you is somewhere to get free images to use in your designs because as you can see here uh those will come in very handy in a lot of applications and so let's say that i wanted to get an image here instead of this blank color since i can't do this fancy effect yet and we don't want to focus on fancy effects just yet right so one good website is called unsplash and i just typed delivery in search and i found this image here and with figma it's very easy to paste in an image literally all i have to do is come to unsplash right click on the image then i can copy the image go back to my figma file i select the background so that it pastes it over this particular area and i hit command v or control v if you're on a pc and then i can just reposition this i'm not going to worry too much about you know perfect positioning or fancy effects but this is how easy it is to get an image in right now let's quickly finish this screen now the next thing that i need is text here that says non-contact deliveries and the way i get text is through the t icon here i can just hit t on my keyboard and text so non-contact deliveries right now obviously this doesn't look the same as the other image there are a few things i want to find out first is the size of the text so to do that double click double click and then i look here at the settings so one i can see it's using sf pro display so you may or may not have the font locally on your machine that the person is using but chances are you will and i can see that the size is 34. and it's bold right so i'm gonna apply the same setting so i'm gonna click here type 34 and i'm gonna use sf pro text i'm just typing it but you can also select it here and i'm gonna change this to bold right now this doesn't look exactly the same because this is over two lines and by default sigma will just have the text be as long or as wide as the text is long and i can change that by just dragging this to resize it and this gets me the effect that i want i just need to center it now and i want to know how far away it is from that circle right so we saw this already i'll just double click double click and hold option and i can see it's 24 pixels away and i'll just nudge this up a little bit and now it's perfect and i think the color is different here so again i'll hit the color hit the eyedropper and i think this is dark purple and now i have that color right excellent i think this might be doing some other effects to the text but we're not going to worry about it right now we're going to need to create something that looks like the paragraph right here and so i'll hit the t icon again and by default it's gonna use the same settings as i used before just for speed i'll copy this text here so you don't have to wait for me to type it out and as you can see it was very wide and i can resize this and i can also see here how i can find out how wide this is by double clicking on it and then seeing okay the width is three seven four so i go back here type three seven four and that's exactly the same width and i'll just center it and i'll see how far away this element was from the top 25 so if i nudge it up using my arrow keys now it's right and as you can see the screen is coming along and you can do this as someone who's never used figma before or any design tool now i need a button so for that uh i'm gonna hit the rectangle key again on my keyboard and just do this right and then i'm going to cheat and look at the dimensions of the this button so 374 again and 56 so i'm going to do that 374 and 56 and now i'm going to center it and see how far it is from the element above it so that's 48 but my element is different here so that's okay you don't need to worry about that so what i can do is have the height here adjust automatically to the text and i think i have an extra line that was the reason so now i can let me remember what this number was again so this is 48 and 48 here would be like this all right perfect so now i'm gonna grab the color and let me see if i can also steal the corner radius so this shows eight perfect i'll just type it here now i need some text to go on top and let me see what the settings for that are so sf protext semi-bold oh sorry and 15. so i'll do that real quick oh it actually copied it over because i started editing that and so i say order now all caps and i'll just center this and make it white that's very easy i don't need to grab that color and now i'll just copy this and you can copy an element real quick either by selecting it doing command c command v and it'll paste it right over it so if i move it here you can see it because it's white on white or i can hold option or alt and that'll also duplicate the element so this is a little bit faster let me change the color of that to be the color of the dismiss so i'll just grab that from here right and move it under the button change it to dismiss the last thing i want to see is how far away it was so that was 32 and oh sorry no from the button it's 32 and there now you've created something that's very very close to the original design as you can see starting with a template that's already in figma allows you to cheat in the beginning and copy over elements and you should just look for free resources that have designs of mobile apps of web apps and start copying these and see how you can recreate these elements and over time you'll start to internalize all of the principles that are in place like how to space text elements far apart you'll be able to do it just by looking at it more or less of course at some point it's really good if you start learning about the actual theory of design but this is a way to get started without being bogged down so maybe you can switch you'll do a little bit of practice a little bit of theory and start applying what you learned but this is one way to get started without knowing any theory and just by copying existing designs now the next step from this would be to start designing things in figma when you're comfortable with it and you can pretty much recreate everything that you see so you might see an app that you like that's not already created in figma so maybe you look at instagram or any other app that you like or tick-tock or anything and you can start designing that in figma and when you get stuck you google it you find out how this fancy effect was created or you can google can i do you know x or y in figma can i play a video in figma for example if i want to do something like tik tok and you'll start to familiarize more and more with the tool and the step after that is to look at an app that you think could be improved so maybe your banking app is really really bad and you've always wanted to improve it well now you know how to use figma enough to start putting together a new design so i hope this video was helpful for you please let us know in the comments if you have any questions about next steps something you got stuck on and if you want more tips and tricks about ui and ux we have a free newsletter that you can subscribe to the link is in the description below and it's very helpful for someone who's just starting out like you because we go out and we read all of the news about ui and ux and we just send you the best stuff so if you're just starting out make sure to subscribe to the newsletter and i'll see you in the next video [Music] you

Channel: AJ&Smart

Views: 701,451

Keywords: figma, figma tutorial, figma tutorial for beginners, figma tutorial app design, figma basics, figma for beginners, how to get started with figma, ux design, ux, ux designer, user experience design, user experience, ux ui, ux/ui, ux ui design, user interface design, ui design, product design, digital product design, design, product designer, AJ&Smart

Id: FTFaQWZBqQ8

Length: 24min 23sec (1463 seconds)

Published: Tue Dec 08 2020