Let's Design an iOS App in Figma: Tutorial for Beginners

hey guys bruju here in this video we're going to create this two ios app ui designs from scratch using figma now this is part of an amazing ui kit which i found on ui8 that i'm going to leave in link in the description so if you're interested in seeing the entire project feel free to check it out but now without further ado let's jump right into the video okay so we're back in figma and the very first thing we're going to do is we're going to select the frame and then we're going to select the iphone 13 pro max but feel free to choose also other sizes is if you're looking this video in the future and we're going to double click on this name and we're going to rename it to one all right at this point we're going to start creating the top level section so we're going to use the rectangle tool right here and we are going to create a rectangle which is going to be right in the middle i'm going to center it using this tool right here i'm going to also round up the borders just a little bit this point we're going to select a green such as this one and we're also going to make it linear so we can create a nicer little linear gradient just to make this element stand out a little bit more and what we're gonna do next is we're going to use a nuclear icons now if you don't have nuclear icons already simply go on google search for nuclear icons you're going to find it right away it's a free icon management software which enables you to find the icons and we're going to type in something such as a book and i'm going to have a look and try to find something which is not too detailed but not even without details at all so something around these lines maybe an outline work well or actually let's go for this one right here and as you can see by default when you're dragging and dropping from nuclear a frame is going to be created so what we're gonna do is we're essentially going to unframe this and the way you do it is using shift command g as you can see now it's just a group at this point what we're going to do is we're going to use the scale tool which is this one right here we're going to scale it up just a bit and we're going to make it white so simply go under fill eyedropper tool and white all right so pretty much good to go when it comes to this icon now let's start adding some more icons i'm going to go back on nucleo right in the arrow scroll down and i'm going to use this one right here and also i also need a trash icon so again this ios app is inspired by a ui design which from entire ui kit which you can find on ui eight so feel free to check it out if you're interested in seeing the entire project really now again let's bring this one here and now what we're gonna do after we stabilize these two icons is we're essentially going to go ahead and create some order in this layout the way that we're going to do it is by using a layout grid so let's go over here let's add two columns since for mobile we don't really need the many and we're going to add a little bit of a margin so that we have some breathing room overall actually let's make it 25 let's make the layout grid a little bit lighter so that it doesn't interferes too much with the design but still gives us that point of reference really in order to evaluate it from moving in the right direction all right so i think this one is looking good and now let's add some text now in this case we're going to use lotto let's make it bold and let's center it up let's make it just that touch smaller all right now at this point let's duplicate this and that's right here today 10 30 a.m let's make it even smaller and let's give it a more greyish color probably let's opt for regular okay so light gray but not too light so we still keep the eligibility now let's uh go ahead and let's create some different elements so we're gonna have the focus time it's going to be 120 minutes and what i'm going to do is i'm going to group this duplicate it using shift option alt key and dragging it and then command d in order to duplicate this all right i'm going to write in start time 10 30 a.m and then sessions i hate times all right let's add a divider line in between and let's have another one here and let's just like both make them a little bit lighter we don't really need that much visual emphasis on these elements as they are okay probably going to give it just two notches and then use the distribute horizontal spacing so that it's all nice and clean all right perfect at this point what we're gonna do is we're going to go in and the right productivity and we're going to start creating the graph let's make it smaller bring it here let's make it one step smaller let's also bring these guys up we can refine those in just a moment but for the time being just a quick adjustment it could work well let's duplicate this just a few times and i'm actually going to copy and paste the style using option command c and then option command v all right now at this point what we're going to do is we're going to start creating this uh this graph and it's pretty much going to be a stylized one and maybe actually let's make it go all the way to the top and i think we have our base perfect this point let's make it of a blue color i would say let's add some other informations below so i'm going to copy and paste this text let's make it 10 30 am scale it down bring it over here and i'm going to simply duplicate this a few times distribute horizontally 11 and then let's do 11 30. and 12 p.m let's make this one 2.5 and i think this makes it for being all said and done all right so at this point what we are missing is the bottom menu so let's go ahead and create that let's make the oval which is going to be quite quite big let's add a plus icon all right here we go and let's scale it down just a little bit all right let's start adding some some time icons so that's going to be the first one we're going to have menu and let's go with this one calendar and we're going to select this one here let's put them all together or actually we have a backup which is a little bit stronger in stroke and then we're going to use the cog for the settings all right let's enter this let's increase the size of these guys so that they're all working well together and distribute horizontally i'm going to make them a discrete color and what we're going to do next is actually going to select these create um let's distance them let's make them a little bit bigger in size and let's bring them all the way here and let's enter them right here all right so let's notch it let's nudge it just one touch let's make these a little bit of a gray tending towards a blue all right so pretty much good to go one more thing we need the top level menu which we can get pretty much anywhere from any ui get a a lot of free ones we're going to have a top level menu so and if you don't have a new icat at the moment um simply go under the home community ui kits just search for any mobile you like it that you can then you know duplicate and you're going to have it uh right away so you can simply copy and paste between documents all right so that would be the very first part and now let's move on to the next screen so we're going to update it using shift and option key and now let's delete this let's duplicate this over here let's write in history and we are going to make this smaller bring it right here we'll need these guys as well let's bring them up and we'll just delete the rest so let's make this smaller to 16. let's bring this on the left and here we go let's write in english lesson education 1 hour 30 and then 30 to 12. all right now what we're going to do is we're going to create a rectangle just going to span all the way across this element let's round it up let's change the color of the stroke to this one right here let's make it just a little bit bigger in height so we have some breathing room for this element right here perfect so at this point what we're gonna do is we're going to remove the vertical spacing between these lines maybe let's just adjust them before we copy this and duplicate it a few times and we're going to do this one more time afterwards but before we do that what we're going to do here is to add a date just like that let's bring this one a little bit below so we have some breathing room for the top section and let's make this one bit darker maybe a bit smaller let's duplicate this one more time it's right in yesterday and here we go all right design dashboard we're going to write relax music guitar lesson brief lesson and react lesson all right let's change up these dates this data as well meditation music meditation again this one's going to be development and here we go change these ones as well 145 and 345 and let's change these elements too all right now we only need to mix up these guys and we're ready to tackle the actual icons perfect so at this point what we're going to do is even before we touch the icons is we're going to find some nice [Music] linear gradients i guess they're going to work well all right we're heading towards more so one trick is actually turning it into a solid and then once you kind of find the hue for this one you can turn it into a linear so at least you have you don't have to you can like duplicate the same hue and just makes it for an easier um easier way to edit you know these these colors all together and to make this one lighter i'm probably going to change the color of that one in just a moment probably want something a bit lighter just like that let's go a bit of a different style for that one going to duplicate this and for this one here probably going to go with something more towards a red color all right now this point we just needed the different icons really so let's write in design i'm going to add them over here first music ah let's use this one guitar and here we go breathing um yeah sounds looks about right development uh this one will do all right center this so unframe them and what we're gonna do is we're going to give it a width similar to each other center them again and then what we what we really need to do is to go one by one when it comes to these icons i'm going to need to delete these select all of them let's make them white now i'm going to go individually try to match the width although even if it's not going to match exactly uh that's fine because some icons need to be curated differently simply because they're more they're smaller in size they have different strokes and you know things like that really do matter so definitely stuff to keep in mind like this one i'm okay in being a little bit kind of like moving around a little bit more so this one here and this one here as well all right we have our basic um so yeah we have our structure done and um yeah i really hope you enjoyed this tutorial um if you're interested in learning more about ui ux design my channel have over 500 videos sharing my other decade of experience in this field so feel free to check it out if you're interested in that and i'll see you in the next video

Channel: Pierluigi Giglio

Views: 455

Keywords:

Id: H5SBFZuSO1Q

Length: 23min 59sec (1439 seconds)

Published: Thu Dec 09 2021