Mobile App Design Tutorial in Figma (Free Course!)

hey guys bridget here in this video we're going to create this ios app from scratch using figma we're going to go step by step and create everything from the early foundations and by the way just before we get started i want to remind you that i recently launched a free course on how to get started in ui ux design so feel free to check it out and link in the description now without further ado let's jump right into the video all right so we're back in figma and the very first thing that we're gonna do is we're going to rename this document over here to ios and we're going to create a frame and select the phone and we're going to go over the for iphone 13 pro max and at this point we're going to just start adding the text so get the text tool we're going to write welcome and we're going to use latto which is a free google web font and essentially we're going to make it quite bigger and actually instead of lotto let's go with monserrah which is a more friendlier uh typeface and just gives us that good vibes if you wish so let's go and let's select all this and now we're going to add a layout grid so you can see over here you can change it to columns and you can change it to two columns and let's add a little bit of a margin over here we're also going to change the color of this layout grid now let's go ahead and let's make it light gray so that we can still see the design below and we're going to start adding the input fields now actually as i'm looking at it probably going to add just a little bit more of a margin i wanted to give to really give this design a lot of breathing room so that's that and now let's create the very first rectangle which is going to help us structure the input fields so we're going to make it rounded similarly to this let's make it let's make it lighter and we're probably going to give it just a small tint of blue and now we're going to duplicate the text by using shift plus alt i'm going to bring it up now let's make it way smaller let's bring this over here and i'm going to write nemo and i'm going to make it smaller or actually regular and now let's uh what we're gonna do is uh we're going to create a duplicate of this input field i'm going to write here password and we're actually going to add a icon so in order to add an eye icon we're going to leverage nuclear icons which is a really cool software to other icons and i'm going to write here i and as you can see we have quite a bit of choice and i just want like a regular one something like uh if you run these lines i could work let's increase the size of this icon i'm going to unframe it and bring it right here all right so now that we have this icon i'm going to make it very light it doesn't take a lot of visual emphasis i'm going to make also this password uh lighter so it just looks a little bit more in line with a password of an input field that wasn't uh wasn't entered yet all right so we have this and now we're going to duplicate the stacks again we're going to write here forgot password and we're going to essentially change this to the main color which is going to be a blue color now at this point let's copy and paste this over here and we're going to write a sign in i'm going to bring it to the very center change the color and as you can see i'm using the eye drop tool which is shortcut command c and you can easily just like whatever color that you prefer in the canvas all right so i have here we need to add a text don't have an account sign up and we're going to make this sign up the same color as the call to action buttons all right so here we have the main options to essentially go on and move forward with the app experience now on top of that since it's 2021 i also want social signups so why not using those um or sign in with i'm going to make this centered and by the way this design was heavily inspired by a you like it that you can find on ui hater i'm going to send it over and it was mentioned also on my um ux mentor instagram page so feel free to check it out really really cool you like it heavily um i would highly recommend you to check it out the original so right and this is uh the original one which is a holocron so definitely check it out a brick props to the designer which really did an amazing amazing job so let's write here facebook and i'm going to add the facebook icon now let's make small make it smaller over here and now let's duplicate this i'm going to add the google so we need the google logo and let's add it over here so as you can see with the clue icons all these options all these uh actions are really easy to partake and let's add a stroke over here this color let's make the actual logo white and we are pretty much set when it comes to the main page one thing that i'm actually missing is the top section of the ios nav bar and in order to find data i'm simply going to go here under the figma community i'm going to write in ios and try to find a ios kit which is already pre-built and i'm literally going to grab one of those top elements from a ui kit so just a very easy way to actually go ahead and solve that issue if you wish you can simply grab one of these and just go over here on the frame and paste it adapt it to the width of this iphone and yeah we're pretty much good to go all right so let's bring this a little bit down let's try to make all of this have a little bit of more more breathing room if you wish and uh here we go i'm also going to round up the corners just a little bit i really like to work in you know like that and i'm also going to make the background not fully blue but just give it a little bit of a blue tint maybe have some drop shadow behind just that it looks a little bit you know cooler just make it here a drop shadow with some light light tint of blue and um yeah this is just uh really nice to look at and you know to work on all right so now that we have the main welcome page what we're gonna do is we're going to create a duplicate of this and before before i actually do that let me turn this into a component so that it's going to be reusable so as you can see this is the the current component just going to rub it and bring it over here the instance and i'm going to do the same for this one over here so just going to grab bring here the main component and duplicate this instance right here so all right and the way the reason why i have the components here not in a separate page pages because at the start of a project i really like to to be nimble and to have all the components in the same page then as the project grows does it it expands and you set up the design system correctly you're going to have different pages but for the time being this works totally fine so that's right here create new account and what i'm gonna do is uh i'm going to delete this i'm going to delete this also this at the very bottom and i'm going to bring this below and now uh let's just check the distance between this one and this one 16.36 hit it when it's not the full numbers so we're pretty much going to stick to 16 and i'm going to duplicate that just a few times all right now at this point what we need is also the password that i realized that and uh so what we're gonna do is we're going to delete these two i'm going to again create this to a component bring it here so we have the oldie masters component here and i'm going to duplicate this guy right here two times we're going to have repeat password and we're going to just delete this icon in this case and let's go ahead and let's add all the other data so we have email address here we're going to have the phone number and actually let's make it small caps and let's use the same color as these other ones right here and here the call to action is going to be different it's going to be great account and as you can see i have an issue because this is not central aligned but we can easily just change that and um it's going to be fixed so what if um we basically have to change here have an account so they'll sign up it's going to be signed in we're going to center all this all right perfect so we have our very first two screens i'm also going to add the another one which is going to be a 404 screen which is always useful hopefully it's not one of those pages that you're going to define but yeah you just need one of those as well so let's go right here go back let's add some text this page was not found i'm going to right here try again to find this new section of the app center it up let's bring it to the center let's bring it over here and what we're gonna do at this point we're going to make this bigger and also this one here we're going to grab an icon from this really cool kit called plum which is from ls graphics so feel free to check it out it's a really really nice um set of icons that you can leverage for your project and we need to find an icon which could be suitable for this specific instance so maybe i like them like that it could be interesting to see um so you kind of want to make it uh joyful if you wish and uh like lightweight in uh in essence so yeah let's uh just center it like this let's make it i'm actually going to bring this one here bring this here to the center all right and this is looking interesting and yeah let's uh ring this section here and i think we're reset for the time being and uh we're continuing in just a second all right so let's continue and let's create a very new page which is going to be sort of a blog post page and that we're actually going to duplicate this by using a shift plus option key let's bring this screen right here and we're going to go ahead and duplicate this text i'm going to bring it on the top we're going to write article let's center it though and i'm going to bring it here and at this point what we're going to do is we're going to duplicate this one time and i'm going to delete these elements since we don't really need them anymore i'm going to write here continue listening and i'm going to bring back nuclear icons and we're going to write a menu in order to find a menu icon which we're going to add on the left so here we go the menu icon let's bring it here it's increasing size and just a little bit more and here we go all right oh let's add the search icon and we're going to use this one let's increase it in size as well i'm going to put it over here all right now i just want to make this stroke just a little bit bigger so that it matches the search icon and i think this is uh working well maybe let's just make these two icons just a little bit bigger still i'm going to move this one here all right so at this point what we're going to do is we're going to add the new element just going to be a rectangle element and i'm going to bring it over here and let's start stylizing so let's duplicate the text let's bring it over here i'm going to write a mini extract let's increase the height line height just a little bit let's bring this guy here let's increase the height just a bit and at this point what i'm going to do is i'm going to add um or actually let's go under plugins under unsplash and let's find a minimal image so just like this one here and this one didn't didn't really catch there we go so we have our first one let's make this one white now let's find a second image which could work well and let's try something a little bit something else so it's just a matter of trial and error and yeah here we go let's write tech see if we can find anything in particular that we can leverage be more tech related this one's pretty interesting but the contrast is not on point i'm not too sure about these maybe let's just keep the the original one i will go with that all right have our heading text and now what we're going to do is we're going to add the three dots below in order to and to basically tell the users that this is the navigation i'm going to make the first one completely blue and we're also going to duplicate this another menu so we're going to write here all then we're going to have a few different entries this one's going to be tech it's going to be fashion and then sports and politics let's bring it here i'm going to use the distribute horizontal spacing we're going to make all of these in a great text just like this one all right let's click here and i'm also going to add a line below all in order to indicate that this is a selected element we're also going to duplicate this one more time bring it over here 75 by 75 that should do and at this point we're going to add some more text elements right here let's make it black i'm going to write tech and here below the element so we're actually going to use content real in order to create some sample content in pretty much no time so as you can see here content rio is uploading and let's see if we can find anything which it can be useful really yes typing blog see if anything seems like it's not real it's taking its time oh well we'll figure out something this is a marketing title you can't always have it your way life that's something that happens all right so let's write the date i'm going to make it just a little bit smaller and in this gray color and what we're going to do is we're going to just duplicate this a few times that's right fashion sports politics we're going to find some images on our splash it's going to be tech related so something like this i'm going to have fashion let's click on search and let's try one of these icons or images it's right here sports and here we go and or actually yeah this is this one let's write politics let's add this image right here all right so i think we're in a good spot right now and it's right here fashion [Music] it's longer it's right here politics and there we go all right ready to move on to the very next screen now we can also start changing these names so new account so it's going to be a 404 error here we have articles and here it's going to be a chat so let's write chat or actually comments let's write in arrow and let's use one of these arrows that we find here so i'm gonna go with this one let's bring it over here let's make it just slightly smaller and here we go all right so just going to delete most of these elements since we don't really need them and what we're going to do is we're going to start adding names we're going to have a comment below with a date and let's also add a avatar right here also a dividing line all right so overall this is looking good and now what we're gonna do is uh we're essentially going to first of all bring this just a little bit more on the right so we can increase the size of the avatar and we're going to duplicate this a few times and just before we do that i'm also going to add on the section below a place for users to comment so here we go i'm going to write on the bottom right your comment i'm going to add the emoji and here we go all right let's duplicate this let's bring it over here let's remove the shadow i'm going to use the same blue as this one here it's right send we're going to find a send icon which is going to be this one all right probably let's make it like this and this so far is looking pretty good all right at this point what we're gonna do is we're going to just duplicate these a few times let's find using command d and actually what i noticed is that it's not really in a good place so i'm just going to duplicate it one more time by using the group function and command d and this time if i want to tweak or change these values i can do it like that because it's all grouped so that's something that makes it easier for us to like change the height and all those all those sizes right probably something like that could work all right so far so good now we're going to change the names using content real again and we're also going to add the avatars with the same plugin so let's write in full name let's also select all of these ovals that we created i'm going to go under image i'm going to go under avatar let's try smell we're going to mix it up some female avatars as well and we need to change the names uh that's right i'm not and um yeah i think this is working let's do some of these comments shorter just to mix it up let's run let's add some emojis and here we go all right we have our comment screen let's have a look from uh from a high level if everything is looking good maybe like this these menus could be a little bit up and uh probably also the text of these menus be a little bit bigger one two let's bring it up and here we go all right now what we're going to do is we're going to end up with another screen which is going to be a payment screen so actually i'm going to duplicate this other one here i'm going to write in membership i'm going to delete the of the text except for this one or actually delete also that one there but no worries we can always go here duplicate this bring it here to the center and we're going to write choose your plan all right all right or right perfect so i'm also going to add a smaller text which is going to be descriptive i'm going to use lipsum in order to create a very long uh line of text i'm going to change the width here so it becomes a manageable chunk if that makes sense let's bring it over here let's change it up and now what i'm going to do is i'm going to add another one of these guys let's bring it over here let's make it gray we're going to make it white or actually we're going to remove the image first of all let's make a white let's add a stroke just going to be a stroke with a blue outline 1.5 i'm going to write in here monthly and below that i'm going to add the amount it's going to be 9.99 that's right here build every month let's center it center all of this as well let's write in a check so we're looking for a check which is a little bit bigger let's try cliff uh maybe this one is gonna work all right let's make this one blue and i'm going to duplicate this on the right it's going to be the non-selected option so let's add this color for the outline and this color for this other option it's writing yearly yep i'm going to add the price of 97.99 build yearly and i'm going to write in select plan over here let's write some some other asterisks here maybe a bullet point with some some elements let's make this bullet point some greasy height and we're pretty much set and good to go all right so we are pretty much done at this point what i would usually do is to go one by one organize the layers find if there are any reusable components which we can use inside of this project and basically sync it all up with this design system it's something that is usually very beneficial to do at the uh when the project is at its initial stages so you haven't really gone too far in the the actual project itself so definitely one of the one thing to keep in mind and yeah overall i would say that this is uh working well so far happy with the result they really hope that this video was useful to at least the one person out there if you liked it please leave a like and even more than that i want to remind you that on my channel i have over 500 videos on the yux design sharing my over decade of experience in this field and really trying to you know push us some content which can be useful your feedback of course is super valuable for me so if you can leave a comment letting me know if this was useful what are the new things that you wanted to learn about in your yux design and essentially how can i help you and serve you that would be great since uh this is a really important data and essential information for me so really hope this video was helpful and i'll see you in the very next ones

Channel: Pierluigi Giglio

Views: 2,052

Keywords:

Id: PSOY7Qnu8bQ

Length: 41min 16sec (2476 seconds)

Published: Thu Nov 11 2021