Learn UI Design for Mobile Apps like a PRO! - Figma Tutorial

hey there bachelor designers and creatives hope ur all doing well sittin here from design palette and I'm back again today with a very new super exciting tutorial because today I am going to blow your mind in this tutorial I'm going to teach you how to learn UI design for mobile apps like a pro and when I say pro I mean it I'm gonna do complete justice to that title it's gonna be insane so without any further ado let's get started [Music] alright guys so in this tutorial I'm not just gonna talk about fonts and colors and how to pick colors and how to pick the right fonts font sizes I'm not gonna show you something that's very basic I'm gonna show you something that you never thought ever existed it's going to be insane so when you are learning UI design you always have to learn from the real apps that you know kind of exist on your on your phone you need to understand how the apps they use on a day-to-day basis are designed and what makes them look so good and their primary four things that make a design really well the first one is the font second is color third is layout and the fourth is spacing so I'm gonna teach you guys everything that you need to know you know to get started alright so the first thing you want to do is you want to go to the Play Store and download this app called developer assistant now this app is a beast of an app because when I got to know about what this app can do it just blew my mind and when I show you what this app can do it's gonna blow your mind as well I never knew something like this existed now this app is free but it's free only for 30 days now after 30 days your license expires and you will have to buy another subscription if you want to continue using the app but I have good news for you guys I actually spoke to the developer of this app and he gave me 50 promo codes to give away and each promo code is worth a lifetime license for this app so all you have to do is like the video give it a share and mention in the comments that you want to enter the giveaway and after three weeks I'm going to go ahead and pick out the winners I'm gonna contact you and I'm gonna give you a free promo code which you can use and get a lifetime license for this app and if you haven't seen my previous video off the base of designing interfaces for mobile apps I highly recommend you check that out I explain so much about screen density screen resolution artboard size and so much more it's definitely something that you should definitely check out after you watch this video so with that being said let's jump into my phone and see what this app is all about all right so this is the app and I've open the app on my phone and basically you have to go ahead and set it up it's going to show you how you can install install it and set up everything it's very simple and to launch it all you have to is as you can see in the first image that you have to press the bottom center button and that's going to launch the screen so I'm going to show you how this works I'm going to open up two apps I'm going to open up Airbnb and medium and show you how this app works okay so here I'm in Airbnb and I've set up my profile and it's a simple obviously beautifully looking app that everybody knows about and we're gonna see how Airbnb has you know designed this app so all I'm gonna do is I'm gonna click I'm gonna tap and hold at the bottom and we're gonna get this kind of a cool layout over here alright and we've got some grid boxes we've got some something going on and let me explain what it's all about so I'm gonna go to the first tab I'm just gonna swipe and as you can see it gives a little bit of information about the app which we don't really bother about and I'm gonna come here to the element alright now the first thing I mentioned was about fonts and colors right so having a good font size and a good font weight and colors for your fonts to explain hierarchy and structure is quite important so let's see how Airbnb does it so all you have to do is tap on any text or any element and it's gonna go ahead and show you the properties so as you can see on the left it gives you the text color it tells you the text style which is both and also 24 pixels right so basically what I'm telling you is you can take up any app and re-engineer the entire design system which is so cool and you can apply the same design system when you are designing apps or if you want to learn the basics this is the best way to start so as you can see these are titles alright so they use 24 pixels for titles alright let's take another example let's click on this text or sorry so this is 14 pixels now this is not as per the material guidelines material guidelines go for 16 but 14 is a good decent number as well this is what Airbnb has chose let's click on this pillow here that is 13 pixels so basically you can see a level of hierarchy this is the primary text which needs high emphasis this is the secondary text and then we have the tertiary text now we also have a search text so let's see what that is so that is 16 pixels of their view 16 pixels only for the search text which is pretty cool and it also gives you the color that they're using so seven six seven six seven six in this case this is not a pure black color and neither is this alright so let me close this and let's go down a little bit more and check out something else alright let's take a look at this part I'm going to open up developer assistant again I want to tap on this so as you can see it's 24 pixels again now this is actually their secondary text again this would be H 2 and this is 17 pixels all right this is not 16 this is 17 so we've got 24 that's 1 we've got 17 which is another one and here is other the other one which are these small titles which is 14 pixels 14 pixels and this one is 10 pixels alright so basically the over line text which is as per the material guidelines is 10 pixels which is good it also gives you the text color which is awesome so basically you can go ahead and re-engineer every single textile color and basically any part of the design system which is really amazing now let's move this a bit up alright and let's take a look at the navigation bar so basically we've got an icon and a text I'm gonna click on the text and you can see it says that the text is 10 pixels and it's a bold and it has a color of for 8 for 8 for 8 let's look at the one which is Explorer which is the enabled one that's a red color and 10 pixels and both so basically you can go ahead and you know just copy the exact same settings and design it for your app and it's gonna look fantastic alright now let's go into something more advanced alright so I'm gonna go ahead and just open this up and I'm gonna go to the next tab which is hierarchy you know this is basically how the components are built which is something that you need not know about as a designer but we can just keep that so the thing which I'm really interested about is layout alright so this is where things get really interesting alright so let me go ahead and show you guys an example over here alright so we got our let's open this up so we've got some text and it got some boxes at the bottom right so stays experiences and adventures now if I want to see the distance between elements how do I do that it's quite simple so I can click on any one element alright and I can once I click on any element I can click on this arrow icon that you can see in the center I'm just gonna tap over there and then I can go and select another element which is this text so basically you can see that it kind of mentions that the distance is 48 pixels between the element between the two elements that I selected now if you look at all the spacings that we see the distance is usually a multiple of eight it's either 2 4 8 16 24 32 48 so multiples of 8 which is basically the 8 grid rule or eight-point grid rule is one of the most common trends when designing interfaces and it's quite recommended that you use that it's actually to check that so for example if I click on this element alright and I click on the arrow and I could click on the outside container you can see that in the bottom over here it it says that the distance is 24 pixels no material guidelines recommend 16 pixels spacing on the boat and left and the right but air B&B has opted 24 pixels now medium which is the other app I'm going to show you uses 16 pixels I'm going to show you that in a bit but as you can see here the left and right padding is 24 pixels we can actually check that here as well let me open this up again we can tap we can click on the arrow icon and click over here and you can see on the right side and the left side is 24 pixels and 24 pixels so basically everything is aligned after 24 pixel margin so that's pretty good alright let's take a look at an example over here okay so let me just scroll this up a bit alright open this up so we've got some text over here and at the bottom we've got another text alright and let's see the distance between this element and this text so as you can see it is 24 pixels which is also again in multiple of 8 which is fantastic alright let's take a look at the distance between this element and this element you can see it's 12 now I'm not saying that you can't use any other number but 12 is also a good and a decent number to create space between two elements you could use 14 you could use 16 you could use 20 but 12 is also a decent number it's not that you have to follow the guidelines all the time but if it works for your app then you can go ahead and change it a bit all right so let's take a look at this button alright let's take a look at buttons so I'm gonna open this up again and over tap on this button so you can see that the button height is 52 now the width which is actually 363 is actually going to depend upon the size of your phone so if the phone is wider is be bigger if the phone is thinner or less wider it's gonna be different so the thing you want to keep note on is the size of the button now 52 here is what they have used you could use 56 you could use 48 or 32 whatever folks for you and let's actually check the distance between this button and here so you can see is 48 again so basically they are creating 48 pixel spacing between two different sets of it contents all right now the last thing on talk about is icon so if I open up developer assistant and I move this to the top right to the top and let's click on this icon you can see that the size of the icon is 24 by 34 now actually it's actually 24 by 24 not 24 by 24 but the reason it's showing 34 is because the the app is showing an extra 10 pixels from the top of the navbar and the navbar in this case is actually 56 pixels tall which is asked for the guidelines which is fantastic so if you tap on any icon you can see that it says it's 24 by 24 pixels here is also 24 each icon is 24 by 24 pixels and I have to click on this one you have just 24 by 34 pixels so basically you wanna make sure that each icon is 24 by 24 pixels which is fantastic alright so let's move into the next tab which is medium and let's see how they have built it alright so here I'm in medium and let's take a look so I'm gonna open up developer sister I can move this to the bottom this time and let's take a look at the first one so this text you can see has a font size of 20 so a B&B used 24 but medium uses 20 the other texts are 15 instead of 16 or 14 here are the search text is 17 the other text is 15 so these guys have used different numbers if you look at this is 11 which is quite weird but that's okay maybe it works for them maybe it doesn't work for them so you can pick up any app and use the same ones that they have used now let's see the padding on the left and the right side so I'm gonna click on this text alright let's go to guru layout and as you can see here at the bottom it says 16 pixels padding on the left and if I click on this icon you can see 16 pixels padding on the right so basically it will be used 24 but medium use 16 which is great alright let's go down over here I see what else we have let's take a look at these icons alright let me scroll a bit up let's take a look at these icons so here you can see that these are in a 32 by 32 pixel icon not 24 by 24 which is completely fine but if you if you actually look at it the container is actually 32 by 32 but the icon is actually 24 by 24 that now the icon is not being shown over here but the container is actually 34 by 34 and the icon is 24 that's something you want to you know take a note about all right let's take a look at something else got another icon over here now as you can see this is 24 by 24 so I was kind of right we've got these kind of thumbnails which are 53 by 53 pixels which is which is fine all right and here we've got another set of list items so each list item depends on the size of the content so here we have some text which is basically the over line and then we've got another text if you look at the font sizes so this is 13 17 let's click on tap on this this is 14 all right and when it comes to the name of the author it reduces down to 13 and 13 again so this pretty cool and you could actually see how you know real apps like these are built so now once we have an understanding of this let's get into figma or whichever designed to lis prefer and actually design this using these insights that we obtained so gone ahead and taken a couple of screenshots as you can see there are quite a lot of screenshots and I'm gonna explain the best workflow and the way to design the app all right so what I did is I went ahead and took a screenshot of the whole um Airbnb app we're going to redesign the Airbnb app okay and explain a couple of interesting concepts now when you screenshot it it's gonna be quite huge it's going to be the size of your phone which is gonna be the screen resolution of the phone for me it was actually if I take this and multiply this by three all right this is how huge the screen shot is going to be when you import it into design in your design - like figma or a sketch or Adobe XD and what you want to do is make sure that you reduce it to the appropriate size in case you want to you know kind of learn from it now if you've seen my previous video I mentioned that you have to bring it down to a size of 340 by C by 640 by 360 which is kind of let me just create an artboard to show you guys all right if I go here you can see 6 forty by 360 this is the artboard in which you will have to start designing on but when you take a screenshot you shouldn't reduce it to 640 by 360 directly you you have to check that with your phone all right so the best way to do that is if you open up any of the mobile apps and let me find a proper screenshot that shows me the exact information that I need all right so let's say I chose this screenshot and here this whole section all right is actually 411 all right it's not 360 all right the width is 411 and it's not 360 now this depends on your phone so you just want to make sure that if you are actually taking a screenshot to refer you want to make sure that you you reduce it to the proper size so that's why if I go and select a frame or an artboard in this case you can see that the you would have to use these two presets over here you have to reduce it to 411 but you can still design it on 640 by 360 and I'll explain how and why alright so with that out of the way let's actually you know delete this and let's actually get into some design work right so this is going to be 411 all right and I'm gonna move this over to the side and I'm gonna bring this over here and actually we can actually take these two and come here put at the bottom because these are quite close to the ones that I took all right so the first thing you do is get the download the resources from material design so this is their material design UI kit this is something that you should use I highly recommend you use it because it's important you can come down you can get the baseline design kit for figma you've got one for ducting as well and also for sketch now for Adobe XD I will leave a link in the description but mathilde is not design does not give it there is another place where you can get the UI kit from or the other thing you could do is you could take the design kit from sketch and import that into Adobe XD ok so the first thing I want to do is get the system bar you always want to put this on top and let's actually call this just air B&B all right so I'm gonna go to the material uikit and I'm going to go into the assets all right and I'm going to search for system all right now this we're gonna get these system bars I'm just gonna I'm gonna select that and that's gonna go and show it where it is which is over here all right I'm just gonna copy that I'm gonna come over here and I'm going to paste it okay perfect and now I'm just gonna go ahead and move this to the top or you can click over here to move it to the top which is totally fine now obviously they change the color so we can go ahead and actually since this is a component I'll explain what a component is since this is a component we will have to make a copy and we can delete this and this we can right click and choose detach instance and they know just ungroup and then you know group them together all right so yeah and now you can go ahead and change the color of this so you can so if you want to select so now this is in a group if you want to select any element inside a group you can hold down ctrl or command on your keyboard and then if you click the element it's automatically going to select the element that you clicked all right and I'm gonna go ahead and change this to white or you can press I on the keyboard to get the eyedropper tool and you can just pick the color and that should be pretty good all right so the first you gonna do is you want to get this search bar all right so we do have a search bar in the material design system as well so as you can see we have a search bar which is a I'm not quite sure why it's not navigating to it all right so if you press shift and 2 it's going to go and zoom into the element that you have selected so I'm gonna go ahead and I'm going to duplicate this right over here all right and I'm gonna control X and I'm gonna come back over here I'm gonna press we to control paste it alright so they go all right now as you can see this is totally taking up the width of the entire frame which is which is not something that we don't want we want it to be like this all right so the first thing I wanna do is as per the material guidelines if I show you guys the guidelines over here everything has a 16 pixel mark padding on the left and the right so if I select this element and I hold alt or option and if I hover somewhere else gonna show me the distance between the element that I've selected and the element of Howard on so in this case it is 16 so 16 has to be on the left and 16 has to be on the right but Airbnb does it a little bit differently they use 24 so how do I know that there's one we can check it if you press ctrl R so if you press shift R on your keyboard you can get rulers you can actually take that ruler and you can move it up to exactly you know where this card starts all right somewhere over here and now if you hold down alt or option and if I come down over here you can see that it is 24 pixels all right now you could definitely see that over here as well I'm not sure if I if I took the screenshot right but you can see that there is one box this box becomes 8 16 and then we have you know 24 all right so that's why we want to do so what I want to do is I'm going to go ahead and move this 24 pixels to the right so I can just move it and I can hold alt or option and you can see it's 26 I'm just gonna make that 24 all right and there we go now we have some issue we have this which is coming out so we need 24 pixels on the right as well so he's going to go ahead and shrink this but if you see if you shrink it it kind of makes everything look weird so one thing we can do is we can go ahead and ungroup everything all right and we can delete all this unnecessary things that we have we can select this we can group these together and we can go ahead and group these together and let's quickly change the color of this so we can see a little bit more of what's happening all right something like so and then I'm going to go select this and move this inside right we'll just inside as well all right and the thing to note is that these actually are not inside the airbnb frame so I'm gonna press control X and a press control V to paste it all right and this should be fine all right so let's make this make sure that the distance is 24 so hold alt or option and you can see 26 all right so let's just add in with off two more pixels and that should be 24 which is totally fine okay now there is some rounding to it so I guess this is 4 so I'm going to give the rounding of 4 which seems fine which is perfect then we wanted all right now we also have an icon inside and we have some text so I'm gonna go ahead and delete this and I'm gonna go ahead and delete this because we want only the icon let's go ahead and quickly add some shadows I'm gonna go change the color of this to white and I'm gonna go and choose effects and here we have a shadow now the shadow seems to be quite small so I'm gonna say probably why is gonna be one and the blur is gonna be three I guess I think I think that that should look pretty good and we can also change the opacity from 25 to let's say 16 or or I think 20/20 should be good enough all right and we have a nice little search bar over here I think I'm gonna go and set the Y to 0 all right or let's actually keep it 2 2 & 4 all right I think that should be okay or maybe 1 & 4 yeah I think I like this one better okay there we go so now let's take a look at what we have height of the search bar is actually 46 but as per the guidelines this is actually 48 so we can go ahead and leave it at 48 it should not be a big issue Airbnb has decided to make it 46 so that's totally fine so just go ahead and click on this and press 5 on my keyboard so that's gonna reduce the opacity to 50% so now that I know that I don't have to look at that anymore and also you can see we have an icon over here which is 40 by 40 pixels all right and you can see where here the icon is 40 by 40 pixels you can see over here now you can see that the container actually is 40 pixels but the icon is actually not so huge so what I'm gonna do is I'm going to go and get the search icon we can use this one you can use this one over here so I can select that press shift to alright and you can see that it's in a 24 by 24 pixel box so I'm just gonna go ahead and duplicate that all right I'm gonna cut and I'm going to go ahead and paste it right over here and we can change the color soon but we're gonna go ahead and just leave it like so now how do we decide the distance between this show you that in one of the guidelines so if I come to the search bar and if I hold control and I click on an element you can see that there is an automatic spacing of 12 pixels and we can actually go ahead and implement that all right so I'm going to go ahead and this is already a 12 pixels and that is completely fine all right this looks amazing now the search icon isn't the one that we have but it should be okay so the next one is the text try seal so what I'm going to do is I want to actually go change the font to something similar so I'm going to choose circular alright that looks like a similar font and I'm going to go and just type in the same text which is try s e o ul and then okay and this is good now let's take a look at the font size so here it says try room and the font size is 16 and we have this color of seven six seven six seven six now the seventh color this color could also come from setting it to black and reducing the opacity now we don't know if they did that but we can actually you know try both the methods so I'm gonna come over here and I'm gonna click on this and if if you see something like this that's kind of extending you can actually double click on the edges and it's going to fit that to the actual size of the text all right so I'm going to go ahead and set this to two black and probably we can reduce the opacity of this to like sixty percent which should be fine maybe 50 percent or we can actually put in the exact number right so 16 was the font size which was as per the Google material guidelines which is fantastic and we have something called as the line height all right now it's hard to explain what the line height does over here but when we go to the when we go and add paragraphs sometime for this I'll explain what line height does alright so for now what we can do is we can actually set this to auto all right you can see that it kind of reduces the size so before it was like this and now it is like this alright and we can move this a bit up so that it feels that it is in the center so around 14 pixels top and bottom should be good enough and this is looking pretty good now the other thing we want to do is here we want to reduce it from 16 to maybe 14 or 12 I think this this looks pretty good and pretty decent all right okay now here is where you want to create your design system our design system is a collection of bonds and colors that are specifically made for your app so first thing we'll do is I'm going to go ahead and click on the text alright I'm gonna pick all those four icons and I'm gonna click on this plus and I'm going to create a new text style alright and I want to call this and give it a name let's say let's say search 16px alright click on create character style so now what's gonna happen is it going to create this character style for me and I don't have to go ahead and change the settings all the time I can just create another text and I can apply the same character style I'll explain that when we start designing more of the app the next one is the color so I'm going to go ahead and click on this plus sorry not click on the plus I'm gonna click on this four dots and then click on plus and I'm going to call this black 50 and create character style now if you just click away you can actually see all your Styles that you have created now for this icon we have this character style but I'm gonna click over here and then I'm going to choose this and then it's gonna apply this black 50 to it so now this looks perfect so I'm gonna select this and press ctrl G on a keyboard to group it and I'm going to move this up so how much do we move it up we can actually check that alright so let's go ahead and check it over here so it is I think one two three boxes down 8 x 3 is 24 so we can move this 24 pixels below this alright and that's pretty fine now we do have a small issue here it is 24 here at 16 so I'm just going to go ahead and if you hold down shift you can move by increments of 10 so I'm going to move this by 10 pixels move this back and then I'm gonna hold down control and click to select only this rectangle and I'm gonna move this inside so until it is 24 all right now another thing you can do to quickly improve your workflow or work faster if you hold on control you can actually press the left and the right arrow keys and that's going to go and change the size automatically for you that's a pretty cool trick so I'm gonna go ahead and set this to 24 so it's 24 over here and 24 over here and this looks perfect okay so next go ahead and create these pills now one thing I'm to talk about is these numbers these numbers like 24 48 and 24 all these numbers are multiples of 8 so that is using the 8 point grid system so anything that you do should be in multiples of 8 most of the time it's totally fine if you don't choose a number which is a multiple of 8 it is totally okay but the general and the industry practice is to use multiple of 8 so anytime you're gonna place anything it's always going to be a number which is multiple of 8 so let's go ahead and grab these pills so I don't remember what the name of the term is but I think these are called pills yeah it's called a chips that's the correct term but these chips don't quite seem to be the same size but anyway let's let's make a copy of this and we can paste it over here and alright and we can actually just ungroup them and you know just group them once again all right now these are quite different so let's take a look at the properties for this this is actually 42 pixels tall all right and if you come down over here you can see it's 42 pixels tall all right and also the distance between the pill is only one block so the distance is 8 pixels all right that's something you want to take a look at and also the distance from top to bottom it says 10 pixels but I feel it's more than just 10 pixels we can actually verify that because it's not taking it right exactly from the search bar it's taking it after the shadow has fallen so we are losing some amount of pixels over here but we can quickly verify that but the first thing gonna do is make sure that this is 42 pixels all right so I'm gonna come over here and oh we're gonna take this put it over here and I'm not sure what the color is but I think we can go head and give it a color of her own so I'm gonna go ungrouped so make sure that we have only this selector I'm gonna get rid of the frill I'm gonna add an a stroke and I'll set the stroke to one right and here it looks like the stroke is not when it's less than one so I think we can make this 0.5 and then we can go and set the color of this to that 50% all right now maybe that is too strong so we can go ahead and change that manually this time from 50 to let's say 20 all right and the height should be 42 we can make that 42 and also we need more rounding so let's just give it a big number of 100 and that should be okay and we have this text that says we have dates and guests so we can go ahead and type in dates okay and you can just double click on the corner so to make sure that the bounding box for the text is exactly the way it is all right and here the chip size as per the guidelines is 14 let's see what it is for the looks like I didn't take a screenshot so one thing we can do is we can actually copy this and we can put it over here and paste it and then want to do is I'm gonna this looks like it's a complete black so I'm going to make this complete black and change the font to circular this is the phone that I'm using you can use any font you want and I'm gonna bring it down like so now I think 14 if I make the 16 I think it's going to be a bit bigger all right or I think 16 also works pretty well so we can actually delete that and here we can make this 16 so instead of using 16 I can use the textile that we created saying search alright so I'm just gonna click on this and it's gonna apply that alright and also the color we can actually add in a new color swatch and [Music] let's actually go and change this to 100% black and then click here and then click on the plus and then set this to black all right that is pretty good now obviously since we used search for this and since this is also search we want to give it an appropriate name so instead of search I'm just gonna call this h4 all right and there's gonna be 16 pixels and I'm just gonna hit you know go back and now that looks pretty bad alright and then I'm gonna go ahead and Center this so I can select these so you can select these two and then click here and that is going to Center it maybe I can move this one pixel up alright so that is optically aligned and press ctrl-g to group them and that should be pretty good now I'm gonna move this over to the right side obviously we want 24 but what is the distance between these two we can actually check that so I'm gonna make a copy by holding on alt or option on my keyboard and dragging it out and we can just slowly move this up and we can kind of vary if I'm gonna make a copy over here as well so it's around 6 16 pixels so I'm going to delete these two and obviously we want them to be multiples of 8 I'm gonna select this and move this up until it is 16 pixels now I'm gonna make a copy by holding down alt or option and then dragging it outside all right and this also needs to be 8 pixels actually all right because what we saw over here was that the distance is just one grid and that is 8 pixels alright so we're gonna change this from dates to guests alright so gue STS perfect alright so there's one more thing I will explain and I'm gonna do that through the uber app so I've taken the uber examples I'm gonna copy that alright and I'm gonna come down here and I'm gonna paste that over here ok we want this to be again 411 because that is the exact size that we want ok I think even for uber I did check the size so as you can see over here it is 411 and it is 56 pixels tall now the material design guidelines has a navigation bar so if I search for navigation all right we should be able to find the navigation bar top navigation or you know let's actually go to the components and it should be over here oh they call it the app bar alright doesn't matter whatever it is and I'm gonna go ahead and then just select this app bar make a copy of this and then control X come on here alright and I will go ahead and then paste it over here right so let's go ahead and actually create in new artwork we could actually do you can duplicate this artboard should not be an issue okay and we can delete these two elements and I don't take this navbar oh sorry this when go ahead ungroup everything and then I'm going to go and group them okay and I'm going to bring this inside there we go now obviously we're going to name this uber app alright and we're gonna change the color of this to black because it is black and also this we will change this also to black alright now we can't see anything so I'm gonna change the color of that later so we want to take this and move this to the top so basically what I'm trying to say is you want to use components and here you can see that the height is 56 and uber also has conveniently used 56 pixels tall but if you see some other apps there might be chances that it is in 56 it could be 48 also Instagram for example does not use 56 it is usually 48 but in this case Eber has conveniently used 56 so the only thing you want to do is you can actually select the elements and we can delete those all right we can delete those and we can delete that it's like this we can delete that and here this is going to be what exactly choose a ride so I'm gonna type in choose a ride alright and I'm gonna double click on this so that it fits the screen and then click here to Center it and change the color of this to white and there's gonna be black alright so this we want to set this to 100% so it's completely white alright so all you have to do is put the icon and I think I can show you the icon settings as well I think I took a screenshot of that as well and also another thing over here is the text size over here was 18 'über used 18 but as per the guidelines Google has said 20 all right so what we can do is we can reduce that down to 80 now you obviously you can keep it 20 because it's a sport the guidelines it shouldn't be a problem but let's just follow and see what uber did alright and looking pretty good alright that's looking pretty good alright so this we can reduce that down to five and over here you can see that the icon is 24 pixels by 24 pixels and also you can see that this line where actually the text economy starts is actually two blocks away so it starts at 16 pixels so as you can see in this case uber has used 16 pixels now let's go back over here so the next one is this text all right so let's actually go ahead and type in this text is what can we help you find all right comma chapin question mark okay now this is a pretty cool interesting a feature in figma and also in other tools as well is for example this actually customize this first of all let's go and search for that text screenshot which I took which is over here okay so the color is for 8 for 8 for 8 and it is 24 pixels big ok so I'm gonna come over here I'm going to change the color to for 8 for 8 for 8 all right and I'm gonna go and add in a color style and we'll call this gray okay so we have that color style and also this is going to be circular alright this seems to be bold all right and I'm gonna say this 224 all right that's pretty good I'm gonna go ahead and click here and create a textile I'm going to call this h1 because this is the first title which is higher in hierarchy and I will call this 24px there we go now we want to make sure that we want to make move this to the right so it's 24 pixels from the left alright and now here's the fun thing now this is in two lines now one way you could do it is by clicking here and pressing enter but that's actually not the right way to do it or you can do is you can actually just drag this and make sure that this is also 24 pixels from the side and that's automatically going to move this to the next slide okay now here comes the interesting part which is the line height all right so if I make a copy of this I bring it over here all right now you can see that the this the word cheatin on the design starts a little bit later so what we can do is to make sure that it's perfect actually open this up and here in the line height I can give it a number of let's say thirty now thirty doesn't know much so I can go ahead and manually increase this and now something like 34 is kind of the right number now the general practice is to actually not type in a number like this you can but I usually use a percentage based increment which is ranging from 120 to 150 so if I go ahead and set this to 150 percent you can see that it becomes 24 times 150 which is around 36 but one more thing you can do we can set this to 140 percent and that looks pretty good so we can leave it at 140 another thing you wanna do is you wanna go ahead and you want to make sure that you change this correctly so now this now the one we decided here was 24 I'm just going to move this up you know I'm gonna set this to 140 percent so now it looks perfectly fine alright now what is the distance between this and this we can actually check that over here I'm going to so I don't think I'd take took a screen shot but it should be okay alright anyway I'm gonna come over here and let's actually measure this so I'm just going to create a rectangle so to act like this is the bottom alright and here you can see that it is around 51 so maybe I think they were going for a number of 48 so I'm gonna select this and I'm gonna go 24 I'm gonna move this down 34 and 44 and one two three four make it 48 now the reason it says 51 over there is probably because my font is actually little different I'm not using the same font so because sometimes when you use the font things go wrong but basically you want to make sure that they are in multiples of eight so we have 48 all right that is pretty good so the next we can do is we can actually go ahead and do these cards okay so let's see the properties of the card which is over here all right so the width seems to be 158 all right which is it actually divisible by 8 so maybe I think they were going for 160 and as you can see actually it should be 160 because here is 158 and they've added a 2 pixel margin so I think it's supposed to be 160 so we can stick with 160 and also they've said 100 106 which I think should be 100 and 408 but we can you know stick it to 106 because it's just the height of the image it should not be an issue so what I'm gonna do is instead of setting it to 106 height I'm actually going to go and choose this one which is 154 all right now 154 also isn't visible by it but we can stick to 154 it should be totally fine or we can go for 152 which is also divisible by 8 but in this case let's just stick to 160 by 154 all right cool so what we can do is we can come down over here right and I'm going to create a rectangle so by press R on your keyboard and you can create a rectangle and I'm gonna call this one 60 by 154 all right there we go now let's give it some rounding I think they use a rounding of 8 which is fine and I'm gonna move this to these sides so that it is 24 pixels from the left okay so I'm gonna duplicate this alright this is over here I think this should be 24 pixels if I'm not wrong yeah so 24 it should be 24 it says 25 but it should be 24 all right so I make this n make it 24 okay so I'm gonna make this a white color and I'm gonna add in the shadow that's there so I'm going to add an if sorry you not a fill I'm gonna add an effects in the drop shadow I'm gonna say 4 and I'm gonna set the blur to 8 and the shadow I'm gonna set that to probably 12 this is a number that you can totally decide on okay now let's get another image so instead of the image you can actually drag and drop the image or what I'm gonna do is I'm going to use unsplash so I'm going to take press R my keyboard and I'm going to create a rectangle first all right let's actually change the color because I'm not able to see anything all right make sure that it is exactly the same all right this was it was 156 right if I'm not wrong if I'm not wrong height is 156 oh sorry one six oh no it wasn't it was something different it was 106 okay so I make this six okay there you go now we want to round off the corners here as well so here's a cool trick if you click on this button it's going to split that into individual points so the first one is top left said that two eight the second one is top right said that to eight so this is going to be at the bottom which is going to be eight but here we don't want it so I'm going to set that back to zero okay then you can right click and go to plugins and we can choose I've installed a plug-in so if you wanna install the plugins you can actually go to the plugins section over here and install whichever plug-in you want I'm gonna choose the one by unsplash so right click plugins and choose unsplash alright okay and we want what we want we wanted some hotel we've got some cooking and you've got some adventure okay so I'm just gonna search or interior all right into your sounds good okay I'm gonna click on this and I'm clicking on this image and that gets applied over there okay that looks pretty good and I'll go ahead and change this color to white again so we can see what's going on and there we go now we have some text I did put up this text over here so over here it's 14 let's create a new text layer alright and call this space alright and this is should be this should be like medium I guess or even book should be fine and this is gonna be 14 pixels we set this to black and there is the opacity of this to 60 okay and let's go ahead and add in the colors over here so this is going to be or you know what let's actually make this a different color let's actually set that to four eight four eight four eight and we're gonna set this to 100% and this is gonna be a new color and this is gonna be great to whatever name you want to give it okay so here I think this is around 16 pixels from the side so I'm gonna move this over here and 14 15 16 that's fine right and we're gonna make sure that it looks totally fine good okay we can make this medium if we want right and let's create a new character style all right now this is h4 so we can do is we can add one and you can call this H for this is going to be 14 pixels all right and this one which we created before the 16 we can change that to h3 now all you do is we can select this press ctrl G and we can hold alt or option and then drag and make a copy so everyone so we want it to be 12 pixels so 12 pixels to the right we can alright and that should be fine now you might ask why is it that I'm able to see more things over here and less things that's because this is actually 411 so if I go ahead and make this to 411 we get that extra space over there all right so that's pretty much it nothing to worry and then go ahead and then you can call this experiences all right and then just double click so that it becomes proper okay now instead of doing this with one thing we could do is we can actually delete this okay and we can right click this and can choose create a component alright now what happens is when you create a component you can see that this becomes a master component alright and master component basically means any changes you make to this effect and instance of it so for example I'm going to take this master component move it down mode move it up like so and I'm going to duplicate that and bring down now you can see that there we have an instance now this instance has a different symbol which means it's only a single diamond but here it has four extra diamonds so this is the master and this is the instance okay I'm just going to go ahead and bring that down to 48 pixels as we initially made all right and I'm gonna go ahead and duplicate this and twelve so I'm gonna go double click on this and call this variants this okay okay now the problem is that I'm not able to scale this quite much because I need to scale it in the master all right now let's now now let me show you what happens when I change the master all right so if I click over here and I change this you can see that it's affecting that one as well alright so gonna make sure that this is quite big alright and we can take the muster and we can move that back on top alright and if I go ahead and change the size of this you know it basically affects everything you know that we made so you don't have to make changes multiple times I'm gonna go ahead and just click on this and go to plugins and then choose run last plug-in and we can search for cooking because we see people cooking over there here in the experiences and I'm just gonna go click on this and it should apply that and it should be pretty much it alright so the same way you go ahead and you make everything over here well you have our and it should be pretty much quite easy so that's pretty much it for this full fledged tutorial guys thank you so much for watching hope you guys really enjoyed it if you did let me know in the comment sections down below it's really but I can subscribe to the channel for more amazing awesome content and see you guys my next videos until then take care and bye bye [Music] you [Music]

Channel: Design Pilot

Views: 33,767

Keywords: ui design, ui design tutorial for beginners, ui design tutorial, basics of ui design, figma ui design, figma tutorial, ui design principles, ui design adobe xd, ui ux design, ui ux design tutorials, ui ux portfolio, ui design android, figma iphone, figma prototyping, figma ui kit, figma ios, web design, basics of ui ux design, ui design tutorial figma, ui design mobile app, ui responsive design, responsive ui design tutorial, responsive ui design in android

Id: SnzXf91b8C4

Length: 47min 49sec (2869 seconds)

Published: Sun Nov 24 2019