Figma Tutorial for Mobile Design (2020)

hey guys what's up it's Chris here in this video I want to show you how to put together an app design like this and this is something that I put together for a web flow video that I did last week and by no means is this a super spectacular app design but I thought it would be super helpful just to show you guys how I was able to build this app design inside of figma for those of you guys who are not familiar with the graphic software that you use for app development two of the most common ones that people use are figma and sketch now they're very similar but figma happens to be very free and so I I tend to use that a lot more because I know that it's a lot more accessible for people to use now the nice thing about figma as well is that its browser-based so that you can use it if you're on the PC or if you're on Mac and you don't need to install any sort of software there is a standalone figma app if you want to use that as a standalone desktop app but I typically use it in the browser a lot and as you can see here because it is so free I use it a lot and it's such a great tool for being absolutely free the only time you have to pay is if you want to collaborate as a team so if you're actually working in a team environment maybe for your job or maybe for an app you're building for a client or something like that then you might want to pay to have those collaboration features but as a solo indie developer using figma solo pretty much it's a free tool so I'm gonna show you how I was able to put together this app design there are some techniques here for those of you who you know are haven't really used figma that I think are interesting for you to learn and would be very beneficial and helpful for you for those of you guys who are very familiar with figma and graphic software in general then you might not learn anything new here furthermore I'm not gonna go over the very basics of figma like where things are and shapes and stuff like that so if you want that because I'm not sure how many of you guys know how to use graphic software like figma and sketch already and how many of you guys don't so if many of you aren't familiar with figma and sketch and you want to learn the basics then just leave a comment below and I'll I'll gauge how many of you there are if there are you know more than ten of you then I would be happy to create a basics tutorial about figma but for now I'm just gonna jump right into it and create recreate this app design for you so you can learn some of these techniques so what we're going to do is jump over to my figma dashboard here and we're gonna create a brand new file as you can see I actually use it quite a bit and you can have multiple projects that you collaborate with different people and so on we're gonna start a new file here and again this is right in my browser so it's crazy how much you can do in your browser one of the things that I like about figma is they have a whole bunch of preset sizes if you just hit a on your keyboard you can see and you can just select the size I'm gonna go with this iPhone 11 that's the smaller size right here and so you can see it creates a canvas on my left here you're gonna see all the layers and shapes that I add on the right-hand side here these are going to be configuring things like borders and positions and colors and gradients and stuff like that for the individual elements that I select so let's go ahead and put some elements on the screen so you can see what I'm talking about there's a ribbon at the top with all of your tools and so let's add a shape so we're gonna go with ellipse and as you use this more just take note of these shortcut keys because it'll really save you a lot of time as you move on I'm gonna try not to use too many keys here because for the benefit of you following visually so you can draw a circle or ellipse like that if you hold down shift it's gonna be a perfect circle so we're gonna hold down shift and we're gonna add a circle something like that to position there let's make it a little bigger actually let's hold down shift and I think I messed up those proportions I hold down shift and let's grow it a little bit and then we're gonna set the fill now the fill is just a fancy name for the color that's inside so we're gonna click open the solid color and instead of choosing a solid we're gonna hit this drop-down and choose linear for a linear gradient you can change the direction of the gradient by just positioning these handles here and by default it starts with a solid color on the right and sort of a invisible color or a color that's kind of near and visible on the right-hand side so if you wanted to solid colors you can just move this this controls to the alpha or the opacity of the color so dragging it all the way to zero just kind of makes that color invisible so I'm gonna go from a blue something like that that's fine to a kind of like more slight blue maybe I'll just go even more fine like that and so that's my gradient oh yeah one quick thing today's video is sponsored by Atlanta ticket net atlanticnet provides great VPS hosting and they are offering a free one gig virtual server with SSDs free block storage and free snapshots for an entire year in addition to that get $25 and free credits to use on any other services they offer try Atlanta net to develop test or launch your next project ease of use is something that I like as it frees up my mind to focus on coding I also like that they have round-the-clock phone support so if I happen to get stuck I can contact them easily so visit Atlantic dotnet slash code with Chris and enter the code Chris to get your $25 free credit these guys are great give them a try and don't forget to use the coupon code Chris to get twenty five dollars in free credit that's an exclusive offer just for you guys so let's go ahead and close that menu now let's add some text so there's another key T is for text so you can either press this button here or you can hit T on your keyboard I'm going to go ahead and type some text and as you can see I've added two elements to the screen the shape and this text and you can see that both of them are here so I'm going to change the attributes of this text you can add you can add your own fonts by installing a font helper utility I'm just Google think my font helper and you'll see it if you want to use the fonts that are on your own computer they do have a whole bunch of fonts you can use already so I'm just going to change this font to SF Pro display and I'm gonna change this to bold and it's the regular and I'll change the font size to 24 so it's gonna go there and then you can just drag it and position it now if you want to get really accurate with your measurements you can hold down alt on your keyboard and so let's select the text first and hold down alt and you can hover your mouse around different elements and you can see the margins and the relation of that text element to other elements because now my mouse is over the frame I can see how far my label is away from the top edge the left edge but if I hovered over the circle then I would get measurements relative to the circle but I actually want to position the margin so I'm gonna make it relative to the frame and then by tapping the arrow keys on my keyboard I can I can kind of position it I can make sure that it's 20 from the left if I want to be very accurate and line things up alright so the next thing we have is this sort of text here and then we have a sort of progress bar so let's add another piece of text I'm gonna hit T this time because you have already seen me choose that so I say you are 23 hours away from reward and this one we're gonna set to back to regular and please we were using might have been 14 yeah okay so you now because this top label is already in place I can drag it and kind of see you know position like that but there are also some keys up here too kind of aligned at different edges so for example if I want to line these two text elements on the left edge I can hold down shift and select both of them and then hit this and it's gonna make sure that they're aligned on the left and then you get you Center or write a line or top and align those different things all right so now let's go ahead and build this progress bar which is basically just two overlapping rectangles so let's choose rectangle and let's do something like that it doesn't matter exactly what height I'm not gonna try to be exact here but you can adjust the width and the height right here so that's our progress bar but it doesn't have any rounded corners so you'll see that a lot of elements actually have this here this is a corner radius so this dictates you could either enter a number or you could put your mouse over this and you can drag and this indicates you know how rounded the corners are so let's go ahead and just set it to 10 right and this is actually degrees so if you want it to rotate something you can go ahead and do that so I'm gonna undo it all right so now we've got this sort of gray progress bar which is going to represent the track now sometimes I like to zoom in and a shortcut key to zoom in is if you hold down command and this might be the Windows key for you if you're you on PC and just scroll your wheel and then you can zoom in and zoom out and then when you're zoomed in sometimes if you want to move quickly to the other side rather than dragging these bars here you can hold down spacebar and your cursor will change to a hand and then you can just kind of pan around like that so I'm gonna scroll out a little bit those two shortcuts will be really handy for you to navigate around the screen I want to position this in the middle so you can kind of just drag and wait for these red lines to show up and that's that's how I know this guy is in the center here now in order to create the track it's basically the same rectangle on top but with less width and then a gradient so I'm going to go ahead and take this element and I'm gonna press command-c and command V just to create a second one so you can see this is my first one this is my second one for the second one am I going to change the width to something like 250 so it's still hard to see right now but let me just change the color there then you can see it's like that and just like before we're going to change it from solid to a gradient but this time we're going to do that do that and we're gonna go from let's say this blue let's say a green and then the second color here we're gonna make it a blue like that but I don't want it to be an invisible color so I'm actually going to drag it to a hundred percent opacity and so you see something like that as for the icon right here I didn't create this icon from scratch instead I use a service called icons eight.com where you can grab a whole bunch of um icons for your use so this is what it is right here this is icons eight and so I think I search for present or gift or gift or something like that and so this is where I get icons so you can when you download it especially if you're working with figma or sketch you want to download it as an SVG as a vector file so that you can scale it down and scale it up without losing any quality and that's a great thing about working with vectors versus with raster and if those terms kind of escape you don't worry about it just look for vector so they also have a desktop app which I love so rather than just grabbing something from the website I have this desktop app right here so I can juice gift and there it is and I can choose what format I want it in so there's that and I can simply click and drag it it rather than from the website I would have to download it to my desktop and then drag that file into my browser so all right so I'm gonna scale it when you're scaling it you can either use these arrows or you can actually use the scale tool which is shortcut key K so when you do that I would recommend that you do that you can scale it down and the way you can tell that you're using the scale tool and not the the move tool is if you take a look at my mouse cursor it just looks like a two-way arrow but when you press K and using the scale you can see that there's an extra arrow on top of the arrowheads on either side so let me show you that again there's V and there's K you can see that difference using the scale tool will give you actually what you want because sometimes using the move tool and you're trying to scale with it it doesn't scale everything properly all the time so there's that little icon there let's zoom out a little bit and so I'm gonna just copy this command C command V and I've got a second piece of text and as you can see you can make sure that it's 20 like you can make sure your measurements are aligned properly so it's 20 from the left it's 20 from this progress bar this guy is 20 from that progressbar it's also 20 from the left so of the frame so you just make sure everything's aesthetically pleasing and lined up properly and and for this design I use the slightly different color for the text you could also do that just change it from block to something else but I'm not going to bother with that for now alright so this part is kind of the the greeting in this that's part well actually this second part is going to be the stats part but this this top part is kind of like a summary right so if you want if you wanted to group it together to keep things organized you could do that rather than having a long list of elements right you can go ahead and select all of the elements here let's not select the circle because that's part of a background we're going to put that in a separate group called background and we're gonna press command G to put it all into a group so used to using these shortcut keys I said I wouldn't use many of them but yeah so you can even right-click and choose group selection so that's command G you put it all into a group like that and you can name it your name its summary all right so now it just keeps things organized and you can move everything together as a group because they're grouped together and you can also apply some of these attributes to it as a group all right so now we're gonna work on the stats here on the bottom so let me just double check one other tip is that you know sometimes if this is grouped up so you can see it's grouped up under stats here it's really hard to select the the individual element but if you hold down command yeah if you hold down command on your keyboard you can then actually select an element inside of the group so let's go ahead and do that yeah so we're gonna do I know the reason why I wanted to select it cuz I wanted to see what font size I used bold 14 these guys were bold 48 so that was a 14 and then there was another piece of text down here this was 48 and let's change the color to something like that all right now because this text should be centered you can actually change how it's aligned so let's choose text center and I know it visually doesn't make a difference right now but if you end up typing more text into there and then sometimes positioning it is also easier if you set at the center if you're intending that text to be centered or so we can choose these two text elements and we can choose Center them just to make sure that they're they're both kind of aligned in the middles and then let's go ahead and hit command D you know before I use the command C with command V and that's how you create a second copy but you can also press command D to duplicate it and so you you know you just create a second copy there press command D again and there's another copy now the cool thing about figma is that because I made a duplicate and then I dragged it a little bit to the right it kind of knows that you're trying to maybe create multiple duplicates so when you hit command D again it automatically places it at the same it gives the same gap in between this these two and these two and it instead of placing it right on top like it did the first time it put it beside it because then notice that I did it with the second one so for the third one it kind of put it on this side and that's really really nice that it noticed that and then again I can group these guys up right and call this stats and then now I can move it as oops let me just undo now I can move it as a group and kind of place it in the middle you know and we probably want this group to be twenty from there let's see what else we have here all right so now we're gonna work on this little box here and you can see it has a slight drop shadow and these drop shadows are also very easy to do inside of figma so we're gonna start with a rectangle the shortcut key is our in case you didn't notice that and let's drag a rectangle something like that and now here's here's one thing you can do as well which which makes it very handy the reason I was fidgeting with the this width is because you know how we're using 20 pixel margins between you know all the elements on 20 from the left and 20 from the right in case actually this this guy is 23 but if I wanted 20 from the left and 20 from the right you know I can make this rectangle the entire width and then I can go up here and I can say minus 20 and minus 20 and that's gonna essentially minus 40 and then I can position it in the middle and then now it's perfectly 20 from the left and 20 from the right so that's the technique that I used sometimes as well all right you already know how to do rounded corners so we can go ahead and do that actually we rounded it ten before so we'll stick with ten and to do a drop shadow all you have to do is add an effect so let's go ahead and add a drop shadow like that we're gonna configure the blower in the distance by clicking this little Sun icon so let's just use the measurements I used here want to fidget with it there's the rectangle 20 blur and 10 distance and 15 15 opacity in terms of the color of the shadow now this I actually learned from magnet oh so I have him to thank for this sort of generic set of values so his rule is whatever distance you put you blur it double the amount and the value that he usually uses in terms of the opacity of the shadow is 15 and I agree it looks really nice so I've been sticking to that rule myself whenever I do these things so it's got like this nice slight subtle shadow which I really like and I also changed it to white now notice that you can also just type in the color code the hex code if you know it so you can do that all right so what else do we have here we have some bold text 14 size and then we have these little boxes here and now these boxes let's hold down command so we can drill down I just want to notice the different 2412 I just want to notice these different font sizes and we've got this dotted line one which I'll show you how to do as well so let's go ahead and add some yeah we'll add some text here you're on a 10 day streak and we'll change that to sorry let's just double-check what we had okay and then this font was going to be green like that let's make this ten and ten and we're going to choose our four rectangle if you want to create a square just hold shift and drag you're gonna create a square like that I think these were a little bigger like that so we might actually end up making this box a little bigger depending on what we need alright so this this color let's just copy this color because we're gonna need it for these squares as well paste it in there let's give this guy a corner radius of ten and let's put some text inside of it so that's 7.5 and this is gonna be white so let's do FFF because that's gonna be white and then I think I believe it was 14 so let's just put that in there just drill in a little bit it's gonna make it a little easier actually 14 seems kind of small but I'm gonna hit T for another piece of text he's gonna put ours and see this this is actually behind the square if you wanted to rearrange elements you just click and drag so we'll drag it in front of this the square here oops so let's put that here let's change that to regular you can change this to 12 and change it to white as well so let's put it right there and let's make this guy a little bigger I think it was it might have been 18 okay so actually I'm gonna select these two and Center it and I'm gonna change it to text-align:center as well and then just line it up right in the middle there and then I'm going to duplicate this by pressing command D and drag it down here and change it to this color right here so in case you can't click it and you can't see it you can always select it from here and hitting this will make it visible or invisible this sort of eyeball here alright so let's change the font of this text we can actually see it and this would be like Jan 1st or something like that and now let's group this in a single group because we're going to be duplicating them so the 7.5 the Jan 1st the hours the rectangle command G to group it together into a date so let's call this a date and then we're gonna press command D and duplicate it and move it like that and let's press command D and it's actually going to be smart enough to put it beside it right I'd do it again press command you do it again right this last one I'm going to make it a dotted line because I don't think I can fit I can fit another one this is 9 whereas this is 10 that's close enough but it looks a little cramped so I don't press undo and I'm going to position all of these days instead in the middle of this box so it's 33 40 let's move it over like that ok so for this particular square the text I want the text to be green so I still have that green on my clipboard so I'm going to change that to green and I'm going to make this square white but I got to give it a green dotted line right so fill I told you was the color that it's filled with stroke is the border color so it doesn't have any stroke but I'm gonna add a stroke so there by default we get that it's black let's change it to the green and you can say that you want the stroke or the border to be on the inside or sitting on the outside of the shape so it's it's kind of hard to tell so maybe go in here you can see see the border as this blue line you can see that this green line is inside the shape because I've set the I've set it to inside this rectangle here set to inside if I change at the outside you can see that now the green border sits outside of the shape and then centered is straddling yeah it's right in the middle so sometimes that matters sometimes that doesn't matter but depending on you know how you position your shapes and stuff okay now we want to change it to a dotted line and this is the width of the line let me see if I can remember exactly where yeah there it is so we're gonna want dashes and so you specify basically how long you want the dash and then how long you want the gap so if you want like even-even dashes and even gaps you'll do four and four if you want maybe like gaps where it's half the width of the - then you'll do four and - so you can play around with that whatever kind of suits your fancy so we have something like that now so that's how you're gonna do that all right and then now there's one more interesting technique to use with these guys here that's masking which I'll show you and we'll do that a little thing and there's also a blue circle here which all it is is the same blue circle here but positioned a little differently so I'm gonna grab this ellipse hit command-d to duplicate it I'm gonna zoom out a little bit and then I'm going to kind of move it here maybe I can hit K to use my scale tool to scale it up a bit and then I can use the rotate to just rotate that over there right or I could just change the colors or anything like that you can also move your mouse cursor to a corner and you can also just do that that might be a little easier to do so there's that alright so now we're going to add these these guys right here alright so let's go ahead and add a rectangle so you know roughly the same width like that roughly the same height and we are going to give it a corner radius so it looks like that so how are we gonna get the image into this this rounded rectangle well you literally grab an image download it from somewhere and then drag it into your browser into here so where I got these images was pixels com so it's a site where you can kind of grab free free stock photography some of them might not be free to use actually yeah some of them say free to use some of them you need attribution so just double check it I'm not sure but I've prepared a couple here all right so I'm gonna go ahead and drag this image into the browser like that so you can see it's really big so I'm gonna zoom out you can see how big this image is I'm just going to scale it down a little bit hit K on my keyboard and scale it down like that zoom back in scale it down but you can see that it doesn't really fit within my rounded rectangle which is this here so what you do is you you use this technique called masking and it exists in all sorts of graphics software and it it's done a little bit differently in each one but in figma you highlight the two things you want and what you're essentially doing is you're saying you want a cut out of or or imagine this shape as a window or you you want to see this image through that rounded rectangle as a window okay so you select both of them and you hit mask and there you go just like that sometimes you play around with the position I kind of get this mixed up all the time because if you if you have the image underneath like if you have the rectangle on top and then you highlight both then you hit mask you get a different result so I usually I try one way if it doesn't work I just reorder these two layers and then I try it again and you get the get the order that I want okay and then I just overlay text on top so I had this this is gonna be white text and where did my text go so I'm gonna add another text element I think I lost it so let's write some text first let's highlight it change it to white I'm gonna make this left aligned instead and let's just double check what I used so here I use the mixed font actually so this top line was 36 and the bottom lines were 14 and you can actually use that this was bold and this was medium so I'm gonna copy this I'm just gonna paste it in here oh yeah copy the Styles I don't want to do that so I because I want to show you 20% off heal order and Sephora so I'm gonna highlight the top part here I'm gonna choose medium I'm gonna choose what was it was a 36 and this was actually bold 36 seemed a little big okay so this bottom part then you highlight that part and you can choose medium so you can kind of alter it as you can see it's kind of hard to read so let me just position it properly from 10 and 10 it's kind of hard to see right you can put a dimmed background I think I I have something slightly there yeah so you see I have this shape this vector that I created that's a sort of like a dimmed background so it fades from block to semi block this is semi-transparent and I'm going to do this same technique here so you can either draw your own vector so you can use the pen tool and you can draw your own shape or you can use a square or polygon even so let's let me just show you using a square here and then you're basically gonna mask it again so we'll use a square like that right and we'll rotate it so that it covers covers everything that we want it to cover and this is going to be let's say block and then again we are going to just put it inside there and then we'll put the text above it sorry like that all right so we've got this is the mask this is the rounded rectangle this is the image this is our sort of background for the text and this is the actual text and it's all inside this mask group so nothing you know it's it's looking through this window this rounded rectangle window nothing ever goes over that border so for this this background I'm going to change it from solid to linear okay so now change the direction of that will have the heaviest block on that side will have the gradient on this side so you can see right it makes the text a lot more legible and then with this mask group let's just change this to reward you're able to add a drop shadow on the whole thing so there's the drop shadow that's again configure it to 20 blur 10 distance and 15 opacity so you get that slight actually are we seeing it it looks a little bit invisible so you can click this button and you can actually see it it's just so slight it's hard to tell so what else have we got here so we've got two more same technique so I'm not going to repeat I'm not gonna do it but I'm just gonna duplicate this reward and drag it here so that we can actually finish off this design all right I want to show you this circle here so for an ellipse just choose lips or oh and then go ahead and click and drag holding shift so you get a perfect circle you do something like you make it a little bigger depending on what you want and I'm gonna hold down command and I'm gonna choose the frame so I can make sure that the margins is you know 20 from the bottom and 20 from the right and then I'm gonna choose a color like something like that and you can either see here's the thing you can either make the shape itself sorry this is the color so what I want to explain is that you can have an opacity to take color and that's changing the Alpha of the color or you can change the Alpha of the entire layer this is the Alpha of the layer alright and sometimes you just want to have a slightly transparent color and sometimes you want to have a slightly transparent layer it might not immediately be obvious what you need right now but a good example would be lets say this reward right here it's it's a group of items right so if I change if I highlight this group and I make it you know 50% transparent it's gonna make everything inside of that group 50% transparent it's gonna make you know the whole all of the items 50% transparent so that's the handy thing about modifying opacity at the layer level all right and I just realized that we should probably group these things some more so that it it's a little more organized so here are the days there's the streak box here are the days is this one part of it yeah so I've grouped this all up and call this the streak and this one was the stats okay so that's a little more organized so this is my these two are the background so I'm going to group that I'm going to call it the background and this one is my menu well this is the menu circle so let's let's build up the menu circle with a couple more elements and then we're going to group that together and call it the menu so I'm gonna make this semi-transparent let's say 80% and I'm going to put a put two two rectangles for the plus now here would be a chance I could use an ad icon I can simply drag it on but I couldn't find one that was exactly what I wanted and so I decided to just create two rectangles oops like that all right so this one's gonna be a little tricky so 48 48 15 15 oh that's perfect okay now I'm gonna duplicate this and then just change the angle to 90% like that and that gives me my plus and you see how these are two separate rectangles here in my layers list you can actually combine it into one object or one vector if you hold these two and you use this this button called Union now there are a couple different ones if you pull it down you can subtract one vector from the other so it's like taking one shape out of another you can combine the two like I want to do here to create a single vector which represents my plus symbol and you could do intersect and exclude so I'm going to choose Union and now I get my one vector which is consisting of these two rectangles so this is just I'm gonna call this the add icon and I'm going to group these two elements come ahead G into a menu button wow that's a really big menu button but luckily because I grouped it together I can just hit the group hit K and then I can just scale this guy down so that's basically it I hope that you learned some pretty interesting techniques in putting together this screen all right we ran out of time to do it in this video to put together a second screen but I do want to continue to do these sorts of design videos where I demonstrate different techniques with using figma or sketch let me know in the comments below if you'd like to see like a figma basics tutorial and I'll also let me know if you are an expert or a designer let me know if there's different things I can improve on maybe different techniques I didn't know or I could have done better different shortcut keys that I didn't use let me know because I want to learn and I'm not by any means an expert in figma all right I hope this was helpful to you so if you liked this video and you want to see more hit the thumbs up button on this video don't forget to support the channel by subscribing and hitting that Bell notification icon so you get emailed when the next video is published alright so thanks for watching I appreciate your time and I'll see you in the next lesson

Channel: CodeWithChris

Views: 169,791

Keywords: figma tutorial mobile design, figma tutorial, ui design, figma design, figma ui design, mobile design, figma design tool, ux design, figma tutorials for beginners, design tools 2019, design tools 2020, ui design tutorial, ui design tutorial for beginners, figma tutorial app design, figma tutorial 2019, figma

Id: R5KoTZY0esk

Length: 41min 20sec (2480 seconds)

Published: Tue Jan 14 2020