Figma Mobile App Design Tutorial

hi welcome to my China building amazing times in this video I'm going to show you how to design this wonderful mobile UI so keep watching so I'm going to show you how to design this mobile app this is a modern type of design for mobile apps and one interesting part of this video is that I'm going to be walking you down the tips I use in designing great designs like this so the first thing I need to do is to draw inspirations for my design so where do I get my inspiration from I get it from the internet there are several communities on the internet where you can draw inspirations for design one of them is being hems I go to be homes you just have to type wwm store net on your browser then you can search for mobile designs you can see tons of designs of different types of mobile apps you can look at what people are doing ambiance and try to do something like that or even try to do something better than that another community is dribbles I like dribbles because of the interface it's white it allows me to see the different designs people are doing so you can also look at dribbles and look at what people are doing on dribbles and try to do something better or similar to that another interesting community is Pinterest I look at Pinterest also I try to see what people are also doing on Pinterest so this is a great tool for designing so once you draw inspirations from this you can go ahead and start designing so the next thing I will do is I decided canned of two I want to use for my design I use Sigma Sigma is a great tool and it is free it is a desktop application and a web application so you control it can go up on the web browser you can run on the desktop app so it is free I won't take the creators of Sigma for providing this wonderful tool so what I do is on figma I create lots and tons of project and this project I prototype this project for my clients and people who I do designs for so to use figma it's very is a go-to figment on register and OPL figma now you can see tones of design which i've done i've already done this design and i'm going to replicate this design step by step show you how I achieved this design so the first thing I need to do is a needle click on this plus icon here at the top it says new file so when I click on it it opens a new project for me to work on on figma now we have our figma file open the first thing I would like to do is to get this file a name so I'll say Big Mama by design good so a quick look into figma these are the different tools you can use to work with this is the move tool and it has the skill to we have the frame for different sizes may be desktop let's say iPhone and the rest of that then we have different shapes you can walk with where the rectangle I arrow at clicks polygons tab and images then we also have the paint tool and the pencil tool we have the text to write text in our designs we had the antutu move around our design there were other comments to to make comments when working as a team so now the next thing I will do is to decide what kind of screen size am I using so I'll click on the frame two and click on frame and you can see the different screen size to use this phone establish as desktop you can also design for watch paper and social media so I'm selecting for and I'm selecting iPhone 11 Pro X so now with my frame the next thing I want to do is the first part of the design and this design is a splash screen the splash screen just tells what the app is all about so I'm going to rename this frame to be splash screen so after I renaming this to the splash screen the next thing I want to do is to add the notifications to my design now for the notification I need some icons like the Wi-Fi icon the battery icon time and the rest of that so you can actually design this icon using figma maybe I'll do another tutorial for you to show you how to design those icons but now to get these icons out of the box there's a great - on the internet you can use to get to icon 1 grade 2 is for awesome for awesome is a library we can get icons out of the box simply search for what icon you are looking for click on the icon and click on download make sure you download this as SVG format so I'll go back to my figma and instead of downloading this from figma from phones also I'm breaking in to figma I will use figma plugin and this is a great tip I'm bringing out to you use figma plugins and you get those icons out of the box without going to the front awesome websites to download those icons so to install this plugin what you need to do is to click on the tab here and go to plugins then click on manage plugins before you go to my net plugin you can see there are tons of plugins which i've already installed so one of them is the photo also I compared amo I'm also going to show you how to create this I got to install these icons so click on manage plugins and once you open manage plugins you can see the plugins you have already installed in figma so I'm going to install a new plugin so I'll go to plugins but it left's rights the left side and click on browse or plugins so I can such the plug-in I want to install for example front awesome and this is 4th also I can click on install I've already installed this so if I click on it amongst uninstalling it so I'm not doing that right now so I'll close this and go back to my figma design now on to use those icon doze plugins you just simply need to right-click and go to gains and select the plug-in you want to use or you can click on this my new year and go to plugins and select the plugins you want to use so what I would do now is to right-click and go to plugins and select font also by this way this tab will come out because I've already installed the fourth awesome plugin so this brings out all the plugins in front and so on website without going to front also and to download the icon so what I will know such now I'm going to search for signal I need a signal icon and that is it I'll go back to plugins font awesome I also need the Wi-Fi side I will add it so I have the Wi-Fi and the signal I also need a battery I go to plugins and I'll look for font also then I was such battery and I'm using this battery so I have this signal are the Wi-Fi at the battery so I'm going to bring in this to this plush to this plush I'm going to bring each of them I'm going to bring each of these to this plush frame so I brought this into this plus room drag this to into this plush and I also drag this to into this patch so at this signal the Wi-Fi and the battery in this plush so I can click on this signal and drag it down over here and click on the Wi-Fi and also drag it over here so Wi-Fi then the last one is the battery click on the battery and drag it over a year now what other great tools which I want to show you is using the layout crate the layout grid helps you to align these contacts on your screen perfectly well without having some disparities between different components so click on this flash spring then I'll go to layout grid I'll click on they are great now I can click on this box here that looks like this and select the type of layout grid I want actually want colors and I want those columns to the six in numbers and I want this margin of 25% stew now I have this the next thing I want to do is to arrange these icons very well so to prepare arrange this very well I need to see how it looks in my iphone so to do that I'll just click on the present to you in to open a new interface for me yeah I will see how it looks like on an iPhone so you can look at the notification and the notifications and looking bad so I'm going to fix that so I would drag this I'm zooming in using my ctrl + Mouse crow then I'll drag this to this point and also drag this this width and this so let's take a look still looking very big so I will select the three of them and I'll use my schedule schedule helps you to reduce without distorting the shape of the icon so I'll look at it again thank it still looks Luc's OK'd is just the alignment is tomorrow and so I'll take it up and fix that you so I think I have something that is okay now so let me remove this line grid layout added so just click on the I icon here and it goes off so this is it I think this is okay if you look at it from the informed view it's it's nice so next in our added time here so I'll click on the text tool and select this to be 14 and make it bold Pompeo then the Pompey is the font site type I'm using so I'll say later time B 9:40 p.m. so I also look at my grid so I'll click on this eye to open the eyes on set is great to look this way I'm going to look at it 940 out when I move the p.m. and the side looks ok 940 I'll take it to the beginning of this line and it looks okay now so I can select this and use my alignment Tuesday's to align it to the centre particle center and let's take a look okay this is okay we have our time and our notification bar set up so I'm going to remove this grid so it now looks like this so the next thing that I want to do now is our out so add a color to this screen so I'll click on this plus screen and I'm going to feel to change the color and you can choose any color of your choice you want for the background so like you can scroll down this way to move navigating red orange green and the rest of them so I want my background color to look this way you you you can set it if you know the color code like EEE would give you a stock background so I think I can go with this so if you look at the representation this is how your app should look like so the next thing I want to do is maybe do some designs so I'm going to add like let's say I'm going to add a circle to this design I'm going to add a circle to the design and just make some little creativeness remember to get those creativeness you need to look at those design communities to know what exactly what to do so I'm going to take my shape to take the Eclipse tool or the cycle tool then this is the width height I'm going to set it to 200 and also this stone that which I had to be 200 then I'm going to give it a feet color what kind of a color am I using okay something like this light or dark polka duck then I'm going to reduce the opacity make it more transparent then I'll drag it to the top so I'll duplicate this by you holding my alternate and click and drag I'll duplicate this so I have this and it kind it's kind of been on top of the daytime so I will select both of them and drag it below the time 9:40 and this is okay so I can do some little adjustments to see how it's going to look like so let's look at one more by design yes we are getting close to our design another great - I want to share with you is on draw on draw is a platform where you can get illustrations free illustrations so to get started on draw does go to Android cool then click on browse you can get tons of free illustrations to use the great thing about this you can set this illustration to be your colo which you are using for your design so Android is a great tool and is a great tip if you are watching this video now the next thing I need to do is to download one of this illustration and bring it to my design remember I just use this on social medias or blogs gave you want to have full access to this you can pay for it now to bring in this I've already done some downloaded some designs so I'll just bring it in and one of them is this one run my notification so I'll just bring it in or not this one exactly the other one okay so I'll reduce this this is the size if I want to reduce it I can use my skill to reduce this to this I can also click on constrain proportion so that it once I'm reducing the height is affecting the which automatically so I'll set this to be 170 and this is fine and I pick back my move tool and drag it to the center like this so now we want to give a note or 30 they use our what type of app is this so added text to describe what this app is all about so this text should be booed and should be like size of 18 so I've set it to be size of 18 then I'll make it less eseni boot then the text description should be let's say get 10 dong things get let's get things done which to do so to do we do need to do up wit this then I can I kind of see that this black is too thick so I can reduce the opacity down to lacy 85 and that's fine so I'll bring it down here then another thing maybe a description that talks more about the app so I added text I'll click on the text tool and I'll make a box this way so I have installed one plug-in which is called Lauren Lauren gives you text dummy text you can use in your design so I want this dummy text should be regular and the font size should be 13 then I'll right-click on these texts and go to plugins and go to Lauren and I'll show you how to download this so I'll click on auto generates to generate this text and this is okay I'll kind of reduced opacity to 82 let's say 80 so sorry I'll select all then reduce it to let's say 80 or 78 or something tonight that's fine so I'll increase the line height by clicking on the line height and drag drag right if you're increasing drag left if you're decreasing so now I have this next in a whole do like a click to action button a button that takes me somewhere else so to do that I'll add my grid line I won't see my grid line then I was a letter shape of right angle then I want this ship to start from this end of this line to this line then I want the height of this button to be let's say like say the height should be then I want the height to be let's say 60 to make it 60 then I will remove this grid so that I can sync how it looks like and I will give it a fake color so let's say this fake color and let's choose this Dhaka well let's choose this these are already document colors I've used it for now so you can choose to use them if you have that or you can just click and try to select a very good-looking color so now I have this let's take a look at how it looks on our mobile by good we're making some progress and I would like to drop this off I'm holding my shift so that I don't drag it off the balance settings out need Anisha so I added text to this and that takes our like that text to be 18 and semi boot also so click on it and set it to be 18 then set it to be a semi boot and let's say that actually get started start that up so our also increase this this way to get it to quoting the text to fit with the button that way I can set the align middle and set it to align Center then I can change the color the fake color I can change it to white so let's take a look at how it looks on our design great so the next thing we want to create is a registration form for we to have an app users needs to register in that app that will get basic information of the user now looking at our splash screen we have some elements who want to reuse in our registration form let's say the shapes and let's say the buttons so one great tips I want to give you guys is the component tips now figma makes it very easy for you to make some changes on your UI for example assume you have button across several your eyes and you want to change the color the body imagine the stress going screen by screen to change that color of that button both in mind you can do that out of the box where you have to change the parent component and every other child component gets the new design of the parent component so to do that I will simply show you guys how to do that so I want to create a shape component and that component will consist of this two shape of my Eclipse so click on this and use my shift to select the other one then I use my command G on Mac or ctrl G on Windows so once I do that you see this group one year showing that this has been grouped together and if you look inside the group you can see the two Eclipse there so I'm going to give this a ship name so that I know that it's for my ship the next is I want to make this shape a component so that I can reuse it anywhere in my design and to do that I just click on the create component above here so good I've created this company you can see a little color has been added to this to show that it is the parent component next component I want to create is that of the bottom so our group the rectangle and the text get started together or select both of them and I use my command G and I'll name this to be a button next I will click on create component to make it a component and you can see that purple color showing that this is a component so we have two component here which is the ship and the button component now I'm going to show you how this work on several screens but I will also have to create another component which will house the icons for my notification so I was jump in and select each of those icons then I'll use my command G to make it group then our colleagues notification then I'll click on create component to make this a company so I have three components in this designs and this components are the parent components so assuming that I wanted to placate this design so that we can have our registration and design so when I use my command D on Mac you can use ctrl T on Windows so when I do this you can see a duplicate of this and now remember what I said about components as you may want to change the color of this shape here to be red and I click on red for example you can see that the shape color is changed across everywhere that component is being used so that's the great importance of using components in your design so next what I want to do I will change out the late word I don't need in this second screen of duplicated then I will have to rename the name to be registration then I'd like to take the registration downward so the splash will be the first the registration will be the next one then the text of the registration for the bottom our cell ID text we register now remember that I'm changing the child component and it's not affecting the parent company that's hi it's works so next thing is I want to like give a note so I'll click on alternate on my keyboard to duplicate this and drag so I will name this to be let's say welcome on board on board with an exclamation mark fine next thing I want to give a small description also to show to tell you what you should expect about the app once you register so I can duplicate this also dragging here so I'll say let's hope you meet pop your tax so after I don't you can see the spacing yeah I can remove those missing by clicking on auto height he gets me the normal space I'm supposed to use next I want to do is create the forms the forms include for this particular registration so I can use my layer grid so I get the form the form input exactly to the size of the screen like looking at the pattern here starting from you and ending here then next I want to do is to give it a height of let's say 50 i set the height then I will set the border reduced to be Conner edges over the reduced to 100 and that is it then I'll set the color to the white and that is it I will remove this layout grid and this is what we have cutting so next thing I want to do is to add a text to this like a placeholder so I can let's duplicate this also click on alternate and drag to this and it is at the back of this rectangle so I'll take it to the front of this rectangle so you can see it so the content let me zoom in so you can see over there so I'll make this to be left aligned and the contents let's say I need the user to enter the name so I'll say enter your full name ok this is fine I click Auto wit to make it as I play the width then I think this is fine I can select the boot element and click on ctrl G command G to group it and now call this input then I may imputed component because I plan on reusing it everywhere in the UI design maybe in my log in design and the rest of that so the next thing I will need to do is to speedily rush to replicate this for my email my password and my confirm password so I will do that immediately so now I'm done with the different components for it so I'm going to do some basic alignments by selecting all of them and make it to be vertically aligned so they have the same alignment so I can drag this closer to this registration button here and this looks a bit bit far from it so I can drag it closer to have something like this so I can select them some just doing some basic arrangement so I'll make it to align Center so all of them will be centered and it's centered next maybe our add a description telling the person to sign up a to passing to sign in a the person has already registered so I'm going to duplicate this downward and make it left aligned and make it auto wit but the contact should be already have an account watch your up on you should sign in so if you already have an account sign in so but I'm going to make this more like this or make it 14 and this is okay I can't set designing to look different then decide to make it red can desire to make whatever color you like after the color may be making more darker and this is fine then I also make a boot so it stands out and I'll reduce this to this so now I can set it to align Center with the bottom yes good and make sure every other thing is aligned Center so good everything is aligned Center then I think this person's within these buttons I need to increase this person so I'll also do that I also fix that and and I read you so we we can also take a look at this on our design so let's look at it on our design so if you look at our designer you can see we still have the first one and if you look down you see page 1 and page 2 so you can click on page 2 to look at what we have so this is our registration form I think the book they text was way too far from each border so also fix that and pratically and bring him down a little bit so let's take a look at it this is okay so we can walk with this so make sure all of them are aligned centered so I'll do that and look at it again okay this is fine we are done with our registration so the next screen I will need to do is a login screen and we have something similar to the registration screen so I will quickly do that from this case we have acquired earlier from the registration fee so I'm done with the design we can take a look at this design on our page so click on the third one and this is our login design where it says welcome back your entire email password so that is less designed a - part of this app so to do that I'll quickly duplicate the login screen and change the name to be a dashboard then I can delete what I don't want to use quick date with that then I need to display the users profile and maybe tell the user welcome so I want to display the users image or profile image so I will need it works this way and I like to give this box a color of this and this is where I want to display the profile image of the user so I'm citing this box to the bottom so that other elements which I have on this dashboard screen will come out and this shape element looks a little bit faint so I'm going to make it more whiter so it's it can come out then our art is psycho that we house the an eclipse that we house the the picture of the user and this at least I'm going to set the size to be hundred by hundred so one great tips I'm going to show you guys is on splash on splash is a platform an online platform where you can get free images to use in your design but you can just click on the image you want to use and download and bring it in in your feet my design but I'm not going to do that what I'm going to do is I'm going to use a plug-in on thigma which I've already installed so just right click and select plugins and select on splash I've already installed this so I can use this to unsplash to download the images when I click on unsplash it loads so when it is done loading it brings up this dialog box where I can search what I need to use so I'm with such profile click on enter and I'm going to use this profile picture and immediately the profile picture is there next in our work on this user and I'll drop this here and I will say welcome believe your wrists so I created a video on how to design a website we using Olivia I love done him so she's not my girlfriend anyway so you can go check out the video and the link below or above this video anyway click on it and go check out the video and make sure you come back to complete this video so I've changed the color of this text to the white next thing is our ad o'clock o'clock should be on our design because it tells the user what the time is is it to do up to like less 8 o'clock is the first thing to use I guess to say and know what the time is so I'm going to add an eclipse for this so dry Eclipse and make it to the 120 by 120 so I'm going to give this Eclipse a color similar to what we have initial here so I'll bring it down this way think I'm more cuties write an effect so it would look good like this then next thing I want to do is or add the pie vote the pie word our Allen electives and make it turn by then and this paper should be on this is subtly on the center I'm using the Sigma guideline to do that so the color for this pie vote I can choose this color and then add an effect to make it look nicer so next is the day Heights for the clock and I will do that by selecting my rectangle tool and our draw a rectangle and make the size to be 1.05 that's the height of it then I'll make the corners to go 100 so I'll drag this to the center here exactly to the center then I'll give you a cola similar to what we have initial with the head and make it more darker this should be the hour hand so I'll duplicate this with command D and I'll change the angle to be 60 and this is what 12 so sorry I'll drag it down this way so one thing I want to do is to change the height of this very one or change it to be 1.3 and make sure it's at the center then I'll reduce the color make it more lighter then I also duplicate this and I can rotate this also by using this term here so rotate and this is fine I'm going to change the color making it ash this should be the second hand and I'm going to also set it to be in the middle yeah so once you have this done can see the pie what I want the pie words to be on top so I'm going to drag the pie over to the top the pie over to the top then I will reduce the shot the hour hand because it's shutter reduced that just 1.45 I can reduce this also less it with it's 5 and I'm okay with this so the next thing I will do is add date I mean like the numbers for it so I can do that by may be duplicating this and drag it over here and change the size to be LASIK 10/10 would be fine for rate and let me select and then the content of this text should be 12 and I'm going to set the color of this to this very color and make it more darker so one other thing is to take it to the middle this way and also duplicate it for six change the content to be six and also duplicate it for three change the content to be three and also duplicate it to be for nine and I'm going to do some alignment to set it to the center and also this to set it to the center okay this is fine Bravo I'll clock out of the box this is nice free classic way to let me know in the comment section if you really like this design and what you want me to improve on the design so next thing I want to do is maybe a salutation written I'll duplicate this and I will see good afternoon looks like it's three over there so on upload design so I'm going to set this to be twelve sorry that's beautiful set it to be 12 and using our grid line so our turn on the grid line so I've set this exactly to be yeah and I'm going to group this o'clock with the command G and need to be one o'clock then I will drag this to the center also then I'll remove the grid line by clicking on the eye tool we have this right so the next thing I want to do is to show the list of tax delete acts which you have already added in this up so it can be like a guideline to you so I'm going to duplicate this down over here and make it to be 14 then I'll change this to be tax list so list of tags and let me add my grid line so I can align it properly so this is okay then I'll remove the grid line and I'll need a box that containing the list of tax I'll use my rectangle to do that and this is a nice box I'll add some video converter it canarios then set the color to the white and add an effect of shadow and I want the blueness to be tail tada and as okay so I can also reduce this a little bit so I need to add some list of tax to this so how do placate this and bring it to the front and reduce it to less sector thing and also reduce the opacity a little bit and I'll change the content of this text to delete clucks then zoom in to see what I'll bring it down this way a little bit also I need another icon so you can click to add attacks to this list of tax so I've already installed another different type of font different form font also that this one is feather icon so I can click on it and I can click on the plus to select a plus icon so I click on the first icon so remember to drag the plus icon into the dashboard frame so I'll bring it down to this point and I'll choose a color of these and making and this is fine then I'll set the alignment so the align Center of water next I will do is to add individual tags so I can select this and make it to be 17 by 17 then our other stroke Melissa this trope is true then the field should be this for complete attacks then I'm going to duplicate this and make it to be 12 all we can still leave it up to 10 then make it to be regular and in text context may 3 for that maybe for the first act should be laying programming by 2 a so I'm going to set this to a line left and I'll drag it in this way so these are fixed arts I'm going to set the alignment to be Center and then group it and call it tags so I'll quickly duplicate this for other tags so now I'm done with the different tags I've added to this next is I need to change tax that has not been done I'll change the color to white and I'll change the fill color to black or I can leave difficulties with okay fine so I have the various tax I can also add a screwball trend you should I be area tax you can screw to so set the height to do 1.5 sorry don't know what I wanted to do say the I to be 3 and said whatever just want rate or heat or enter then you know I'll bring it down here so that you know that there are other tax to select from so making more lighter and this is it soup nice we have our tax dashboard done in Italy and fine so you can take a look a date click on the fourth one and look at it well it's not properly aligned so that I will fix that by selecting this too much of odious and select each and every one of these to align left' great and now take a look at it and this look good so nice on now we are done with our design the next thing is to drawn a prototype for this design so I'll quickly do that by clicking on the prototype - yeah and I can set the color of the prototype and the rest of that so initially you see black background so because the color is been set by default to the black so when I click on each of this element you can see this cycle here so you can click I won't get started to take me to the registration form then I want the registration form to take me to after registering it should take me to dashboard also I want the login so I can change this we see how register here sorry I'll change it to login then I'll go back to prototype for me to change that I went back to design to gender so I'll go back to prototype and the login should take me here then this signup button should take me to the sign up this logging should also take me to the login so you can now run your prototype like let's go and see our prototype so you can restart it by pressing R on your keyboard so when I click on get started I get to the Registrar registration form when I click on sign-in I go to the sign-in form when I click on sign up I'm on the sign on phone and when I click on register I get to the - port so thank you guys for watching this video I hope you enjoyed it please subscribe to my channel and hit you know each other so that you get notified when I make new videos thank you and have a wonderful day 5

Channel: Building Amazing Things

Views: 408,932

Keywords: figma mobile app design, mobile app deisgn with figma, mobile app design figma, figma mobile app, figma app, how to design mobile app in figma, mobile app design in figma, figma app design, figma app prototype, figma app protype, mobile app, app, design, mobile, figma app design tutorial, figma, figma tutorial, ui design, mobile app design, mobile design, figma tutorial app design, figma prototype, ux design, figma mobile app prototype, prototype, How to design mobile app ui

Id: PeGfX7W1mJk

Length: 46min 30sec (2790 seconds)

Published: Fri May 29 2020