Learn Figma: Design a Full Mobile UI/UX

1. Introduction: welcome to the full mobile you aux course with Sigma and this course we're gonna learn how we can use the free cloud based design tool called Sigma to design beautiful mobile mock ups for your clients or even your own projects. We're going to design a full seven page mock up for a client's name, Clean Kangaroo, which is essentially a laundry delivery service. My name is Nina, and I'm your instructor for this course. Over the past 10 years, I've designed and developed dozens of applications both mobile and web. And in this course I want to show you exactly how to design a full mobile mock up from scratch. As course is great for anyone. Even if you're a beginner designer, you can jump in and learn how to design beautiful mobile markups. Here are a few things that we're gonna learn in this course. First, we're gonna learn how to add images and icons to our projects. Then we're gonna learn what components are, which helps us create reusable designs in our work. We're gonna learn constraints which will help us keep our designs responsive for all mobile device sizes. We're even gonna use Apple's design kids to put together some parts of our project. And most importantly, we're gonna work with a lot of text and learn how to apply new font styles and new color styles for your project as well. And we're even gonna use plug ins to generate things such as maps or even get data from the Google sheets right into your design project. We're even going to learn how to apply great us throughout your design so that your users or your clients users will be super happy using the app that you designed. So if you're ready to put together a beautiful mobile mock up for your clients or for your own projects that get started and I'll see you in this course. 2. Mockup Requirements: All right, So to kick off this course, we're gonna jump right into designing our first mobile. You I now this is really exciting, and I do want to mention that you don't really need to have much background info on fig mus . If this is your first project, you should be able to still fall along. But otherwise, if you do want to learn some of the introductory things to Fig MMA, I do recommend that you check out my other course. The other courses called an introduction to Fig MMA. In that course, I go over a lot of the basics such as frames creating shapes and exploring some of the tools and panels that we have access to in fig MMA. But if you want to jump right in and learn as we go, you can also do that. Um, first things first is that I recommended you head on over to fig MMA dot com and set up an account there. If you haven't done so already, once you're set up and you're in fig MMA, then you're ready to jump into this course. So for our first project here, we're gonna be working on a mobile. You I for this company called Clean Kangaroo. We're gonna imagine that we have a client who has given us this project. Um, typically, a client will come up with something similar where they will give you their name. What they do, um, is always what pages They're required for the mock up. So we're gonna really treat this as a mock up that we're going to design for a client. Um, which happens to be this company called Clean Kangaroo Supercool. Now, before I jump in here, I do want to mention that you have access to these requirements in a pdf. Ah, and the resource is to go ahead and download them from the resource is of this lesson. You'll also find the stigma link to get to this file. I guess you won't actually go ahead and copied from here into your fig mop, so feel free to download that right now. Um, and then we'll go ahead and get started with the requirements. So let's see what this company does here. Clean kangaroo is an on demand laundry delivery service. Clean kangaroo lets users sign up and request to have their laundry picked up on dropped off other location. Essentially, it's a laundry delivery service that super cool. Let's see what they have in terms of brand assets. So it looks like they want us to actually come up with a color scheme. They don't have one right now for their project. And then they want us to also find an assigned funds to the project, which is cool because we're gonna go over color and typography in this course. Um, and then I see the only thing they've provided us is the logo, which again you can check. Resource is to find it. Now let's see what their mock up requires in terms of the pages. So first page is a sign up slash log in page with a button for a tutorial. Sign up Options will be email and password and then assigning with Google option as well. Pretty cool. Pretty typical for a log in page editorial page to explain how it works in three steps. Cool. We also need a page to add a payment card, pretty straightforward map page to let users set their pick up and drop off address. Okay, that's pretty cool. Looks like there's a typo year so I'll go ahead and fix that right there. Really quick. Cool away for users to call for laundry pickup from a local laundry service of their choice and show them the pricing. Okay, sounds pretty cool. I think this is gonna be our main page from what I see. And then we have a profile page to see all of the user's profile options as well as log outs. Um, pretty cool. Pretty straightforward right there. And lastly, a page to show users of their current slash active and also their past laundry services and how much they were charged makes sense in case the users want to go back and see how much their service costs and all of that. So without further ado, we're going to jump right into setting up our wire frames and then starting our figment file to do the mock up for this client 3. The Wireframe: All right. So? And the last lesson we went over the app requirements for the mock up we're working on here . Clean kangaroo. I've actually sketched out. Ah, What I think I want to include in the wire frame. Ah, and you'll find that in the resource is for this project as well. Eso from the last lesson if you downloaded the resource is, um go ahead and open to clean kangaroo markup sketch. Pdf If not, go ahead and download. The resource is and then go ahead and open this file. So once you open it, you'll find ah, this little drawing that I did. Um, just using pen and paper to kind of create a wire frame. And this is what we call a wire frame. And you I or user interface design. Essentially, it's just kind of like a blueprint for our mock up before we actually jump in and design it on and spend a lot of time designing without knowing exactly what the blueprint for the obligation is gonna look like. So, essentially, that's why we do a wire frame, usually before we jump in and start our mock up. Now, if you already had some ideas for this project and you started sketching them. Feel free to follow along and maybe make some tweaks along the way based on your own design . If not, we're gonna be using. Ah, this wire frame right here is well on. We're going to refer to the sketch a lot throughout designing this markup. So definitely have the file handy. A swells, your APP requirements, which again are in the resource is folder. So really quickly. Let's go through the pages here that I've set up. Ah, now you'll see their number. According to what? The client here has given us one through seven and all the pages are covered here. We have a sign up log in page, um, and pretty straightforward. With all the requirements that they have signed up with email sent it with Google. Um, and then we have a little tutorial pop up. I'm thinking about just putting this tutorial right on top of the log in page and then just doing a little pop up. Ah, with a blurred background, we're just gonna do it payment card so they can have their credit card. And then if you go to the next page here. Now, I've created a page here for the user to set their address on find their address to set for their laundry jewelry service. This is our main slash request page. Um, now, from here, there will be map off where they put their delivery address that they can always tap this to go to this page and then update there, maybe new address if at any point they changed your address, then down here, we have a laundry request tap that essentially is always open. It will show you the stores nearby. I'm thinking about doing some sort of, maybe like, scroll or swipe left and right to go to different, um, to view different cards for different stores. You can see what I think we should include in here. Um, downwards as a kind of made more of a detailed drawing of what I think should be included in the store card here down here. So we'll have an image of the store, maybe, um, store name, dollar per item, what their turnaround time is. So how long they think that will take to do the laundry service and then they're rating. So for the navigation structure here. This is how users will stretch between the main, the three main pages here, which is the main page, the profile page and then the past or the services slash Past requests Page here. I've decided to go with a tap bar navigation. So that's essentially where you see you have a tab at the bottom and then you can go to multiple pages on depending on which one selected it will. It will take you to the correct page. If you use the instagram app, for example, they use a tab, our system, where you have options in the bottom here and then you switch between different pages. This is pretty common in a lot of mobile applications. And so since we only have really three main pages here, we're going to stick to using a tab. Are and then down here, it will just tell you number one or the top option over one will take it. Services were just page seven right here. Ah, this is where they see their past laundry services. Um, and again amore detailed version of what I think should go in this kind of list. Um, view here would be a store name the date and time that they placed the laundry service order. And then maybe depending on the status of this order, we can show it over here. So if it's already been delivered, we can say deliver it. If it's currently being washed or dried, we can show that over here a swell on page two will be the main page over here. The laundry page and then the third page will go to a profile page. From here, we thought we can update addressed. We can allow them to edit their name. Email. Um, they can go to their payment method. From here, there's a little support, but in in case you want to get in touch with the clean kangaroo team, let's say on a log out button, which is pretty typical on a profile of slash account page. So if this is a little bit too much right now, don't worry about it all. Once we start designing, we're gonna take it step by step, page by page and really break everything down and then go ahead and create our markup. The whole point of this wire frame is just to have an idea of everything that we need to include. So we don't accidentally forget something or leave something out. Right? So in the next lesson, we're gonna go ahead and actually set up all over Page is Ah, and then get ready to start designing our mock up. 4. Setting Up Our Frames: All right, so I think we're ready to set up our new project. Ah, so let's head on over to Fig Mahir. If you're in the desktop app, it's super easy to create a new file. You just go up here and press the plus sign here. I'm going to open a new foul. Let's go ahead and rename it to Clean Kangaroo. Since that's the project we're working on here and now we have a fresh new cam. It's right in front of us. Ah, what I'm gonna do is go ahead and change the background color and make it slightly darker just to kind of help create some contrast between our frames. Here, Let's go ahead and now set up all the frames will need for our project. So if I go back to my sketch that I had here, you'll see we have seven pages that we need. So let's go ahead and set up those pages with the appropriate names, um, and then jump into designing or log in page. So again you create new frames bright pressing f on your keyboard. So we're you know, we're designing for a mobile mock up. Ah, when we go ahead and just choose iPhone 11 pro. This tends to fit a lot of the new iPhone sizes as well. Just gonna make my background slightly lighter. I think that's good. So let's go ahead and create seven of these pages. So the easiest way to create multiple frames from one they already have set up is just a duplicated by pressing command e r. Control de if your own Windows. So I know we have a total of seven pages, so I'll need to do this six more times. So let's create 12 three, 456 And now we have a market with seven pages. Let's go ahead and use the zoom option here and do zoom to fit. What this will do is just go ahead and just zoom out until we can see all of our frames. You can also press shift one to toggle this zoom option from anywhere you are. So if I press shift one you can see it will zoom to fit right there to pretty handy. Let's go ahead and rename all over frames and then jump into starting our first log in page , so to rename frames or layers. You can either double click here so we can do log in. I can see it's changed here, or we can just go here in our layers panel and let's do tutorial. This one will be payment. This one will be map. This is going to be our main well, it's actually a mitt request. Then we have or profile last, not leaves. We have our services page. Let's just go ahead and double check that we didn't miss anything here. So log in. Tutorial payments, map requests, profile and services slash past requests. I think we got everything here. So, uh, now let's go ahead and just focus on our log in page. Another neat way to zoom in is just to hold the Zet key on your keyboard and then go ahead and just drag over the area. You want to zoom into that? We'll zoom in like that, so going back to our log in page, we'll need a bunch of rectangles, Um, specifically one for the email. Want for past Ward one for the log in and two for the sign up buttons here. So that's a total of five rectangles. Let's go ahead and create those and try to distribute them accordingly so you can create a rectangles by pressing our as we learned in the previous sections. Let's go ahead and just drag one here. Um, I think, um, height of 55 would be nice, and then just go ahead and let go. I'm using all to here just to see where, how it's positioned here. Let's just go ahead. Nudged down the size here, too. Make it 3 25 just so it's evenly spaced between the left and the right. I'm going to use shift are to bring my ruler back. And then I'm gonna add some guides on my left and right just to make things easier going forward. So I'm going to use command D four times to duplicate this rectangle. One neat way to duplicate things is to again hold altar and then drag away this rectangle. Let's use the arrow keys to just bring it down. Three pixels here. Ah, and then, if you press command D, it will actually go ahead and replicate that same type of duplicate and move that I did. There's let's do it three more times. 123 and Now we have five fields or buttons here that we can use. Let's move these bottom, too. Course it to the bottom. Let's move this one a little bit down. Let's go ahead and add some styling to this to these fields here. Let's make the fill white and then add a stroke of gonna make it slightly. I think right here is good. If you want to get the exact same stroke color, go ahead and just input this, um, hex key into your color picker for for the stroke. Let's go ahead and just make it 1.5 pixels just so we can see it more easily. Select them again. Let's go ahead and round the corners to eight pixels using here. Actually, the stews. Six. It looks good. Let's apply the same corner radius tool of these again. You can hold multiple objects using shift must go ahead and add some text using the tiki. I got a text right here, a type, an email. Just center that along here, and then let's just stretch it all the way through. That's good enough. I'm just gonna duplicated by holding old Let's do password for not don't worry too much about the fonts and the colors because we'll come back to that in the future. Lessons. Right now, we're just trying to get the basic set up. Let's go ahead and do fit this text here down to our button, and you can center the text using this option here, where it says text line center. Let's make it log in. Let's do that two more times for or sign up with email. Andi. Lastly, sign up with Google. If I go back to my design, we have a little line here to just distinguish between the log in and then the sign up sections. Let's go back and do we can do a line by President Oh, and just draw one right from the left side of my guy to the right one. The beautiful things about guides is that when you're getting close to them, they will snap right into place. Just make sure that you have the right size for your object. One thing to also notice that when you're drawing your line just to make sure that you're not going at weird angles here, hold shift and it will help you keep things at the straight angle position and let go here . And we have our line here. Just gonna make his a little bit lighter. Let's do the same. C nine c nine c nine. I'm just typing this in here and I think that looks good. Let's make it 1.5 and bigness. So I see here that it's actually two lines, one on the left, one on the right s. So why don't we go ahead and duplicate that here and then I'm going to just drag one while holding shift again to the middle and the other one to the middle is well, so not essentially have two lines. So why don't we go ahead and use or properties panel here, um, to get the exact size is that we're going for here s so why don't we bring this down to 1 45? I think that's too little. Let's do 1 35 and then for this one. Let's go ahead and also make it 1 35 and then I'm going to use shift and then the arrow keys just to move things quickly. The shift, an arrow keys help you move shades for objects by 10 pixels at a time. Otherwise, if you just use the arrow keys, it will do one pixel at a time. So feel free to use the shift and arrow keys. But we need to move things up quickly or use the arrow keys to just move things down. Pixel by pixel. Let's go ahead and line those up here. There we go. Let's add another text by just duplicating this one and here, making it a little bit smaller type in or go ahead and just tried that in the middle. Cool. So now we're getting the basics going. If you go back to our sketch, we're still missing. The logo were still missing terms. We don't have a background image or the tutorial icon here, so we'll come back in the next lesson, actually complete or log in page here 5. Images & Overlays: All right, So if you've been following along so far, we started designing our log in page here. By the way, if you haven't followed along in the last couple lessons, um, something you can do whether in this lesson or in future lessons, you can go to the mall cups over here, and the resource is filed off this design project that we're working on and then you'll see according to the lesson, the latest filed the latest Fichman fall we worked on in that lesson. So go ahead and get started with this. If you haven't already otherwise just head back into your fame, a file and continue along and this lesson, we're going to explore how we can add images on Actually go ahead and added background image as bolas or logo from the clean kangaroo app right here as well. So, in general, whenever you're designing a project and you're looking for photos to use, I highly recommend unspool ash here There, as they say, the Internet source of freely usable images as all the images that you search are free to use, Um, I use this person might projects, and I highly recommend you to go check it out and see if there's an image in there that you want to use for your future projects. So I've used on Splashed to actually download an image. So to find that image go to the resource is folder of this project that we're working on and again, you can find that at the at the very beginning of this section. So go ahead and open images, find the log in page, and then you'll notice there is a background image in here. Us. Let's go ahead and switch over to Fig MMA. Well, having your folder here So this backgrounds J. Peg Jigme allows you to import J peg PNG S V G and even pdf And the easiest way to do so, it's just to go ahead and drag your image right into your finger file. This image is huge. So take some time to load. Um, you'll notice that is completely going outside of the frame. So what I'm gonna do is actually hold shift and Ault, and then go ahead and resize it. By now. You probably know what shift does. It will keep the proportion so the image doesn't get distorted. But what all does actually helps us keep the position or the sentry nous of this picture so that when I resize, it was not going to the corner there. Otherwise, if I if I let go of old on only hold shift, you can see it's way off my frame. So that's why we're using shift and old thing. That's good right here. Let's go ahead and just bring it down and let's actually assuming a little bit more, I think that's good for now. One thing to mention is that you can crop images because, as you can see, the image is huge and it's covering more space, and it needs to. So let's go and choose the crop tool from up here. And once we're in the crop tool, we can go ahead and just move these blue corners here, and that will help us get the size that we need. It looks good fitting perfectly. Um, you can also access Mawr image tools Here is well, you can add it all of these when you go here to the right and click on this image tool, and from there you can tweak your crop. If you made a mistake, and you wanna change it now Or you can do things such as improved the contrast. Um, you know, saturation temperature is just kind of simple image editing tools that you'll get in a lot of the design applications. He can also rotate the image from here as well. One thing to mention here is that right now we have crops like that because that's how we cropped our image. But if we do fill so what Phil will do is try to go ahead and put that image within that bounding box that we have right now. If we do fit, it will try to proportionately do the same thing. Eso because this image orginally is, um, in this proportionate will try to keep that in to fit type over here. Um, you could do tile if you want to do multiple. So this is really big. But if I do, let's say 2% or 3% it's actually have this image repeat itself. Um, that might work for, like, maybe a background of patterns. But for this case, I think crop will do the job. So it's just use crop and then close this over here. Um, now you'll notice my background images covering everything else. So let's select the background image here. Bring it all the way down. Now it's right underneath all my layers here, which is what I want. I also want to add an overly on top of this image so that the foreground over here doesn't blend with the background that we have to add an overlay. Go through where it says, Phil, you'll see. Right now it's image. Make sure to have the image selected by the way, Then go ahead and hit the plus icon and Phil. And right now it's given us a Grady int. So if you wanna add a Grady into your image, you can do that. But I want to just go ahead and choose solid over here, the overlays on top of her picture. But we can't see anything, so let's bring the rope a city down so we can see parts of the image. And let's go ahead and choose a darker color. We go black and then another capacity is way too high here, so let's do, um, maybe 50%. I think that's good. So there you have it. We've added our image to the background here. Now let's go ahead and not our logo. So again, from the resource is section, you'll see we have a logo folder over here. Let's go ahead and drag his colored one here and let's just go ahead and use shift Ault and resize that again. I think maybe 80 by 80 should be good. Just gonna zoom in here a little bit and let's see. Use the horizontal line center over here, which is the second option in the lineman tools. A double automatically center your image inside of your frame. I'm gonna bump it up a little bit, maybe add spacing of 70 to the top and then using T. I'm gonna add ah, text for my logo. Let's do clean kangaroo. Then make sure you select everything and then bumped the text size to 26. And I think that looks good. Change the fill two white Here. I just go ahead and center that, along with the logo here, thing that looks good. Now, you might have noticed that everything is kind of floating round on their own. Nothing's really related here, Um, and what figure allows us to do in the layers, just the group things that are relevant together, so that if make changes to them or if you want to move them around, for example, let's say I want to move this email field instead of just moving the box and then moving the text. I can just go ahead and group them together and move them together or apply styles together on all sorts of different things. So to do so, select your rectangle. We're holding shifts like your text. Now you can see that I have both selected because both have this little blue tinted background. Use Command G or controlled Jeon Windows to group things together. Let's do the same for password for the log in button over here. Let's do the same thing for the separator we have over here Senate with email sign up school. I think everything's group together except for my local here. So let's do the same thing here is Well, let's go ahead and rename all of these. You can rename groups by just double clicking on the layers panel here, so let's do logo on. Let's go ahead and just kind of followed convention here to add a hierarchy that makes sense. So let's go ahead and first place our Group one and then our group to which is the password Group three for by six. And then let's rename the rest e mail password log in. But in divider, I must do sign up email button signed up Google whoops, but in and the list. Just go ahead and name this or background. And actually, let's lock it in place his role so we don't accidentally move it around. Cool. I think it was good for now. Now we know how to add images. Let's come back and add some icons because, as you can see in my sketches here, I have some icons for the tutorial for the email and password. Um, and then we'll add the rest of the stuff for the log in page and then go ahead and finish it up in the next lesson. 6. Adding Icons: All right, So we've added images into our log in page here. So let's go ahead and add the icons. Um, based on what I have in my sketch here, we're gonna add three icons, one for the editorial page on and then one for the email and password fields here. And then why don't we go ahead and just brush things up a little bit to help finish our logging page here? So let's head back to Fig MMA. Now I want to show you one really cool resource is for icons that you can get. Um, there's a website called flat icon dot com. I use it for a lot of my projects. As you can see here, they have almost three million vector icons that you can use in multiple formats. PNG SPG Photo shop on. This is great because they're completely free to use, although they do ask you to give credit to the artist now, they do have some pricing options where you can subscribe and not have to credit them, and you get access to a lot more icons as well. Cool. So using flat icon, I've downloaded some icons for the log in page. So why don't we go ahead and find them in? Our resource is for this project going to icons, and then you'll see the log in page here, so they are in SPG format now. You can definitely import PNG and J pick icons into your project is low, Um, although it's not recommended because you don't get much control over, for example, the fill or being able to even make tweaks to the icons. The benefit of an SVG type of icon is that you can resize them without having to worry about the icons getting pixelated. Unlike a PNG icon, which is essentially rast arised a meaning that it has a standard within height. And if you try to make a Nikon larger than that resolution, it will start to get pixellated. So I recommend using SPG, and that's where we're gonna be doing for this project as well. Um, so last lesson we dragged images into our fig MMA. We can do the same thing here, but just for the sake of it, I'm going to show you another method that you can insert images as well, which is pretty neat. It works pretty good for icons is low. Now let's switch back into Fig Mahir. You can also place images into your fig my files by going up here to the shape tools and then you see there's place image. Or alternatively, you can hit shift command K or shift control K and Windows, and it will go ahead and open a file browser for you that you can use. So here I see how my three icon So what? We go ahead and just select them all on a quick open. Now the place image tool gives you a bunch of options. You can either go ahead and just place all and it would place all the images here, um, into my frame. Or I can alternately drag and place them as I go long social, You how that works. So feel free to do that by just dragging and again hold shift to constrain the proportions . And then one need thing you can do is actually hold space so that while you're placing your icon, you can actually move them around. So why don't we just, um, put that here and then let's go ahead and draw while holding shift again. So this one looks like it's a password one. So it's gonna go here. We're gonna resize and move these after it's just to get an idea again. I'm gonna hold shift and do the email. One here is low. I just let go. And there you have it. Your three icons were not added, and so I think we're ready to go ahead and make some two weeks to both those icons as well as other stuff within our lugging page. So let's work from up here and go down first thing. Let's go and select our tutorial icon here and then go ahead. Over here, you'll see there's no Phil but rather selection colors. And that's because when you have a group which by default and S V. G. Ah, will be a group of vectors here inside your layers panel. That's why instead of the fill, it will show up as selection colors. It will do the same thing, though, so go ahead and select that and then give it a fill or a selection color off white. Let's go ahead and resize this to maybe 35 year. I think that looks good. I'm gonna go ahead and add a guide. That's, Ah, horizontal guide. Here you can do, like 36. Just go ahead and please my image in the corner of their That looks good. Now let's go down. Let's zoom in. Let's go ahead and double click into here. You might notice that when you have something group, you will have to double click into it to start changing elements inside of a group. So over here I have my whole group. But if I want to change something with the email text, I have to double click into here and then select that email text. So I'm gonna do that. Let's go ahead and resize this to 25 maybe even 22. Now this icon here is actually not part of the group yet eso to do that. Go ahead and drag this icon for the email into the email group here, and so now I can actually go ahead and hold shift and select that together and even the email background or the email text field and unused the vertical line centers. And that will just go ahead and center everything for me. I'm gonna change the text here to 14 and go ahead and change the color, too. A lighter color because that's the placeholder text. It's not the actual email. I'm gonna use the color A for A for a four so you can pop this code into your field here, and that will give you the same color if you want to use that, and then let's just finally space things properly here. Let's try to do 15 here and then to 15. They're actually let's do 10 there. That looks good. Let's do the same thing here. Let's first place this inside the password group. Make sure you put it inside the group and not outside. So to make sure that, for example, this layer is inside the group, there should be a little indentation here. If you miss it by accident, you can just go ahead and, um, hover over on top of the group, and then it will definitely place it inside that group. It's just double quick in here. Change this to 25 as well, or we had a 22. Let's go ahead and select everything here center of them. I just moved this until we have Sina's this apply fill of a four a 484 Just move this so that it's matching with this position in the position of the email. Looks like I forgot to change my text to 14. And again, I'm gonna center that again because when you do change the text size, it will change the vertical alignment. So make sure you always use that Lyman Tools to re just things. If they get moved around, let's go in here with change. This to 14 is low. Let's go down here. Let's go ahead and capitalize this or text over here. And to do that, go to the text section off the of your properties. Click the three dots and here in your notice, you have a bunch of different customization you can make. I was interested in the letter case here to make the case uppercase, and so now it's uppercase. Go ahead and change the filled to white, and then I'm going to select the two lines and actually bring their pay city down to Let's try 50%. We can even do something like 35. We wanted to definitely be visible, but at the same time subtle. I think that's good. Maybe just bump text size of this to also 14. Stay consistent. Let's go ahead and select everything here and also do their line. That looks good. And then that's resize piece to 14 and 14 here. Lastly, let's make sure that again we align things properly. I forgot to do this for some of the buttons, so go back in. Just make sure everything is aligned critically, and I think that looks good here. Um, so if you go back to the sketch here, we're almost done. We just need a terms button over here or a terms section. So we're just gonna do a text instead of another button, something. We already have too many buttons here. So let's do Let's go ahead and just Presti open a text year and right Terms of service. Go ahead and change that to white here and looks like I completely messed up the casing here. So there we go, terms of service, and we can even do and privacy policy. That's typically what you see to make certain parts of the text bold. Just select the part that you want bold and then go ahead and use command. Be as a shortcut, or you can actually access it from here as well and make it bold. Let's do the same thing here with terms of service. Make it bold. Looks good. Let's make sure it's centered. Okay, that's centered. And let's actually make sure we maintain a spacing off. 36 from the bottom is low. So now if I zoom out, you'll see we're almost done. Next lesson. We're gonna come back and talk about colors and at some colors into year because, as you can see, we don't have any colors except for the logo eso. We'll try to use the local color, which is an orange, to pick a nice color scheme for our up in the next lesson. 7. Choosing a Color Scheme: all right. So let's jump into picking a color scheme for our app because, as I mentioned the very beginning of the section Ah, the client hasn't specified a color scheme, so we're gonna help them build one in this lesson and then learn a little bit more about color schemes and color styles in fig MMA. Cool. So included in the resource is of this lesson will be a little text filed that will give you a template that I put together for our color scheme. We're going to use that in just a second. Some good color reads. So go ahead and give these articles or read. If you want to learn more about colors and how to apply them in your project, and this is also really cool. There's a bunch of color scheme. Resource is so all these websites help you build a color scheme for your project. Um, I know I keep saying color scheme, and you might not know exactly what color scheme is, but essentially, colors came. It's kind of like a pallets, right? When you're an artist, you have a palette of different colors that you use in your design or in your art, so it's the same thing. There's only so many colors that we can use and that look good together. So that's what a color scheme is, a bunch of colors that we can use for a project on. We stick to them and create consistency with them and make sure that there's also contrast there. So it looks good and it's legible and all of that. So let's go ahead and open this second resource here. I really like it. It will help us come up with a color scheme for our project, so I just opened it up. Up here. It's called colors, since Bo. Essentially, it has a bunch of different color palettes or color schemes that you can use for your projects. There's some really nice ones in here, really crisp and sharp, Um, and there's other ones that are kind of more light, depending on the project that you're using, can definitely get inspiration here, or even use thes same pallets in your projects. They have a bunch of other stuff. Inspiration, um, freebies, brand colors. If you want to see your favorite brands color scheme and even some really cool Grady Antzas , well, uh, we're gonna go back into the color palette tap. Let's go ahead and pick a color scheme that makes sense for our project, since clean kangaroo has to do with cleaning water, you know? So, um, those colors air usually associated with the color blue. Um, now I see in the project here. Ah, their logo is already orange. So blue and orange will go really well together. Um, yes. A good example of that could be here where we have kind of a blue and orange. I think what I'm gonna do is I'm gonna use this palette here, but then go ahead and add some custom colors to it as well. So let's go ahead and copy some of the colors. But before we do that, I'm gonna go ahead and open this link that I told you about. Just go ahead and open that link here. Issued lead you right to this file where I put together a color scheme template that you can use. It has access you have access to those links. Here is well, if you can open that up right now, we were just on the second website here really quickly. This is essentially your color palette that you're going to use for your project. We have a primary color that's usually the brand color, secondary color and and then to accent colors that will use but not as frequently as a secondary in primary colors. And then we can do a primary and secondary text colors as well. So for now, let's go ahead and just copy this over. Let's select everything here. Everything is already inside of a group, which is nice. While having this groups like that go ahead and hit command, see or control. See on Windows on, then head on over to your own project. I'm going to just paste it right on top of my log in page for now, but later will organize this into another section. I'm just going to move it right here for now. Let's just remove the templates and the text here, and then let's go ahead and assign some colors to it. So first color I'm gonna assign ah will probably be a color that all used as a secondary color. So let's go ahead and double quick into here. Also another way, if you have a group like this, and you want to select Ah, an object inside of it without having to double click into it. You can just hold command and then go ahead and select an object inside. That's a pretty neat way to select things instead of having to double quick all the time. So now I have this selected, Um, What I'm trying to do here is assigned this kind of orange color, or I see it's got multiple orange colors, so we're gonna use the color over here to fill this break angle. The easiest way to do so is to hold control, see, and then you'll get a little color picker that you can even see on the top right corner of your screen, which will let you choose it. Fills. Let's go down here. Um, now you'll notice there's multiple oranges here that we can choose from. So let's go ahead and just go over here where the kangaroo's legs are and choose this orange. How cool is that? Another way that you can also add fill while using a color picker or on I drop picker as to open it up. And then using this, I dropped tool from here as well. So let's go back to colors. Inspo. Um, and I really like thes shades of blue here, someone to use this for the rest of my color palette. So let's do copy over here by just clicking on the blue and then let's go over to the primary again. I have that selected using command on and choose this right angle, and over here you'll see right next to your fill color. There's a little text that's essentially the hex code of that color, so right now it's white and white has a hex code of six efs. So if you want to go ahead and replace this using command V or control via on Windows on press enter, that will pace that color right in there for you. I'm going to actually change this text also just that we can use it. And let's say there's a developer who wants to use this color. You know what hex code it represents. Let's do the same thing for the orange color. Let's just go ahead and copy this hex code to input into here. Let's go back to colors. Inspo, take this blue Here, maybe, and added to this field right here and also text andan. Lastly, I want to do a light color that we can use for maybe the background of certain parts of the app. Just double click into here again and then change this as well. And there we have it. We have, ah, nice color palette that we can use for our project. Um, we will assign the primary Texan secondary text colors later, but for now, let's just go ahead and focus on applying these colors. 8. Setting Up Color Styles: all right. So now that we've created our color scheme for up, you want to go ahead and actually add the's colors to what's called the color style, which lets us reuse the same colors throughout our project so that we can easily change these colors if we decide to in the future and not have to change all the objects associated with that color. So let's go ahead and select the first color here. I'm gonna hold command here and click on it where it says, Phil, you're gonna go over here to where this therefore dot icon over here called Style. Go ahead and click on it and I go ahead and create a style using the plus icon and name it Primary and I go ahead and create style. And as you can see, I have this color style of blue. Let's add the rest of the colors here as well. We're gonna use command quick on this orange. Now go ahead to the style Here, Create style secondary. Same thing for this accent color. Great style accent. One. You get the idea by now accent to and there you have it. I have this color scheme now in here. So now how do we apply that into our buttons? Let's go down to our log in page. Let's go ahead and use command and click on the background of this here. Otherwise, if you select the whole group, you will have to add it the color here in the selection colors. So both work. Let's go ahead and just actually choose the whole group. Go down to the selection colors, and then from here you'll see styles. So go ahead and open the style. And there you have it. You have yourselves here that you can use on that button. Um, I think here I would have used the primary button. Let's go ahead and change the text color toe white down here. And then let's go down to our next button over here. Sign up with email and then over here again. But select a style off primary. Same thing for the text white for the Senate with Google Button. Um, I'm gonna go ahead and actually assign a fill of just white. I think that looks pretty good. Let's go ahead and apply the same style to our icons here to go ahead and double click. Make sure you select the entire frame or the group. Here, let me go ahead and change the selection color using color style to the primary. Same thing for the email. Primary. Now this is where the magic happens. So now let's say all of a sudden you change your mind and you want to go with a purple color. You can simply choose one of the elements using that color style head on over here, go ahead and click on it and then choose edit style and you can go ahead and now change this color. Eso Let's make it maybe a purple color. Now, as you can see, everything in the project using that color is changing, and you can imagine how cool that would be if I had multiple pages designed here. But even here within this one group, that's super cool. We can go ahead and just play around with this Ah, and change our primary color if we choose to. But I'm actually going to just do undo and go back to our main color here and there we have it. That's color styles for you. I think we're pretty much done here I'm just gonna make couple touches here to just improve this a little bit full along, if you like. Otherwise, in the next lesson, you can also download the fig my fell that we have up until here and start with that. But let's go ahead here and to improve it. Let's just zoom in here. Bring this button down a little bit. Let's go ahead and increased the spacing between them to five, and we actually forgot to add something here. There's usually forgot password button I'm gonna add as a text. Give it a color white and changed the thickness tube. Hold on. Let's just go ahead and place that over here that looks good. I'm going to move this divider up a little bit until the have. Maybe it's spacing off. Let's try to do 55 pixels here, and then let's bump these up and try to get the scene. I'm using all here again to see the spacing between different objects with the ones that I have selected. That's good. Let's add a little bit more spacing between these and make it five as well. Let's zoom out. And I think that looks a lot cleaner now. Cool. So now we have a completed lugging page. I think it looks pretty nice. And I think now we're ready to start getting into our tutorial page, uh, and designed that together. 9. The Tutorial Page: All right, so we have our log in page. Now on. Let's get into designing our tutorial page. Let's go back to my sketch just to see what we have over here. Um, So I was thinking we should do a blur background of this screen right here. So when the user taps on the tutorial, it would just go ahead and blur the background of here and then a little pop up here with the title and the body text over here. Maybe a little vector that we can use to show that step. I will be pretty cool. So let's get starting to designing that. So in this lesson, we're gonna play around with effects to add kind of a background blur to this page and then build on top of that. Ah. So what we need to do is actually copy all the elements in here into our tutorial as well, and you'll see why in a second, let's go ahead, toe are log and frame here, Um, and actually, go ahead and just select everything here. Go ahead and use command. See or control. See, to copy, head on over to your editorial page and make sure you have the editorial page selected and then do Command V and then go ahead and actually use command G to group all that together into one element. This way we just have a simple group over here. I'm gonna lock it so I don't accidentally move things around. And now go ahead and create a rectangle by pressing the R two from the top corner over here all the way down to the bottom. So once you have that rectangle here, let's go ahead and change the Phil to black. And then let's change the opacity to, um, let's do think 55% looks good. So now go over to effects, create a new effect by pressing the plus sign here and then click the drop shadow and change that to a background blur. It's now, as you can see, it adds a nice background blur to my right angle here on. So what that does is that it blurs everything underneath it because this layers on top of the whole group that we created from essentially this page here that just went ahead and blew it everything underneath that rectangle. If he plays things on top of this rectangle. It won't be blurred, which is what we want. You continue the blurriness of your background blur by clicking this icon over here and changing the number here. So right now it's four, but we can do 10 new 15 through on more blur. I think for us I'm going to do eight for now, I think eight work, Um, or even six. Now let's go ahead and create a rectangle for the background of my tutorial. That's our let's drag one being based on my sketch. Something like this would look good. Just like over there. Used the line tool here to make sure it's centered. Let's change the fill color to White. Let's go ahead and round the borders to Let's do 25 pixels thing that looks good and no, we need to texts in here, one for the titles. Let's do T and type and title when we set the font here to 22. Let's go ahead and just select both of these and use that Lyman tool. Let's go ahead and just duplicate this tax holding old do body here and let's go ahead and change the bull to a regular and phone size of 14. Now you'll notice that if I start typing here, type something random here, the text will keep going on and on and on. I was not what we want for our tutorial for tutorial. We want a little paragraph type of text here. So this is where your texts bounding box comes into place. If you re sized or text here now, you can choose what the width of it will be. And then now you can go ahead and just center that here just again, make sure all these air center together. Now if I add more text into here, there will be bound by that box. So, in our resource is we have this app. Notes. Start txt. Go ahead and open that up. You'll notice that we have tutorial steps in here, so the first steps text is over here. So let's go ahead and just copy that over. And to hear that looks a little bit better. Let's go ahead and just resize that and again, make sure it's centered. Let's go ahead and do an align center for the text. I think we can do phone size of 16 here to make it look a little bit better. And for the title, let's go ahead and just set it to browse. Let's go ahead and actually group this whole thing together by selecting everything here. Command G. Make sure it's centered again. Let's go ahead and bring these a little bit down. Let's go ahead and add another rectangle for our but in here 2 55 for the height and he that looks good. I just want to make sure that this also matches that with of my button. I'm gonna change my button Phil to by using styles, I'm gonna change the button background to the blue. Now let's go ahead and add a border radius of eight here and then go ahead and add a text inside. For next, Change the color to whites and just go ahead and center of these together. Group them together and let's just go inside here and center the text here. That looks good. Now let's go ahead and add some vector icons. So again, in the resource is if you go to icons and go into tutorial here, you'll see we have three vectors that we can use for our steps, Um, so let's go ahead and actually just dragged them all into my figment file here. If you go back figments, place them all side by side. Which school? Let's go ahead and first resize that has her huge go back in here. I think you do a little bit bigger than that. Let's just go ahead and move these ones out of the way for now. Now, keep in mind vector icons like SV G's, um, show up as frames in your project, so make sure you treat it as a frame when you're moving around. So let's go ahead and find this frame for this icon here and actually drag it inside of our group here. So if I scroll down all see Tutorial and then this is our group, just please set inside of here. And then while holding shift, I'm gonna center both of them. I'm gonna make sure that's I think we can add a little bit more spacing toe our text here, and I think that's starting to look good. So what do we go ahead and actually add styling to the icon here? By choosing or color styles and maybe choosing the secondary option and then for our title or the text over here. Changing does, too. The blue. Maybe. I think we can even make this a little bit bigger. Let's try 24 and then go ahead and select these two together to center them and make sure everything here is centered as well. It looks like it is so there you have it. That's our tutorial to create the last two steps when we go ahead and select this whole frame here and do command D twice to duplicate it twice. And then let's just zoom out just like these two frames and just move them right underneath and doing the same thing over here. So then let's go ahead and rename this 12 tutorial. Step two renamed this wanted tutorial Step three. And then, of course, let's do tutorial. Step one. Now we're gonna go ahead and just quickly change the content in here. So let's do to Let's go back to our text file here and looks like this one's about request . Paste that text into here, and then let's go ahead and used Command X or control Exxon windows to cut that icon out of there and replace it with this one. I'm just gonna click where it is and then go ahead and just paced right there using Command V or Control V. Now it looks like it did put this inside of the frame of the other one. So let's go ahead and dry, get outside of the frame of the other icon and then to lead the other icon. And we still do want to add Apply the orange Phil, and that looks good for a step, too. Next one is our Step three. Go back here again, renamed this one to clean votes. Go ahead and paste that in here. Let's select everything and the text here and just center that along. And then, of course, let's go to our last Lecter here and using Command X again, paste that into here and then just making sure that's outside of this, deleting the shop director and then changing the style, too. Storage. Let's go ahead and change the text here to done because at this point the users completed the tutorial, so they're gonna be done with it. Story away. So there we have it. That sartorial step one Step two and even Step three 10. Components: All right, so in this lesson, we're gonna talk about something very useful in fig MMA cult components. So so far in our tutorial pages, we've created multiple cards essentially for each step of the tutorial, right, as the user goes through from step number one all the way through Step number three. The view, this little tutorial card. Um, from where they can get their information about how the APP works. Now let's say I realize that I want to go ahead and change the rounded nous of this background over here. So of course you can go over here and let's say from 25 Begin said that 15. But now watch what happens. Our tutorial, step number two and step number three still have a corner radius of 25. That's because there's really no relation between each of these cards here, but what components allow us to do? It's actually go ahead and create one instance of these cards or really anything that's gonna have a very similar style or really similar configuration, just like we do here, right, even though the text for every card is different. But generally we have a lot more going on here in terms of styling or how the elements are placed. And unless we go and make that change to each screen individually, but we won't be able to get it otherwise. So that's where components come into play. I'm going to go ahead and undo that border radius here. Just make sure it's 25 again. There we go, and now we're gonna convert this into a component, and then you'll see how it's useful. So again, components can be any part of the design that you want to duplicate wall, maintaining a certain style or certain characteristic so that if at any point you decided to change that changed the style, changed the characteristics off that component, you can do so in one place and not have to do it in multiple places. If you watched the lesson where we did the color styles, it's very similar to color styles where if he just make that one change here, all of our buttons and elements using that color style will change instead of us having to go in one by one and changing them. So let's go ahead and jump in and actually make a component so start with the card over here on tutorial. Step number one. If you haven't been following along, be sure to go to the resource is folder here, which you can get again from the beginning of this section on and then go up to go into mockups and find the lesson that you are on. And you can go ahead and open the file and to continue along with us. Otherwise, let's jump in. I'm just gonna go ahead and zoom into here. Let's go ahead and select this group. And as you might remember, that group contains the text here. Little title A. Zola's the Background. Now I just noticed that my button and my icon here, my vector here are improperly inside of the group. So let's go ahead over here to the layers panel, Um, and just go ahead. And firstly, let's group the next button together. The rectangle is always the text using command G. Let's name this next button, and then we have the vector here. Let's go ahead and just select these two. For some reason, they've been grouped together, but we want to actually go ahead and just separate them and put them in this group. There we go. And now we have everything in one group. I'm just gonna go ahead and re order a couple of things. Bring this browse all the way up here, bring this up here. Just said there in kind of a nice order from top to bottom. I think that looks good. So now let's go ahead and select the whole group altogether. Make sure you have the group selected with every element inside. Go all the way up here where it says create component. Alternatively, you can do option Command K or Ault Control K, and that will do the same thing. And so now you'll see on my layers panel, this group all of a sudden has a new icon, and even the text is purple. And so that's telling us that this is now a component. So now what I'm gonna do is go ahead and holds Ault and go ahead and drag another copy into this page. That tutorial Step number two page now, because I've created my component from this group here. This is not my master component. What I've done now is I've gone ahead and created an instance from that master component, meaning that this group here now belongs to the properties and the styling and everything here. So let's head on over Torched oral Step two Page. Um, I'm just going to go ahead and bring this outside. This is the card that was originally on here. I'm going to bring this out as well. Just going to reorder that. So it's on top. Um, OK, so now what we want to do is insert this text to go into here Control. See, to copy Pace that under same thing for the text down here Now for the image here, I'm going to do something different because this is now an instance of that master component. I can't go ahead and just bring elements inside of here, but I can definitely add stuff here and then choose to hide or run hide the things that I want to show in each instance of it. So let's go ahead and double click into here to get our vector icon over here. I'm just gonna do copy. Let's go up here to our master component here and just paste that in now. I'm just going to go ahead and make sure I align it with my other icon here. There we go. Let's go all the way down and do the same thing with this iPhone here he was in command. See, go up here and then let's go ahead and peace that in there. Looks like I I certainly inserted them into the other vectors frames to make sure that you have your frames independent of each other for the iPhones here. And so now what we can do here. Let's go ahead and just get rid of this. Since we're done with it and just center this long, I think that's centered. Let's go ahead and off the center along the master component on this page, or you can just go over here and press the horizontal and vertical centers, and that will do the same thing. And let's go ahead and copy this. Go ahead and select this tutorial page before we pasted in here. Let's go ahead and let's just drag this out of here and drag these swell my group things a little bit weirdly in my tutorial card. Let's go ahead and select a territorial Step three and then go ahead and paste so Now we have another one. Let's go ahead and copy the text here and to hear and this one into here and you'll notice this one's not centered. So first, let's go ahead and delete this group here and go all the way up to our master component here. What we're gonna do is just go ahead and stretch that text all the way through to match our body texts and then go ahead and click text line center. So now if I go down here, that should look good. Now, what about the icons over here? Well, here's what we're gonna do. We're going to double click into here. Remember? Although this is an instance of a component, you still have control over some of the things such as what you show and what you hide in here. Go ahead and select this group and go where we have towels. We have washing machine and we have the shop icon. So I'm going to go ahead and hide the shop icon and the washing machine. So we just have the towels here, the clean towels. Let's go up here double quick into here and do the exact same thing and this one, though, let's go ahead and hide the towel a shop, and then we just have the washing machine. And last but not least up here. Now, one thing I do want to mention for this card here because this is the massive component. If I make any change to it, even if I hide those extra icons in here, um, it will actually go ahead and remove it from my other pages as well. So that's not what we want here. Typically, when you create components, you want to go ahead and place your components and a separate place somewhere different somewhere separate, so that you can reuse it unedited from somewhere else. So what do we go ahead and drag this outside and just place it here for now? And I know looks a little bit on organized, and the next lesson we're gonna come back and clean that up before. Now, let's go ahead and press command, see select. Our Pretoria will frame here and do Command V. And so now I have another instance of that master component. Now, if I go in here and then hide my towels on my washing machine, I just have my shop icon, which is exactly what we want. So why did we just do that there? I know we got exactly the same result as before. Now let me explain what's different if you go up to your master component here on, you can identify a master component from their instances by actually looking at the symbol here. Master Component has this little diamond icon right beside the name. If I go down here. Since this is an instance of that master component, I can see it doesn't have that for small diamond icon. It just has one empty one. So that tells me that this is an instance of that master component. So now if I go up here and double click into my master components until I select this rectangle here No, let's say I want to change my rounded nous to zero just as an example here. Now, if I go down here to my step number one he see has a corner radius of zero. Same thing for step number two and same thing for step number three. That's pretty cool right now. If I go back here and use command, click onto my background and give it aboard a radius of 20. The same thing will be applied to all the other instances. Let's say I decided now to actually align all my text to the left here. So if I select my text and do a line left in here, just gonna make sure these have the same size. Okay, that's good. I'm just going to select them and make sure they're center as well. It looks like they are. So now if I go down here, you'll see my text has changed throughout all my instances. And how cool is that? Instead of having to make a change on all my groups here Now, I'm just making a change to the master component there. So now I'm just going to go ahead and select both text here and center them again. Now, if I zoom out, you'll see the changes have been made Here is well, so let's go ahead and also rename this group to to say, tutorial card just so that we don't We know exactly what this master component represents. So now if I go down here and let's say for some reason in my step one or my step one frame here. I want to go ahead and use this as a completely separate group with no relation to that master components, although that's where we got it from. But let's say you want to go ahead and completely get rid of that relation there. So all you have to do is just go over to the properties panel here and then where it says tutorial card. Go ahead and select that. And then and then you can go ahead and select attach instance. And so this is now a separate group were actually even a separate frame. If I go to my layers panel you see now, it doesn't have the same icon that it had before here. So now if I just go ahead and jump in here and let's just say move these around and let's see to lead this icon here, this will have no relation to the master component nor any of the other instances. So this is now completely separate, and whatever we do to it will just remain on this page on within this frame along. So I'm just gonna go ahead and hit command Z Bunch times two go back to having it as an instance, and you see now it's an instance again because has has a little purple border as Bella's ah , my layers panel, it's s tutorial card and has a little icon that we had before. So now I know this is an instance of that component, so feel free to take advantage of components wherever you can. Ah, whenever you see you have multiple objects that are related or look the same, you probably can put it in a master component. And so now I want to give you a little exercise to actually go ahead and put our buttons in a separate component as well. On the reason is, as you've noticed, Ah, lot of the buttons that were using actually have very similar styling. And again, if I decide to change the log in button here to be bold, my other buttons will not use that property because I'm only changing my logging, but in here. But typically we want our buttons to look the same or very similar with just small adjustments, such as a background color of the text color. So feel free to do this exercise and create a master component from your buttons on. Maybe place them outside of your design over here and then go ahead and create instances wherever you see we have that button used. One thing I do want to mention before you jump into that exercise is that once you create a master component here, be sure to make an instance and put it into here instead of, ah, your separate cards. Because again, this is a component. This is an instance of that component. So whatever change you want to make here, especially in terms of what you want to add or remove to this whole group here, you'd want to do it inside of the master component. If you don't want to do this exercise, feel free to skip it and then just jump into the next video where we're gonna actually do it together and learn it a little bit more about components. Because their super powerful 11. Button Components: All right, so let's go ahead and jump into making our buttons into components. So what we're gonna do here is what We're going to use one of these buttons to create master component and then create instances of it everywhere were using the button. So let's go ahead and use the option he or the old key and drag one copy up here. Let's just go ahead and just drag it here and again. We can create components by coming up here and clicking. Create components. And so now that's but in component that we have. It's called the log in button right now, because that's the name that we had for it before. But let's go ahead and just He changed this to button. And now what I'm gonna do is I'm gonna go ahead and select my butt and component here. Use command. See, I'm going to select log in here the frame and I'm just gonna go ahead and paste it here. Let's go ahead and just align that with where we had our original. But in here and then, let's go ahead and just find that log in button in our frames and deleted and I'm just gonna go ahead and bring this down to right below my passport but in and what We're in here . Let's go ahead and just move this forgot password right after password and the terms of service all the way down, right on top of my background, just going to reorganize some of our layers here. You don't have to do this, but I always like to keep my layers organized here. So now this is an instance of that button. What we can do here. We can go ahead and use the option key again to create another instance. And let's go ahead and change the name of this one or the text for this one to sign up with email just like we have down here. Let's go ahead and align that slow using the arrow keys to make sure we got it right. And then let's go ahead. And similarly elite are sign up but in here and moved down this sign up. But in here, right here, let's go ahead and do the same for this last button here. This time I'm gonna use command D and then do sign up. It's actually do sign in with this Google? No, I had a white background here before. So to change my color, I can still go ahead and select this. And right now it has primary colors selected. But if you want to change that, you can just go ahead and do detached style that will let you choose your own color. And then, of course, I need to go down here to my font and or my text here and change it to black just like we had it before on. And then, of course, let's go ahead and to lead it, delete the other copy that we had right below it delete and this collapse this and bring them on. Bring it right below the other one. So the order makes sense and there we go. So now if I go to my master But in component here, if I go ahead and decide to using command be I decide to bold in the text. You see, my other buttons have a bull text. Now if I go in here, if I go back in here and double click and to choose my text and let's say I choose the size of 16 and go back. You see my size have increase here. So for now, we're gonna go ahead and actually on bold it. So we're gonna go ahead and actually select our text here at maybe do a medium, medium fart way here and then go ahead and CR change over there. Cool. So now over here, we're good. We have our buttons and these are all instances. One thing I want to show you here is that we made a change to our signing with Google here . So what we actually did over here is that we override it that property of that background color here from the master components, which is blue. Ah, and then we change it to the white. So let's say at some point I decided to make this button look like the rest. Um, if I want to change everything altogether, I can go ahead and selected, go to my panel right here, and then do reset overrides from here. And that will give me exactly what that master component looked like. Then I can go ahead and change the text here. So let's commands that here. Let's say you only want to change the Phil back to the original color. So then you can double quick into here and select your rectangle here, Make sure you have it selected, and I do the same thing. But this time, instead of recent overrides, you can do reset, Phil. And so that will just get to fill that we had from the master components. Otherwise, you can go ahead and just leave that like this. Ah, which is the overridden properties for this button? 12. Using Pages to Organize: we're gonna do to more really quick things here just to wrap components up. We're gonna go ahead and so over here. As you can see, it's getting a little bit messy. Typically, we wanna have our components and things. Such a scholar's games on a separate page and our designs so doesn't kind of make our workspace busy here. So So Figure lets you create multiple pages inside of your file, but just going up here to where it says Page one Right now, this is currently the page that we're on. It's called Page One, um, waken. Go ahead and rename it to. But if you mark ups and let's go ahead and create another page by quick in the Plus icon here and doing maybe components and then go ahead and click Plus and let's just do another one for styles. So let's go ahead into our mock up. Let's go ahead and just select the color scheme group here and use Command X. Go back to styles must be set in here. Cool. And then now let's go back to mark ups. Select the two components. Be out of here. Use Command X again to cut then go here to our components page and paste them here. There we go. Cool. So now I want to do another thing here with the button components. Typically, buttons have multiple states, so we have, ah, button that might be disabled. So this can tell the user that right now they can't use that button on. And then we have a button, usually in an enabled state. So button like this usually tells the user that it's enabled. But what if you want to create another type of button that tells users at the button is disabled? So to do that, we're gonna go ahead and use salt and dragon instance away from the component here, and then, actually, we're gonna We're gonna turn this instance into a component itself by creating a component and the layers here. Let's go ahead and rename this button to disabled and the other one to enabled. So make sure to follow this convention here, but in forward slash enabled and then button forward sash disabled for the bottom one here . So let's go ahead and select this disabled. But in here, let's go ahead and first detached the style here, and then change the fill of the button to maybe you nice? Um, kind of gray here would work. Let's do, um, this color right here, a nine, a nine, a nine and one last thing I'm gonna quickly doing here. I'm gonna go ahead and just change the text here. And as you can see now, it's changed in the other button as well. On The reason for that is that we've turned the instance and instance of this button into a component. So it it's still related to this button and the changes that we make to it. So again make her this one's called button slash forward slash disabled on the other one. But in slash enabled, I'll show you in a second. Why, that's important. So now if you go back to the two year Michael Page here, that looks a lot cleaner. By the way, Now you'll see my text here has changed back to button. We need to change this to law again. That's because we didn't override the text to law again. We just used whatever the component had. So when we changed it to, but it changed. The text here is well, but the other one stayed the same because we did make that override for the text here. Now, if I select a button and go to the Instance panel here, I could actually go ahead and choose disabled or enabled. How cool is that? We forgot to do one last thing here, and that has to do with the tutorial card here. Ah, and that's to assign the same button to it as well. So let's go back to components and that Let's go ahead and copy this component and then go ahead inside of a tutorial card paste. And so now we have an instance of that button. So we're just going to go ahead and overwrite they with here 2 to 53 pixels as well. And go ahead and put this on top of the other one. And let's go ahead and delete the next button from our component here. And then before we move forward, let's do next here just because most of my components will use a next button. Except for the very last page of the tutorial, we're just gonna change that to done. Let's do that by going back to mock ups and then if I scroll down to the very last page. I can override this buttons text by doing by clicking into it and then typing done. So now you see, we have exactly what we want. Now, I know we learned a lot here today, but these are all very important concepts and figment. Very, very powerful and useful tools. And I really want you to get an understanding and really take advantage of it in your own projects. I think we're ready to move on to our payment page on, so we'll do that in the next lesson. 13. Using Variants to Create Component Groups: All right, so before we jump into our payment PJ, I do want to show you two quick things that fema recently updated, but they're super useful. So the first thing is called swapping instances. So if I go ahead and select one of the incidences of the login button we have over here, for example, on the right side. Now you can see that there's a new way that you can actually go ahead and change or swap the instance that you want. So I can swap it with a disabled version of I want, or I can go ahead and swap it back to the neighborhood one. And if I have multiple buttons or multiple components, I can easily find them through here and even use a search bar over here. Now of course, this will be much more useful once you have multiple variations of different buttons or multiple buttons or multiple components that you might want to swap width. Because right now we only have coupled components. Might not be as useful, but it will definitely get more useful as you start adding more components, more different variations of the buttons and so on. The other really cool thing that I want to show you that fig more recently announced it's called variance. So I'm going to really quickly go through thickness article here on what variance does. And then we're gonna go ahead and actually apply it to our own components and our own designs. So variance is a great way to be able to create multiple versions of the same component, such as the example here that they have in the image. You can actually go head and create different versions of the buttons and be able to actually switch them or customize them in your instances very fast and quickly. And I'll show you an example of that in just a second. And so as you can see over here in this image, they've created multiple versions of the same buttons. Some of them with ICANN, Some of them without. They have secondary versions with different colors, different sizes as or they've used all these different properties, which you can also see on the right panel side over here, to be able to create different versions of their buttons. But this will make a lot more sense once we actually apply it to our own project. So why don't we switch over to FISMA and go to our components tab over here. Alright, so back here in our Components tab over here with the page, we see two different versions of the buttons that we created. One of them called button and such enabled and then the other one, button slash disabled. And that's to easily be able to identify which state of the button we want. So we already kinda use the same idea as what variant group provides. But the only difference or the benefit here of using variance is that it's a lot easier to use on the instance side. And also if you have developers working with you or using your designs, there'll be able to utilize this better. And so I'll show you that in a second. So in order to create a variant, you first need to components, which we already have over here. So let's go ahead and select both of them are here. And now you'll see this new option called combiners variants on the side over here. So we're gonna go ahead and click on this. And we all notice back here is at most pleased our two button components that we had inside of this button variant. And you can see the name over here because we were using that naming convention, FISMA was smart enough to actually go head and turn those into properties of that button. So we have property one. So because there is no name attached to that property, fame was just used a generic name, property one over here. And then go ahead and use the disabled and enabled version. So if I click on this one, you'll see property one is set to enabled. And for this one property one is set to disable. First thing I wanna do here is select the entire variant group here. And we'll go ahead and just click on property one to go ahead and change the name to maybe state. So this is just something that makes more sense. Now we have a property called state, which can be disabled or enabled. Now of course, we can go ahead and actually create more states if you want. So to do that, we can go ahead and do more options and then go ahead and add a new variant. So this will go ahead and create another variant and go ahead and use state three, but we can go ahead and name it what we want. So in our case, why don't we go ahead and do pressed. And we can even go ahead and move it up here if you want, and move this one down. So now we have an enabled state, oppressed state and a disabled state button. And we want to go ahead and actually create something different over here for our prestige. And so why don't we go ahead and go down to the selection color here, detach the style, and maybe go with a button that's slightly darker. This is just so that when the user taps on that button, it turns into this press state. So now let's say we want another property and we're going to actually go ahead and create a small version of our button. So let's go ahead and click on the button, varying group over here again. Go to more options, and go ahead and click on add new property as a right below state. Now we have a new property. It will ask us to give it a name. So in our case, we'll go ahead and do size. And the default value for a new property wall is be default. So we'll go ahead and actually change that to small and large in just a second. And do that the easiest way is to go ahead and just select these three buttons while holding down Shift. And we'll go ahead and find the size property over here. Go ahead and click on this little error here, and go Add New. And I'll, let's go ahead and rename this new value too large. Now if we want to create a small version of all of these buttons, let's go ahead and just use Command D to duplicate these buttons. And let's go ahead and just drag the size or the width over here to, let's do 150. That's perfect. And so now you guessed that we go over here to the size. Go ahead, click the arrow and do add new and creative value of small. So now as you can see, we have six different types of buttons. We have a large button that has an enabled state, a large button that has a pressed state, and a large button that has a disabled state. And similarly we have a small button that has an enabled state. At disabled small button and oppress small button. So now you're probably asking yourself, how is this any useful? Well, to demonstrate how words, let's switch back over to our mockups page, where we can go ahead over here to our login page or isn't are back here. Let's see. I want to go ahead and change this button instance over here to a small pressed button so I can go ahead and select it. And now on the right panel side over here you see we have our button variant over here. And now we have different properties that we can change. We can change the state to, let's say pressed. We can go ahead and change the size to, let's say, a small one. And so fema automatically changes that to the type of button we want. Let's say you change your mind and you want that. But in to be large. And show the prostate. There you have it. You just have to change one property and you have the button you want. And you can do way more with variants, such as adding icons to your buttons and using that as a state. So for example, they have Icon, false and true here, I hope now you can see how bearings can really help us create different versions of your components and how useful it can be. Just to show you some quick last tips about variants, you can actually go ahead and click on the variant over here and resize the window as you like. And you can even go ahead and move your buttons or your components into different places. And so this way, it might be easier for you or your team. So feel free to organize your variants in a way that makes sense to you and maybe your design or development team. I suggested giving you an exercise and get you familiar with variance. I want you to actually go ahead and create a version of these variants with an image as well. And then go ahead and align the text or the button text that we have to the left side of the button to go ahead and do that for both are large and small variation of the buttons. And then we'll go ahead and do that together in the next lesson. 14. Variants Exercise Solution: So let's go ahead and create a variation of these buttons with icon images inside of them as well. So first I'm gonna go ahead and open my icons folder over here from the resources for this markup. I'm just going to As an example, go ahead and open up the icons and go into login. And just as test, let's go ahead and drag this on envelope dot SVG over here into R sigma. Let's go ahead and along this side. On this side over here, constrained proportions and resize it to 25 pixels. And let's go ahead and just drag that frame over here and just have that over there for us. Now let's go ahead and first step, select everything we have over here. Because what we wanna do is we want to go ahead and add a version of our variance that includes all of these different states sizes. And then now, and now also add a variation that has an icon. So first thing we wanna do is go ahead and click on the buttons. Variation here goes to the side, and let's go ahead and add and new property. We're gonna go ahead and name this with icon like this. So sigma also lets us use binary values inside private properties here as well. So for this over here, we can have two values. One with icon, so a true value And then one false without icon. So to do that, let's go ahead and change this default worn by double-clicking into here to true. So now we have a width icon true value over here. So what we wanna do now is go ahead and select all these buttons over here again, and then go ahead and duplicate is by holding Alt. Make sure while you're duplicating it, you don't go outside of the purple dashed line because then it wouldn't be a very int anymore. All right, so I'm just gonna go ahead and actually resize my variant page over here just so it looks a little bit better and more organized. And then what we wanna do is you want to use these six buttons and add an icon to it and then go ahead and move the text to the left. So here we're just gonna go ahead and select our text here. Now remember to make this quicker, you can always hold command and shift together. So you can select multiple layers inside of other components or other groups to make things a lot faster for us. Then go ahead and use text align left. Simple as that. And now let's go ahead and bring our envelope over here. And then let's go ahead and change the selection color over here to white. Now I'm just gonna go ahead and duplicate this or hold Alt and just drag it into each component. And go ahead and bring it to our small icons over here. While making sure everything is aligned. There we go. Okay, awesome. So now what we wanna do is go ahead and select the bottom six over here that have icons and make sure that that's set to true which it is. And then we're gonna go ahead and select the ones that don't have icons up here, the 64 width icon instead of true, let's go ahead and add new and do false. So now back here, we can go ahead and actually change the state disabled, pressed or enabled. We have the size that we can change to small, large. And now for all of them, we also have an option called width icon. So we can go ahead and add it with ICANN and the beautiful part about it using a true and false values in the properties of the variance is that you get this nice little toggle switch over here that just makes things a little bit neater. So now I can totally have an option with icon. Go ahead and choose a small icon or a small button, and then use a pressed state if I want. Now, as I swish those, I noticed that I have a bit of an alignment issue here. So be sure to always keep your icons and your buttons aligned so they don't look weird in-between variations. So yeah, That's variation for you. Definitely use it in your projects. Now for the rest of this course, I'm going to be using components without variance, but definitely feel free to try using variants as we go along wherever you can. 15. The Payment Page: all right. I think we're ready to jump into our third page here, the payment page. But before we do that, let's take another quick look at our sketch here. So this is the payment page. It's pretty simple. Just has a title here, Um, And then we have the credit card where the user can input their credit card number and all the other info here on, and then they can add the card from here and then go to the next page. Um, it looks pretty straightforward. I don't know about you, but sometimes when I'm trying to design a new project or a new page, it's a little bit hard to know exactly what we want to put on there or to even get some inspiration for a project and our own designs. Of course, we can use similar APs that were designing and play around with those APS, but that could be really tedious. That so? That's why I'm gonna show you this cool website here called patterns. Begin head on over to P double T R N s dot com to access it, and it's super cool. Essentially, it's just, um, kind of like Pinterest but for app design. So it shows you a lot of interesting inspirations that you can take from kind of some of the hot taps on the market. They even have categories. Here's for based on the page that you're designing. You can go in here and get inspiration. Let's go ahead and select this purchase tap here to see some inspiration from different APS and different companies. Um, for example, there's Uber's payment page here. We already have a design in mind in terms of my own sketch here, but let's go ahead and see what we need. So we need a card number. We need an expiry date, cvv country and ZIP code. So I think generally these 1st 3 fields are required and the other ones are kind of optional. But of course, if the client wants us begin, definitely put those in our design in the future as well. But for now, let's focus on just putting these three required fields. So let's go back here to my payments page here and fig MMA. I'm gonna use that text key Ah, and go ahead and just create some notes here. So payments requirements. Let's go ahead and use left the line and just move that here. So we need the credit card number here. We need the cvv and then expiry date. There's a good way to make notes and remember to add things to your page here. So let's go ahead and select our frame here and then first we want Texan here, So let's do text and then let's do at payment. Let's go ahead and select font size of 26 and then just go ahead and move that up here. You want to do 50? I think that looks good for now. Let's use Let's just zoom in here and create a rectangle for a credit card, and I think that's good here. I want to maintain the spacing of 40 from each side. Or let's actually do 43. Spend that here, too. Maybe 1 85 Let's go ahead and set a nice Grady in Phil for us to linear for the background here, and I'm going to go ahead and bring this up a little bit here. First, let's choose local colors, so that's the colors that were using in our project here. Um, let's do this one for the top and then the same thing for the bottom. But we'll do a little bit darker. Maybe, and then we'll do will have its start from year to. Maybe here. Let's go ahead and close that up here. And let's go ahead and around the borders to maybe 18 here. That looks good when we go ahead and just sent her this text here. It looks good. Create another text. Let's just go ahead and do one through 345 Space 5678 Space 901 to Space 3456 I'm just repeating some numbers here. I'm gonna add some double spaces in here instead of just one space, just at some spacing between these every four digits. Let's go ahead and select the whole text field and change the filled to white. And then let's move it over here. Let's go ahead and make it bold and change the font size to 16. Do. A spacing of 30 would be good. Let's try 18 for the font size. That's even better. Move it up a little bit. Let's actually go over here to letter spacing and add alerted. Spacing off. Let's do 2%. That looks good, but just as a little bit of spacing between each one of my digits. Here, I'm gonna use command D to duplicate that here and then what do we want next? We want the expiry date. So let's do month, month, year, year, just as a placeholder here that move that down here. And then let's just go ahead and duplicate. It's here and do cvv. Let's move it all the way to the right. I think that's starting to come together, just going to move it around a little bit. Move these up a little bit. I think that looks good. I've been feeling blue would look better for the great in here. So what do we go ahead and actually change our colors? From the orange to blue? I remember you can always do this with your design. Um, there's really no right or wrong here. It's just really a matter of what looks better to you to go ahead and experiment with different options. You don't have to stick to the ones that we're working with here. If you want to use another type of page by all means, go ahead and do that now. Let's go ahead and just select everything here and use command G to group them. Rename this to credit card and let's go ahead to the effects panel here and add effects. Add in effect of drop shadow on for this one I want to do maybe a why five. I must do. Blew her off. 10. Try 12. Doing up a city of 20% that's not too visible. Let's go ahead and add another shadow as well. Let's do a blur of 20 year on a Y of eight. Then change the old pay city to maybe 15% or actually 5%. Here. Let's try 8%. I think that looks good. So we're just missing you. But in here, So as you remember, we created our buttons as a component. But we placed it in another page here in the components page. You don't actually have to go there to access it. If you go to the assets top over here, you'll see all your components here, and I have my buttons. Has low both the disabled version and the enabled one, um, so want me just used the enabled one here for now, and it just beautifully pops into place here to make sure it's a line in the center. Let's go ahead and also make sure everything else is aligned in this centrist well and looks like it. ISS. Let's change this, but in text to add card. And let's just change this to payment here to make it a little bit more simple. And then, of course, let's go ahead and center it. I think that looks pretty good. So there we have it. That's our payment page. We can definitely come back, leader and then polish things up here. Um, once we're done with everything else. 16. Constraints: All right. So in the last lesson, we put together our payment page, and now in this lesson, we're gonna learn what constraints are. So essentially, up until now, we've been making our designs here, assuming that they'll always be run on an iPhone 11 size on. We've been using only one size for our frames here. In other words, we've been placing our layers and objects here, assuming that it will only be run on an iPhone 11 display. So let's say the client at some point decides to design or see their designs on an iPhone 11 pro Max here. Um, and as you can see, not much will happen. The frame will just expand, but our designs will stay the same size and again. That's because we've been designing it in relation to only an iPhone 11 pro size here. But that's where constraints coming. Constraints allow us to make her designs responsive so they work no matter what frame or what environment there in in order to add constraints here. First, let's go ahead and just undo that. So we have our original size here, um, and we're gonna focus on our lug and page first So I'm just going to zoom in Ah, using Zet and school here. So let's go ahead and just focus on adding constraints to this page on. And then we'll go ahead and added everywhere else as well. But let's first understand what constraints are. So with any object selected, you can access constraints by going to the properties panel here on, then finding constraints. You can see right now by default I have a constraint off top and left, and you can see it's top left because these two markers here on the constraint are blue and the other ones are just black. So this field here is being constrained to the left and the top, which is by default what happens with every object. But in fact, what we want to do is go ahead and constrain it to the left and the right here, so that if the frame gets bigger or smaller, the field will react to that. So right now, if I make my frame smaller, uh, the field won't react to that. So in order to make it react and properly size, depending on the screen size here, let's go ahead and have it selected and then go over here. Let's remove the top constraint. So let's remove the top constraint by going here and just doing center, because we want to keep this element in the center of the our page and not necessarily constrained by the top. And then let's go ahead and also do left and right here. So not to actually see that inaction. I'm gonna resize my frame, making it smaller. Now you'll notice my field is actually re sizing here, except there's a little something weird going on with this icon over here. So let's go ahead and add some constraint to this icon as well. Ah, the elements of a group themselves have certain constraints to it that you can also change . So if I double click into here to select my icon on and you'll notice it has a left and right constrained. But for the icon itself, we just want to do a left constrained because we just want to constrain it to the left side of this field and not the right. So now if I resize my frame, you see it works as it should, so let's do let's go ahead and apply those constraints to some of the elements in this page , and we'll go ahead and then apply it to other pages as well. Again, let's work our way from the top to the bottom. So let's do this button here. We want to do a top and a right constraint here because we want that, but into be constrained to the right side and not the left. Our logo here should just remain in the center, and let's probably let's actually make this center as well. Let's go to the password group and make it often rights and center. And then again, jump in here and make that change to be only left for our icon here. Forgot password should be constrained to the rights and center. The log in button should have a constraint of left and right and again center in terms of the vertical constraint. Let's go ahead and just multi select by using shift. Um, all of these components here hold these objects here because they're gonna have the same constraints were going to do, left and right, and then we're gonna do center. Except for this terms. Here, we want to go ahead and click this one and do a bottom constraint because we wanted to actually stick to the bottom. I think we just forgot one thing. Let's open our layers panel here. If you remember, we locked our background layer. Eso We can't edit it until we go into our layers and then unlock it. And for my background here, make sure you have it selected. We want to do it constraint of left and right and top and bottom. So this way it's filling the hole size of the screen. So I'm gonna lock it again, hand go ahead and collapsed my frame. So now if the client, let's say, decides to go with the iPhone 11 pro Max for their designs here, they can do that. And boom. As you can see, the frame is completely responsive, and it resized for that iPhone size. And then, if I go ahead and change the frame, let's say two on iPad. Mini even and see it does work, although you'd probably want to make some tweaks. So just re sizing these fields and buttons because that's way too large for an IPAD app. But here we're just designing for Mobil's. So let's go ahead and just hit command Z on. Then go ahead and select the frame and make sure we choose iPhone 11 pro here. I've won 11 pro here, and I'm just gonna go ahead and put this back here. That looks good. Cool. So, as an exercise, I want you to go ahead and apply those constraints to the other pages that we have here. So go ahead, and as an experiment, apply those constraints to the tutorial pages as well as your payment page on, and then in the next lesson, we'll do it together as well. 17. Constraints Exercise Solution: right. So if you've been following along so far, we added some constraints to our log in page. Here s so now, no matter what size the frame here is, if I change it around, it will go ahead and constraint all the elements inside to the sides and the top and the bottom, so that will help us create some really responsive design. And then I gave you an exercise to go ahead and do that for the other pages here. So we're gonna do that together here as well. First, I want to start with my tutorial steps. Um, but I'm gonna actually go ahead and replace that group that we inserted in the background here. Ah, and actually use an image instead because that's a lot easier to control with constraints for the purpose that we're using it here in our mock ups. So let's go ahead and select the log in page here and then go all the way to down to export . Let's go ahead and add an export here and just use PNG for your file type and then go ahead and export log in. It will ask you where you want to save it, so I'm just gonna save it in my downloads. So once I've done that, they're going to go ahead and just drag it from my downloads folder right into this tutorial page. Then go ahead and just center it along. And then let's go ahead and add a constraint of left and rights and top and bottom. This way, it will keep this image attached to all edges at no matter how we re size it, of course, we want to go ahead and just move this all the way to the bottom where we have our rectangle right below it. And then we don't need this group one here anymore. So it's deleted. And once you do that, uh, I'm gonna go ahead and apply the same constraint to the rectangle Ah, which we're using for our effect here, Right, The blur. So let's go ahead and just apply the constraint of top left and right and also top and bottom. And then we can go ahead and just group these two together and go ahead and just lock it. Just make things easier. So now if I resize this page But this frame over here, you'll see it will go ahead and keep the image for the background and the proper place. Ah, but the tutorial card here isn't constrained properly. So it's like the instance of the tutorial card here and then at a constraint off center. So now if I do the same thing here will go ahead and maintain the size year. I'm just gonna select iPhone 11 pro again. So now that works. I want to quickly do apply the same constraints here to the other two tutorial pages. So let's go ahead and select this group. Copy it. I'm here to my tutorial to paste that in, bring it down here to lead the other two. The beauty of it is that when you copy something, the constraints will be copied with it as well. So we don't need to redo that part. Let's copy again. Tutorial three. Do the same thing. Move it down here, delete the other two, and then all we need to do is again go through the instance here, choose center. So, by using center will just maintain the size of this card so we won't resize it. Based on the device size, we will just center it According to the screen that we're working with here. Same thing here. So now these pages are all done. And last but not least, let's move on to our payment page here. Um, so that's gonna be super simple for this one. Let's go ahead and do center and top for the card here. We don't want it to resize. So lets you center and center for this as well, similar to our tutorial card and then for the button here we want to do. Let's do left and right and center. Now, if I resize this frame to, let's say, an iPhone 11 pro Max here, I think that looks good. So there you have it. That's our constraints. And now we've tried it to all the pages we've designed so far. Now, to keep this course concise and to the point, I won't be adding any constraints to each individual page. But at the end, I will include a file that you can download for the final mock up. You, I wish will include all the constraints applied. So as an exercise, you can definitely apply constraints throughout the whole u I and then go back to that file at the end just to make sure that you've done it properly. 18. Using Plugins: All right, So if you've been following along so far Ah, we've designed some of the initial pages here, and we've learned a bunch of different things, from components to constraints. Ah, and now I think we're ready to jump into our map page here if we take a look at our sketch here. Ah, we see that we have a little map with a save button down here and maybe but in to tell us where we're at and a search bar at the top. Pretty straightforward. But I don't know about you. I'm not 100% sure how we'll get a map into our design. And so that's why we're gonna talk about plug ins in this lesson. Plug ins and figure are essentially there to help automate your design and help you take your designs to the next level and make designs happen even faster. So to access plug ins. If you're on the web up, you can go to the menu option here and then go to plug ins on. From here, you'll see the list of installed plug ins. Since we don't have any install plug ins, you'll see here It just says manage, plug ins. So we're going to go ahead and click manage plug ins. So from here will see a bunch of feature plug ins as what was popular ones that are made by the community. And you can really use these to your advantage when you're designing your projects. Of course, these air not all the plug ins here. You can go ahead and browse all of them by just going down here where it says, browse plug ins. So as you can see, we have tons of plug ins or go all the way up. I see unspool. Ash has it plug in. If you remember, a couple lessons ago will be added background image into our log in Page on Splash actually has a plug in in fig MMA. So instead of going to the unspool ash website, finding images, saving them and dragging them into your fig, my files, um, the splash plug in will just help you do the same thing. But just in one step, um, there's there's charts you can create using this plug in there some more icons. There's Avatar, so if you're making an apt with avatars, you can go ahead and use this plug in this one's really cool. Here it's called Google Sheets Sink. There's a really good chance that we'll explore it in a future section. Ah, what it does is that, as the name might suggest is that it will sink your designed with a Google sheet. So let's say you have a design with a list of different text. You can actually sink that with cool sheets. And so, as you change your Google sheets, that text will change within your designs. How cool is that? The list goes on and on and on. I would love to hear some of the useful plug ins that you've found, and there's just a lot to explore. So if you do want to send me a suggestion of a plugging that you're using, um, definitely go ahead and share that with us in a Q and A section, or just send it to me by email. You can email me at hello clever at gmail dot com. So I'll leave that here on the screen so you can go ahead and email me some cool plug ins that you find so at the very top here, you can also search for a specific plug ins to search map, and then let's use this 2nd 1 here and go ahead and install it. So this is just a little note to tell us that the plug has been designed by third party developer and not fig my themselves. So go ahead and just installed a plug in. And there we go. Plug in, installed. I can see it's installed over here. I can uninstall it if I don't want to use it anymore. If you want to learn more about what this plug in does and how to use it, you can go ahead and just click into here, so that's where we're gonna do. And as you can see, it helps us make customized map blazing fast. Cool. Just gonna scroll down here. You can apply Google maps or my box, so that's pretty cool. And it's telling us how to use it. Select any layer, including rectangle, lips or even polygon and run. My pinker sounds pretty straightforward, so switch back to our design here. Let's go ahead and, as it says, create a rectangle and I want this rectangle to take over the entire frame here that looks good. No, let's go ahead and go to this option here and keep in mind in the desktop app. You can access that from plug ins as well. But if you're on the Web app, you can go here and do plug ins. Now you should see map maker here. Go ahead and click on it. It might take some time to load. Once it does load, it would give you It's some options here so you can input a custom address. You can change the type of map that you want, whether it's a road map, satellite hybrid, etcetera. Um, zoom level. So I think all I'm going to do is just maybe zoom in a little bit mawr into this map. Um, and then let's do make map and there you have it. We have a map right inside of our designs. Pretty cool 19. Finishing the Map Page: now Lester's complete. The rest of the design for our map here is gonna switch over to my sketch here. So for the Map Page, we want a little search bar here with a little search icon as well as text and then a save button, as well as a current location icon. So we need to icons here and then a search bar and then at button components. So let's go ahead and switch over to our design and let's start from the top. Let's use the rectangle tool. Draw a rectangle over here and let's just stay consistent and keep 25 pixel space from the left and right. So course I need to resize that a little bit a little bit more on. Let's go ahead and and change the filled to white. Now it's still barely visible, so why don't we go ahead and add a light gray stroke? I think something like this would work, and then let's go ahead and set a thickness of 1.5 pixels. Let's go ahead and round it to six pixels. Let's actually do eight. Ah, and let's go ahead and also add an effect of ah drop shadow. Change the Y 25 here, change the blower to 10 and bring the rope a city down to maybe 15% for Let's actually do 10%. Let's move the Y up to two, maybe or three. I think that's starting to come together. Let's just switch by Tore Design. Here we have little search icon, so it's insert text here for Search. 16 is good for the font size. Just go ahead and change the way to regular. I just go ahead and add some space for our icon that we're gonna add. Let's go in and add another drop shadow this time. Go ahead and make the X zero and the Y zero as well. Go ahead and make the blower 30 are actually 25 on GOP City. At five. I'm gonna cheese dope a city of the other 1 to 20% or actually 15 so it's not too harsh. I think that's starting to look better here. Now let's go ahead. Back into our resource is for the project. Once you have that open, go over two icons map and then you'll see we have are two icons years. So what we just go ahead and drag them in. Just gonna use shift old to resize them here. Just move them over here. Let's start with search icon here. Make sure you have the proportions constrained here. Then do 25 year, so that automatically changes the width and height together. Zoom in. Put that over here right here and then Let's go ahead and give it a selection style of the blue, unless also go ahead and change the selection color for this to the primary blue that we have. Put this at the bottom and give it a shadow drop. Shadow us to 20 on 20%. That's good. I'm still not too happy with the shadow of the search bar here. I think it's a little bit too strong, so let's go ahead and just change. The 15% change the blue here to maybe 10. I think that's slightly better. We want to change the text here to let's do a light color again. Since this is going to be placeholder, feel free to just put a nine a nine a nine for the hex code here to get the same color. And I think the last thing here is our save button. So when we go ahead and head on over to our assets, top here and go ahead and move a button enabled onto the screen here, just make sure that has proper spacing, and it does just move this up here. Maybe we also want to show the user where their ads. So when we go ahead and use an oval shape, zoom in here and create maybe a circle of 21 by 21 duplicate that is in command D here that make a larger one of maybe 72 by 72 year. Let's go ahead back to our leaders panel and try to align these, put the other one on top of the this one and then just aligned them together in the center for the larger one. Here, let's go ahead and set the text color to our using our local color. Let's choose this color, and then let's choose the nope, a city of Let's do 30% here unless changed the other lips or the other circle to this color here. I think that looks good for now. We can even make this a little bit larger. I'm gonna use Ault and shift together to keep the center nous of that. And I think that looks good here. This is way too large. Let's resize it to 35 by 35. Let's make sure that the the constrained proportion it's on and and do 35 by 35 here. Well, let's actually do 38 then go ahead and align that here. And I think that looks pretty good for now. We just need to change this text to We have over here to save you, save location or receive dress. And there we have it. That's our map page on. We're almost there. We only have three more mean pages to go, and so we're gonna complete that together in the next section of the course. 20. UX Design Tips: so so far, we've been working on the user and to phrase for this application here. So if you're not familiar with user interface design, this right here is an example of the U I or a user interface. The interface is what the user interacts with. But more importantly, we have user experience design, which is essentially how people feel while they're using the you I. Let's quickly switch over to learn a little bit about UX design and what it is and how we can apply to our project. So what's you X User experience, or UX design is a process Design teams used to create products that provide meaningful and relevant experiences to users. In other words, user experience. Design is a human first way of designing products, right? Instead of just thinking about putting certain elements into a page and then calling you today, we actually think about how people will in tracked with this product ah, and then go back and redesign and make sure that we improve it in a way where people feel good about using them or even great. So here's an example of a U I vs the U ex. Ah, you. I is what people see in front of them. The actual interface, whereas you X is how they interact with it, how they use it, how they feel while they're using it. So there's a lot more going on with you. Ex great You X is legible to the users as this means a great use of fonts and sizes under right here, you can see an example of poor UX Um, this fonts not very accessible or easy to read. And in general, try to increase your font sizes and also use easy to read funds as opposed to something like this. Great. You excuses, colors and ways that increase an improved contrast. So this is really important here. You want to make sure that you have high contrast in your designs. Um, on the right here we can see an example of poor you X, where it's hard to read the text because it has low contrast the difference in color or hue between the foreground here, which is the text and the background. But it's gonna be a light gray here is kind of low, So to improve this text, you can either make the text a little bit darker. Or if you can lower the background and make it lighter, you can do that as well To help improve the contrast, spacing is really important. You don't want to overwhelm the user with too much information in one spot. Ah, so great you excuses spacing to separate content on. And then on the right here, you can see it's kind of overwhelming. There's too much information all squeezed into one area. Um, so that's because there's no spacing between the text or objects there and in general, just feel most your designed with white space. So it's not overwhelming unless two pieces of content are relevant. So this means that unless you have stuff that are related to each other, try to space them apart as much as you can just to help improve the U X cool. So alignment is really important as well. Great. You excuses alignment to ensure things feel right says you can see here on my left. Here, uh, everything looks nice and organized and lined, whereas on the right, it doesn't feel right looking at thes shapes because they're completely misaligned. So if you remember throughout our design, we used a lineman tools a lot as I mentioned before, because this is really important. And ux design consistency is another big one. You want to make sure you stay consistent with your colors. Um, and you're you I in order to improve your you eggs. So for our project, that's why would be picked the color scheme so that we stay within a specific color palette or color scheme So we don't confuse users right on the right here. We can see we're introducing some new colors on the right here. So there's a green unless it has meaning. So, for example, if you want to say congrats, So if you want to give, for example, a success type of text to the user, of course you can use green, but try not to use too many colors and to many a different types of fonts and things like that, and try to keep it consistent. Um, try to keep your fonts generally the same size and keep relevant content together, Right? So you see that Texas all the way at the bottom, where, as it should be closer to the other text because they're relevant, we're almost done here is so great you X is easy to use, simple as that buttons are reachable and they're big enough to press. And, um, I can't stress this enough because I've seen a lot of applications where the either the put the buttons in very hard to reach places, especially on mobile. As you can see on the right here, generally, you wanna avoid having frequently used buttons at the very top. Um, also don't make your buttons away too small, especially again on mobile, where you're using your fingers to attract with the design. If you make a button that's way too small and maybe someone has a bigger than average hand size, they will likely miss that button. So definitely make your designs accessible to everyone, where as many people as you can really, sometimes in design. It's very hard to make your design completely accessible to everyone, but it's definitely best to try and make it accessible for everyone to use. Release your own users so there's way more to this. Adding great us to your designs takes time and testing to get it right. So please be patient with it. Ah, but you can start by applying the stiffed. Your design. Um and it's a great way to start. So now it's your turn to make. Great ux. I've put this slight show here. In your resource is this is something I just put together as a little handbook for your ux that you can apply to your future projects. So feel free to download the pdf and just have it handy somewhere. So next time you're designing your project, you can just remind yourself off a few of these things. Um, in case you forget. All right, so we learned a lot about user experience design, And now, as we're designing our mock ups, we will keep you X in mind and come back to it and make sure that we add all the proper elements for a great user experience. 21. iOS Design Templates: all right, I think we're ready to start designing our request profile and services pages. But before we do that, I want to go ahead and jump into the resource is for this lesson right here. You can go ahead and download this text file. Ah, where there's a bunch of resource is for what's called templates in fig MMA. So essentially templates in fig Mama, just like many other applications like ward editing Softwares, allow you to start with Primi template s so that you don't have to do a lot of things from scratch. And not only that, templates will help you have access to pre built components that you can just drag into your design and especially handy when it comes to Apple's you I kids for designing. So of course I us 13 and any other all us that you worked with will have certain templates . We're starting a design component to it already built, so you don't need to go ahead and redesign that same thing for Google's material designed here. So I've included a bunch of resource is in here s so let's quickly go through them just so that you can know how you can use these for your future work. Fig MMA has their own templates under websites. If your fig ma dot com slash templates, you'll be able to access this website where they have a bunch of different templates like Mobile You I Kits and Instagram templates and a bunch of other cool stuff that you can use like Venn diagrams and things like that, the next resource here is fig. More resource is dot com, also very popular. As you can see, there's a lot of different templates that they have that you can start with eso again. This helps you jump into your design without having to start from scratch. Um, and there's tons of resource is in here from the community, so feel free to take advantage of this and save a lot of time for your designs. This is another website fig, my crash dot com. Go ahead and check it out. They have lots of resource is and you I kids is low. And then these last two resource is of course, as I mentioned ones for the apple design resource. Is eso from here? If you go down, you can see us templates so you can download, and I know right now they don't have faked my here. But keep in mind, you can always download the sketch version and then imported into your figment files. And then there's a bunch of other ones if you're designing for different platforms. So since we're designing for an iPhone operate now let's go ahead and download the sketch one here, so use the secondly here to download for sketch and, well, that's downloading. I'll just go to the last resource here. If you're working on an android application or any application that's gonna be run on android devices or even some Web applications, you can definitely take advantage of this material design page over here from Google. Cool. So that's templates for us. Um, so just go ahead and open that iris sketch file that you downloaded from Apple and then in the next lesson will go ahead and use it in our project 22. Working on Our Main Pages: All right, So if you've been following along so far, we've gone ahead and downloaded the apple design resource for IOS. Ah, if you haven't done so, go ahead and follow this step in our last lesson. And then once you download that, you should be able to open up this file right here from where you can earn use the IOS 13 sketch files. Acela's installed the funds that you need. Ah, So be sure to head over to this website right here on. I've already have it opened up. Apple uses these font types throughout their you I So it's best if you go ahead and download all these funds on just have them on your system. And so this way, when we do import the sketch file Ah, we won't have any issues there. So go ahead and download these fonts and then we'll get right back to it. So I'm gonna go ahead and also make sure that I have all these fonts and then we'll get right to it. I want to quickly mention that if you're using the fig ma web app, um, go ahead and head on over to fig ma dot com. slash downloads. Ah, and then go ahead and download this font installer right here. Whether you have Mac or Windows, they have both of them right here. Um, as you can see, the desktop app is not required. The fund installer. But in order for you to be able to apply your installed fonts on your machine into your figment web up, um, on your browser, you will need to use this font installer after you install your fonts. I do recommend that you quit the figment that stop up and just open it again to make sure that those funds that we've installed have been applied. So now that we're ready to import are US 13 sketch file here, let's head on over to fig MMA and then go back to the main files. The main page over here. I've already imported it. But if you haven't go ahead and open up a US 13 sketch and then go ahead and just drag this you I elements designed at plus guides right into your fig map. Ah, I should just take a second there to convert it into a figment file, since this is a sketch file. But once that step is completed, you can go ahead and open your file here. So from here you have access to colors, textiles from Apple safe areas, the IPAD interface as well as the iPhone interface. Right now, we're interested in the iPhone interface. Here s so go ahead and open it up. And then we're looking to apply a couple of things right now. I'm just gonna drag my markup sketch here. You'll see from here that on these two pages, we wanna have navigation bar here on and on these three pages. The main pages will have a tap bar in order to switch between these pages. So let's go ahead and drag at navigation bar and a tab or into our designs from the AL US 13 guidelines. Let me just go ahead and zoom into here, and then this is probably what we're looking for. Here we have the navigation bars and the status bars air up here. So the easiest way to actually apply these into our obligation is to just go ahead and use components. These there are. All of these elements are already components, but well, you can do is you can go ahead and use them in your own projects. I think right now we're just interested in this specific, um, frame here. So why don't you go ahead and just press command, See on the whole frame, So make sure you have everything selected. Um, use this. You elements, dash bars and go ahead and copy the whole thing. Using command, See? And then head on over to your project here. Let's go ahead and create a new page and name it IOS you. I components and I go ahead and just paste that in here. So now we can use thes across our designs so we can use this navigation bar right here. So why don't we go ahead and just go ahead and just drag that outside? Let's go ahead and also drag this status for out here. Over here, I see we have the top bars as well. Ah, we want three options in our. So let's go ahead and select this one right here and drag it out as well. And so let's go ahead and now select each of these separately and create a component from them. Do it for the status bar, and then we'll do it for the navigation bar here and lastly or Tabor here. And so now if I could head back over to my markups page here, let's focus in on Our main page is here. Let's head over to the assets top over here and then from where we have IOS you I components. Let's drag in a status bar. Please sit at the top. Let's go ahead and use all drag over copies on each of these pages, and we'll need a navigation bar on our profile page. So let's go ahead and drag that in. Now you'll see that it's covering my status bar. So one needs shortcut in Fig Mayes that you can use command and the square brackets to move layers up and down. So just go ahead and press command and the opening square bracket, and that will move your layer that you have selected down below the other one. That's what we want here. Let's go ahead and just drag that into right here, and then again use command and the opening square bracket to put it below the layer that we want. And lastly, let's go ahead and drag tab or into all three pages because this will be our navigation structure. So we use this top bar to switch between these three pages. We will add the icons here in the next lesson, but for now, let's go ahead and just rename our pages accordingly. So this one's profile and this one's services let's go ahead and just switch back to my sketch here. Yep, that's that looks right. We just have an edit button here as well. So let's go ahead and add that as well. Let's let's just go ahead and delete this square right here as well as the one here. And let's go ahead and do it from here is well and then in this one right here, let's just go ahead and add and at a button. Now, keep in mind, I'm using the SF Pro display font. That's the That's the front that IOS uses right now. So go ahead and choose that. And then let's go ahead and resize that to 24 22 year and move that up here. Let's just go ahead and change the Phil using our color styles, too. The blue that we have, I think that looks good. So now we've set up our navigation bars are tap bars and our status bars as well. That's kind of the baseline here that we need in the next. Listen, we're gonna come back and start designing our tab bar here a Zarrella's work on our request page. 23. Designing a Tab Bar for Navigation: all right. If you've been following along so far, we set up our three main pages using some of the Iowa's components. If you haven't followed along again, go to the mock UPS folder and the resource is for this project and then open up mark ups and go ahead and just open the lesson that's closest to this one and just import that and follow along. All right, so now it's time to design our requests page. But before we do that, let's go ahead and set up our tab are properly so go ahead and open up. Our resource is for this project. Once you're in here, go ahead and open the Icons folder and then open up Tabor. And then you'll see three icons here for our tap our. But we want to go ahead and actually add these and our components rather than these instances here. So go ahead and just like one of the top bars here and then click. Go to master component here. Once you've done that, you can go ahead and now drag these icons into here. Let's go ahead and just drag them and then let's go ahead and hold shift and resize them here and click this constraint proportions. And then let's give them a width of 32. I'm just gonna click this year and then add a layout grid and let's go ahead and choose Kahlan on a count of three. Just change the Kobe City to 5%. Let's go ahead and close that, and this is where it lay out. Grids get handy. Let's go ahead and just double quick in here and move these icons accordingly. Will want Ah, our past services here. We want to switch these two so we have our request half here and then our profile here as well. Open up or layers panel. So we see what we're doing here. Let's get rid of this tent color the 10th color on this one and the tens color here. And then let's go ahead and just center These let's select or grid here and change the gutter to to that's better and then go ahead and just center those along. That looks good. Let's add a text for each of them so used T Let's do profile re sizes, too. Every 14 and let's go ahead and just move that up I think we can move our icons up just a bit. That's 25 pixels. Same thing here and lastly here. And then just use command D here and one more time. Make sure this is aligned. Let's go ahead and just change the text here. We'll do services and I will do requests. Go ahead and just center those long. Same thing here. Let's go ahead and now remove the layout. Good. Here. I think that looks good. We do want a way to show which tap is active. All right, So in order to show which page were on, we're gonna have a different selection color based on the tap that selected. So let's great three instances for each of these being selected. And to do that, I'm going to just go ahead and select my whole component here, used old and drag away other one here down here and then just use command d two more times . So you have the main component here and then three instance of that component. And then I'm going to create a component from each of those celestial components. And I renamed this one to tab R slash profile selected select this one here create components renamed to Tab Bar slash request selected and then lastly, here we're going to create a component here and do tap bar slash services selected. And there we go and a young we're doing that so that we can easily toggle between each one in our mock up designs. So now I head on over here to the top bar slash profile selected, and let's go ahead and select or icon here. Change the selection color, using the styles to our primary color. Same thing for the text here and then applying this the primary color. Let's do the same thing here but for request. And lastly, let's do the same thing for services selected one more time. I'm just gonna go in here and make sure everything's centered. I think now everything centered perfectly. Let's go ahead and go back to our markups speech now and now. As you can see, I have this beautiful tab or here showing different pages. Let's go ahead on our request page here. Good word, says Tab or here. And then let's switch to Iose. You had components tap or and then do request selected. There we go and unless through the same thing for profile, Go ahead and click this tab bar and do top board. And this one's profile selected. And last but not least, let's do Tabor services selected. There we go. So we have a tab board now designed for every page. Um and then we're gonna go ahead and jump into designing our request page in the next lesson. 24. The Request Page: to get started on our request page here. Really quickly. Let's switch over to our drawing here. Ah, so first things first, we want a little reload or their refresh icon here. We want our little map snippet here to be able to tap and go to our map A to set our address. Um, And then it will be nice to show a pan of are currently selected address, I guess. And then we want a laundry request tap right here and with a little store card in here. Ah, Well, go ahead and designed the store card later. For now, let's go ahead and get the whole layout started here. So let's work our way from the top to the bottom. First things first. I want to go ahead and create a little rectangle here. Just go ahead and choose the size of maybe 2 50 pixel here in terms of the heights, make sure the with is fully taking the horizontal space here. We're gonna insert our map in here, but before we do that, I actually tested the map box design instead. I think it looks a little bit better than the Google map. At least for iPhone applications, maybe an android application. It would look good, But here I want to go ahead and actually change my map in this page and then in this page, using a different type of map. So let's go ahead and really quickly go back to our map page here. Let's go back to the rectangle here that's creating our map. And then let's go ahead and run the map maker. Plug it again and this time choose the tabloids as map box. Let's do a zoom level off 15 and they just go ahead and make map. I think that looks slightly cleaner. I just want to change the shadow here of my rectangle here. Yeah, So for the first chatter here, I just want to change the open a city to maybe let's do 7% here. It's on two strong. I think that looks good. Let's apply the same thing here with the map. Let's go ahead and select this rectangle here and run the map maker Blufgan here, go to map box. Let's go ahead and make the map here. One thing here, you'll notice it's covering my status bar, so let's use command and opening bracket here to just move it down. Thing that looks good. And now my status bars kind of blended in with the map s. I'm going to create a little rectangle just to cover kind of the top portion here. And let's go ahead and move this underneath my status bar. We're gonna lock the status bar layer. Let's go ahead and make this rectangle maybe slightly bigger here. I think something like this would work. And then let's go ahead and change the Phil to whites Color here, Give it up a city off 50% and let's add an effect off background blur. Let's bump this blur to maybe 25. Do 30 here. That's good. So now my status bar is in blending in as much with my map, which is what I want again. This is part of you X. You want to make sure that your users are able to see their status bar ah without without it blending into your own app. So let's go ahead and now switch back to my resource is folder use going to icons go into request. Let's go ahead and drag these two icons and here first Let's go ahead and constrain the proportions and resize them to 38. And let's go ahead and just like this whole thing and bring it here. And I'm gonna place my map pain somewhere around here and go ahead and change the selection color too blue at an effect of a drop shadow. Maybe change the why here to eight. Let's do 10 Blurt said. The Blur to 10. Maybe the he will pay city to 15. Let's just see how that looks better. Let's go ahead and also give a selection color of blue to my butt in here. Now let's go ahead and just move it up here. And I want to go ahead and also give this of drop shadow. But this time make though Pacenti or the Y zero make the blower maybe 10 on. Bring the dope a city down to maybe 15%. I think that's good for now that, but it could definitely be a little bit more visible now if I switch over to my designs here. We want the laundry request Hap over here, so let's go ahead and create a rectangle from maybe over here. Although we don't to my tab or just one was doom in here and make sure it's not actually covering my Tabor. I think that's good. Let's change the Phil two white and hold. Also weaken. Separate our corner radius here and make this one 20. And then we can do 20 on this one too. I remember once you hold Ault once essentially you're separating your corner radius for each corner so you don't need to hold Ault. Um, once you see this little circle inside of our border radius control here. So right now, each corner will act independent of the other one, so you can go ahead and resize them without having to hold old. Let's add a drop shadow of do minus 10 or actually minus six Here, increase the blur to maybe 15 or even 20. I didn't bring the OPC down to maybe 8%. I think that looks good. I definitely don't like my butt in here, So what I'm going to do is actually I'm going to wrap this in an oval, so let's go ahead and use the okey. And right now I'm actually placing that inside of that frame so I don't want to do that. So let's go ahead and do it here 2 48 by 48 then resize this, too. Let's do 32 or actually even 30 by 30. Let's go in and change the fill for this one to white, and then just make sure you select the whole refresh frame here and then move that over to here. Use command close bracket to bring it up. That looks good. Just gonna use command G to group these together and then place it here and let's go ahead and finally at a drop shadow of zero ex and why, in just a blur of 10 we can do blur 15 and do obey. City of 15 is low. That looks better. Let's go ahead and jump in here and just remove that drop shadow from the, uh, reload icon or the refresh icon here. We just want it applied to the circle here. Ah, and on second thought, maybe I want to actually increase. They'll pay city to 20%. I think that looks a little bit better. Feel free to play around with the feast kinds of things just to see what looks better. What feels right to you. Now let's go ahead and add a Texan here and let's do you actually go ahead and do Choose Laundry Store and changed the font size year to maybe 24 22 and move it up here. Let's group these together and then go ahead and just center them along and let's go ahead and create a rectangle. Do you want to do to 95 by 2 95 and just center that here? That's pretty good. Uh, I'm gonna hold shift and all that actually make it slightly smaller. Maybe do we need to 75 by 2 75 and then at the corner radius of 20. Now let's go ahead on over to my assets here. Go to local components, open up components and then go ahead and drag one of these buttons. And here the enabled state and center that long and then change the text to request service . Let's go to the layers panel and make sure that's part of this button is part of this group . Just go ahead and places inside of here as well. So yeah, all of that is now in one layer or one group. Cool. So there we have it. I think that's pretty good. That's a good start. Um, if I switch back, we have almost all the elements in here. We will get into designing the store card in the next lesson. So feel free to go to the next lesson now to start designing our ah store card here. 25. Store Cards: All right, So now we're ready to design our little store card here. Um and we're gonna, of course, create a component for that s so that we can reuse it and make multiple ones in the future , if you need to. Let's go ahead and just click this here. Used command, see here and go to our components. Let's go ahead over here and paste on in here. Now, of course, it's blending in with the background here, So I'm gonna go ahead and give it a fill of white. Let's click on it and first turn it into a component. So this is a component now, so let's go ahead and add a rectangle inside thing right here would be good. Ah, this is where our image will go. Let's go ahead and actually stretch it to maybe height of 1 50 pixels. And I'm just gonna change the Phil to darker Phil here. And then let's go ahead and give this a border radius of 20 as well. Seem to be here again for the very first corner used Ault. Um so that you separate the border radius is here. If you can't get it right, you can always two week that from here is well, so I think that looks good. What else do we need in our store card? Let's just go down here. Of course, this will be where the image goes. We need a store name, a dollar per item, turnaround time and the rating. Let's work on each of those separately. So first, let's start with our store name. I will go here, duplicate that and do dollar per item. For now, let's just go ahead and put $0 per item. Remember, this is just a component. In each instance, we will be able to change that and adjust. And I'm gonna resize this one too. Maybe 14. It's pretty good. We can probably bring these down just a little bit more, so we give more room to our image Pretty good. Let's go ahead and just duplicate this one here and keep a spacing of 15 from the sides. And let's change this one too zero days and then use write a line for this one, so going to stretch this out if I want, we want to use left line here and then go ahead and stretch that out used left line. Actually, we don't want to stretch it out all the way. We wanted just to here and let's resize this 12 maybe 20. That's better. Go ahead and duplicate this one up here and do zero stars or actually zero. This will be for our rating here so we can do 0.0. So let's go ahead and just zoom in on. So let's go ahead and create a star for my reading. Here is well again, The beautiful thing about fig Miser. You can create a star from the shape tools here. Let's go ahead and draw one. Will holding shift, maybe do a size off 25 by 25. I just center that here along with this cool Ah, and my star tools. I can go ahead and increase and decrease the count. We're gonna keep it a five. We can go ahead and make the store have a high ratio or lower, one going a sharper and we can also change the border radius here. Now, this is way too much. So what I'm going to do, I don't want I don't want to go with the sharp edges that it has right now. So we can go to this side over here and even assigned a corner radius using the decimal. So that zero point let's try your 0.5 here. I think that looks good. Now our start can have multiple states. It can either be just great, like this can be half filled, and then maybe you can be fully filled as an example in my sketch here I have ah, fully field star. But if I wanna have just 1/2 fill star, it can do that too. So when we created component from this, but keep in mind, you can't create components inside of another component. Um so wanted me. Go ahead and drag this star out of here and then go ahead and just give it a fill off lighter gray. Here, maybe do this colors get Let's create a component right here. Let's go ahead and just zoom. And just to see my star here, I'm going to do command D and then just put that instance inside of my component and create two more stars for my other states. So I'm gonna name one filled, the other 1/2 filled and the last one unfilled. So it's for for the unfilled one here, let's just leave it as it is. So for the half filled one, let's go ahead and give it a color off gold here. Let's just go ahead and create some sort of gold color here. Of course, I can't see that because it's covered by the filled one. So let's go ahead and just hide this one. And I think something like this would work. I'm just gonna copy that hex and apply it to the other one as well. So the filled one works unfilled. One works, and then we just want to do the half filled. Once. Let's take advantage over our of the Boolean groups by doing by creating a rectangle here over the star like this. First, let's change the rectangles color, too, this color right here with a hex code of just sixties, and then choose the rectangle and 1/2 filled shape and using our bullying groups, let's click intersects election. That looks good. It's enough. I want to use that in here. Will hold old bring a copy in here. I think that looks pretty good. I just want to go ahead and center this along, and we move it a little bit here. Perfect. Cool. I think we're ready to add this to our design. Let's just go ahead and rename it to store card. And let's also rename this one, too. Just store looks good. Let's go back to our mark ups and let's go ahead and just delete this square right here. Then go through assets here and then. Now you'll see we have this store card here. Let's go ahead and drag it in, center it along here and just go to the layers. And I want to make sure that I added to my group right below. Choose laundry store. All right, so it looks like the background here is completely blending in with the background here. So let's go ahead and select our component or the instance here. Go down to effects and let's add a drop shadow. Um, with maybe a Y of AIDS. Let's try 10 and let's do a bluer off. Maybe 30 or actually funny would work. I'm not drop the radius to maybe sort of the oap a city here to maybe 10% renew 12 thing that looks good. So Let's go ahead and just fill the data here. Let's go ahead and change the store name here, too. Jack's laundry. I'm just randomly putting store names here. Let's do a rating of 3.5 and a turnaround time of Steve two days and then change the dollar pride. And to maybe let's do $1 item. All right, so now we want to put image in here in this rectangle over here. Let's go ahead and use the tool here. Place image. Then let's go ahead and choose images, store cards, and I'm just gonna go ahead and choose one of these images here. This one looks good. And now, if I hover over a certain object or shape here, such as this rectangle and I click, it will go ahead and actually put that image inside of that rectangle. So not, let's go ahead and just duplicate this two times one is going to go over here and the other one's going to go on the other side. Here. Let me just hide my profile frame here just so that we can edit this. I'm just gonna rename this to roses laundry. Let's to and then give it a rating of 4.5. And then we can change the start here by selecting it. And now, if you click into that, we can actually go ahead and choose which one we're showing. Right now, we're showing this Intersect one, but let's go ahead and hide that and do a filled one. This may be changed turnaround time to one day, and I do a dollar 20 an item. Let's go to this one here, too, and change it to Bob's laundry. Give it a store off. I don't know. Let's to 2.5. Change the turnaround time two, maybe three days and then change the store here by hiding my other two to the unfilled. Don't change the price to maybe 80 cents an item. So to replace these images, you can just go ahead and double click, Go to the image here, and then do choose image with do another image. There we go and then do and then just closed that and do this one here, choose image and then let's choose this one. There we go. So now we're gonna go ahead and just place thes into our frame here go and have both selected and then drag them into the request and then into the group. And then what? We have them selected. Let's go ahead and just constrained the proportions and change them, too. Maybe 2 55 actually, the beginning in 2 to 45. Just move them around the other one here. Just make sure it has the same spacing. Let's select all three of these and make sure they're vertically aligned and it looks like they are. Lastly, I'm gonna go ahead and just decrease the shadow on this one to do. It may be a Y off five and a blur of 10 maybe just choosing up a city of 6% instead. And same thing here. I think that looks good. We can even actually go ahead and bring this refresh icon to up here and have a joint or the rest of the group here. There we go. I think that looks better. Get rid of that circle and I think that looks better. So there we have it. That's our request page. Before I forget to do so. I'm gonna go ahead and well, first, let's go ahead and just collapsed. the request page and my page here. I'm gonna go to the services page and just make sure it's also collapsed. I'm gonna go ahead and just unhygienic my profile page. Cool. So now I think we're ready to jump into our next pages here. 26. The Profile Page: all right, so I think we're ready to get started designing or a profile page here. It looks pretty straightforward. We have a little picture for the user here with the name and email here and edit button here. And then we have a little map widget off their address. We have payment support and then log out. So let's get started on designing this page here. So in the profile page here, I'm gonna go ahead and first thing, make this edit, but in a little bit smaller, less too. Font size of 20 on Changed the font way too medium here or less, you semi bold, most better. So let's go ahead and first at or over here for that profile picture, and we could do 100 100 for the size. Let's just keep a spacing of 25 pixels from the left. Let's go ahead and add. It takes for first and last for their name. Just go ahead and drag a copy using old and then do email at domain com. Let's go ahead and just move these down and that looks good. Let's just resize this 12 maybe 18 and the name here to 22 to add a profile photo here. I'm gonna actually go up to my plug ins here. Do manage plug ins. Let's go ahead and browse all plug ins here, and I'm gonna use this winery here called avatars. If you can find it, just go ahead and search avatars and then install this one right here. Once it is installed, we can go back to our project and then with your, uh, circle or lips selected, go to plug ins and then do avatars cool. So I think that looks good. Uh, moving on. We have our map option, and so what? We just go ahead and use salt on this rectangle with map already in there and bring it over here. Just resize it until we get spacing of 25 on both sides. That looks good. Let's go ahead and resize the height 200. Give it a border radius of 20. Let's just move it down a little bit. And then let's move this or copy this icon over to just put it in the middle here slightly above middle. Let's group these together. We want to also add the address here. So Why don't we go ahead and duplicate this pen here and then maybe make it, uh, of course, constrained and then do straight 20? That's right. 18 in terms of the width. I'm just gonna zoom in here and let's do left the line here, do a text. 1234 Address plane just as a placeholder. And let's go ahead and do a farm size of 18. Move this up here. I think that looks good. Just gonna move it down a little bit. And then I think we just need payments, support and log out here. So let's create another rectangle here and just do 3 25 by 55. I maybe do a corner radius of 10 here. Bring it up a little bit. Maybe a little bit lower than that, and let's do a text. And then let's do payment. Find that here. So let's first change the fill two primary change the fill of the text to White on the go ahead and duplicate another one here. Make that larger and left the line right a line. Let's do I'm using old or option and then doing the eight key to insert thes little circles this new 1234 and that kind of represents the credit card or the payments option. I think we can even make this a little bit bigger, like let's do 65 here and then center these long. There we go. Let's go ahead and group them together using Command G and let's go ahead and name it Payment button, What's duplicated and we have support. So let's do support. Plus, to leave the text here and let's go back to our lugging beach here. Copy this. Go back here and paste that in Basit it up here. But I want to just go ahead and just drag that in here Instead, let's go ahead and resize that, too. 22 were actually let's do 28 and then vertical line and what we have here we have, like, 20 raid. Yeah, let's do, uh, move it around until it's here. Let's go ahead and make it last, but in copy here as well. Um, so let's go ahead and first make sure that's part of this group here on a renamed that group to support Button and unless do log outs on, let's just create a little arrow Icahn here and right now you can barely see it. It's really small, So let's go ahead and make the thickness three. That looks good here. Let's change the stroke color to white. So I've just zoomed in here. But as you can see, that this edges kind of harsh, whereas over here we have a round kind of nice edges or or corners. So we're gonna go ahead and just double click into this line here for the arrow. So this step is important. Go ahead and select this point right here. Eso We can apply changes to just this point. Then go to the three dots over here and then do a cap off round. Cool. So that has a rounded capas. Well over there. You can do this to any lines. Well, let's just zoom out and just escape to return out of there. Let's just make sure that this is actually centered here. Looks like now it's centered on. Let's just go ahead and move the arrow inside the last button here changed the name to log out button, and I think, let me to see how my spacing is. I can move it to a couple pixels. Right? And that's a line. Now, I think that would work. One thing we could do here, we can go to our log out button and change the primary color to the orange. Here. Does that kind of signified that this is a log out option? Feel free to play around with that and see what looks good. But I think looking at my sketch here, we've got in pretty close to what we want for our design. I'm just gonna go ahead and zoom completely out to see where we are. Yeah, I think that looks good. 27. The Services Page: all right, We're almost done Our design here. As you can see, we've completed our lugging page, our tutorial, page payments and map page. And we've even gone through our requests and profile page and even added constraints for our design, which is great. So now, ready to get into designing our last page here, Let's go ahead and just zoom into here and let's go ahead and open up our sketch that we had. So this page is super simple. Essentially, we just want a list. Ah, bunch of services or previous orders or requests that the user has made, or even active one. So if they have a laundry service actively running right down, we want to show this here as well so that the user can see what, um, the status off there laundry is. So, as you can see here, we're gonna place that in kind of a list format. Um, for all the services that they have s. So let's go ahead here and just zoom in here and see what exactly we wanna have in our, um, our list over there. So we want to store name. We want a date in time where the request took place. We run the current status and then, ah, little price, uh, text over here to show them how much they were charged on. And then we just want to have a little carrot icon here. Just do allow them to go into that request and maybe Seymour information about it. Or maybe contact the store or a bunch of other options that you can add for your own design . We won't get into that page in this course, but, um, I will leave that as an exercise for you. So if you do want to go ahead and design a page for them to see their request, by all means, go ahead and do so. And you can even send it to me by email. And I'll be happy to provide some feedback to you. Awesome. So let's switch back to our mock up here, and first thing I want to do is create a components for each of my list items on. Of course, I think by now you know where we put our components. It's in the components page here. Let's go over there and let's go ahead and create a rectangle using the R two. And I'm just creating a rectangle first thing. Let's go ahead and give it a fill of white on. Actually, let's go ahead and change the width to 3 75 I think that's the width of the iPhone size that were working with here. If I'm not mistaking, yep, 3 75 by 8 12 So let's go back here. Let's do 3 75 and let's do 100 and 10 for the height here. I think that's good. I already have some text in here, So as a designer you always want to reuse components or reuse different elements in your design instead of creating new ones just because it saves a ton of time. So let's go ahead and just select a couple things in here like thes three texts. Maybe even yet I think that's good. And then use command, see to copy it and then head on over to this rectangle here and paste that. And here right now, this is not a components. Let's select everything in here and use command option key, and that makes it a component. And now weaken, dig in and move stuff around. So I think we can have the store name closer up here. Let's see what we had in our design yet something similar. And we have a price and status. So let's do price. Let's go ahead and move this here. Just give it some spacing for our carrots and then let's go ahead and move this here instead and do, uh, left the line. Let's go ahead and line that over there. See what kind of spacing we have to 15 by 15 here in terms of the spacing from left and bottom. And let's go ahead and just do day month you're and that may be due H H m m to represent hours and minutes. It looks good. So let's go ahead and make sure this right here is centered vertically perfect. And then I'm going to duplicate this text using command D right. Align it and then just move it all the way to where I have my dollar sign Icon. Let's change the text to status. Cool. I think that's good. We just want to add or carrot icon here. Um, the easiest way to do that is to draw an error line, so I'm gonna do shift l as a shortcut. Create a line here. Let's zoom in. Go ahead and double quick into here on. Just take this end of the line and bring it all the way here. So we just have a nice carrot icon here. I'm gonna use done here to get out of there is gonna zoom out and then bring my carrots over here, make it a little bit bigger. Maybe do a thickness of two, maybe 2.5, and that's good. And then I want to make sure that I pleased it right in the center and unless changed a stroke color to can't really see that here, um, that works. Let's go ahead and rename this components service list and let's head on over to our mock ups now and insert that component by going to assets that we see right here. We have a service list. Let's go ahead and drag that in. So already Aiken tell, I want to make couple changes to it. I think we can make it a little bit smaller. And then let's go ahead and add a divider as well. So we can kind of see the next see the next option in the list and differentiated between them. So I'm just going to quickly go back into components. Let's select the whole component and make it 95 pixels in height. And then I'm gonna bring my store name few pixels down and then maybe aligned these here instead, and these ones as well and really bring them few pixels down and then go ahead and put this one in the center again. I think this will work. So let's go ahead and draw a line. Make sure to keep it street using shift and have it stretch all the way. Use stroke color. Let's use control, see and go ahead. And just like that, color from the carriage. Then maybe make, uh, maybe we can make it a little bit lighter. He wanted to be subtle. I think that's good. Let's go ahead and just select it and bring it all the way down. Just one pixel at the bottom. Okay, I think we have that right here. So now if you go to mock ups, I think that looks better. We can just go ahead and use all too. Bring that down and then hit command de bunch of times just to see how that would look like . I think this works 28. Sample Data from Google Sheets: Now I'm gonna show you a really cool plug in that we can use to actually fill the data for these services over here. Um, so let's go ahead and search to plug ins, open up, man managed plug ins, and then let's go ahead and do browse all plug ins. And I'm interested in this Google Sheets sink option here. If you can't find it, search google sheets. Sink right here. Go ahead and install it. This plug ins super cool. And I think it will be handy for your future projects as well. All right, so once you've installed that and you're back in here, we won't actually go back to our components tap here. So go ahead and full along with what we're doing here. Go to the store name and change the text here to, um, do a hashtag sign or a pound sign like this and do store underscored name and then for the dollar icon here. Uh, go ahead and name it. Total underscore Price. Make sure you put that hi stag or the pound key here. Change this 12 dates with the hashtag before and then status will be hashtag status and I'll tell you why That's important in just a second. Ah, once you've renamed just go ahead and double check that you didn't make any any typos in there and what were in here. I just want to do one last thing. Go into here for your store name and make sure to stretch it all the way to maybe right over here and just make sure the same thing with the date. I think it looks good. I want to select my date and status and bring them couple pixels down. And also let me go ahead. And I feel like we should move these up and center them along. My component here s so let's group them together and then use a vertical line. I think that looks better. It's now if I go back here. Yeah, that looks way better. Now watch this slight your services frame go to plug ins on. I do Google sheets sink. Go ahead and enter. This link, which is in the resource is for this lesson. So go ahead and take a moment to download that. Get this link from that text file and put it into here. I've already gone ahead and made this sheet this Google sheet with sample data. So sure in a second what that looks like. So if he actually opened it up, you'll see I've put together this little ghoul sheets with my data with my store names. Ah, a couple of dates, some prices and some status and random items. There's all round and data random data just to help us generate our screen. Um, so with this Google sheets, go ahead and use the link again and put it here and then go ahead and choose update the current page only, and then use fetch and sink, as you can see here are page is not completed. It's gone ahead and used that Google sheets and generated this page for us. Of course. That's why we need to do rename our fields so that this plug in will know what to grab from where, um, yeah, be sure to read their documentation. You can do so by going to Google. She'd sink and then clicking this little, um, information icon down here where you can actually access their documentation and then see how you can use this for your own projects and set up your own, uh, Google sheets. But I found that pretty cool. And that's why I wanted to include it in this lesson and tell you guys that you could do something like this. Lichens, that you have access to our super powerful. So take advantage of them to generate your designs and save yourself a ton of time. So with that, um, I think our pages are pretty much all done here. Now we're gonna come back and learn a bunch of other things. I know at this point, you already have a lot of knowledge about Fichman. Hopefully, you're able to actually use this and apply all you've learned to your own designs on. Really? That's all this course is about is to experiment with different tools that figments given you to generate some really nice designs. So before we wrap up this mock up here, we're gonna come back to it and do a bunch of things to make it even better. Um, so I'll see you in the next lesson. 29. Finding Custom Fonts to Use: All right, We've completed our mock up in the last lesson, and I want to take some time to go over our mock up and find opportunities and places where we can improve it, starting with the text and typography. Um, so I'm going to switch over to a couple of resource. Is that have included Ah, in this lesson. Go ahead and open them up to check them out. I'm just gonna quickly go through those Resource is eso. You know what you have access to? Um, First of all, if you're trying to use custom fonts in your figment projects, be sure to again download this font installer right here. So this is only required if you are using the web app. If you have the desktop app and you're using figment on a desktop up, you don't need to worry about installing this font installer. So fig MMA itself uses hundreds of fonts accessible on Google fonts. As if you head on over to foreign. Start google dot com, you'll be able to access a lot of funds that are available in Sigma. As always, explore some other ones. I'm not sure which funds are currently on fig MMA, but I'm sure you'll be able to find that out if you're looking for a specific font. Otherwise you can definitely downloaded from either Google fonts, which is a great resource for finding fonts, um, or another stores resource such as the adobe fonts as well. I believe this one requires a subscription or a membership for the creative cloud. So go ahead and check this out as well. You get access to tons of fonds, so you go ahead and browse. These resource is if you're looking for a custom font. Another cool website I want to mention is fond pair Darko Ah, this website gives you a bunch of funds pairs that you can use, um, with different kinds of fonts that would look good together in your projects. Um, there's a couple of different funds here that you can explore and see which one you like and which one you want to use for your own projects. And this lesson we're gonna go ahead and actually apply this, um, fonds combination or fund pair in our application. Um, so you can do one of two things either gonna head on over to fonts. Paradox co and then download this rube IQ and Carla combination font or fount pair or again , if you go to the resource is for the project we were working on. Clean can group, um, and head on over to fonts. You'll be able to also download them from here is well and install them. So I'm gonna go ahead and just install them myself. Make sure you select all the different weights. Um, for that fund and Mac, you can just go ahead and select all of them and then just double quick to open on, installed all of them. And let's do the same for this other funds. Here. Make sure again. You select everything, go ahead and open it up and stole and all done there. All right, so let's head on over to our fig MMA that stop up again because I'm using the desktop app here. I don't need to install the font installer, but feel free to pause here and go through the front installer and make sure those funds are applied on the Web. APA's well, if you're using the fig. Ma went up 30. Creating Text Styles: so, so far in our project, we've been using the default to Roboto font here. So if I zoom in here like, for example, in our log in page or logo, everything's been using that roboto font up until our main pages here, actually. Ah, where we started using some of the IOS components. Um, if you remember, for example, for our top bar and the navigation bars here, um So once we started using that, everything kind of automatically switched to the default fonts that comes for iPhones. You? Why that we also installed, which is sf pro display. Um, so I know this is super messy right now because and your projects, you typically want to stick to one or two fonts at most. You don't want to have multiple font combinations. Um, and we also talked about this in our UX lesson as both. So let's just work our way from the log in page. And of course, we have the option of going in and changing every text toe, our new fonts Ah, that we downloaded. But I would also show you a great way where you can set up styles just like we set up styles for our colors. If you remember, we set up a color scheme. Um, I want to show you how you can actually use styles for your typography and your text as well. So to add a type style to your figment project. Um, let's go ahead and first select text. Let's start with this logo text here. So we installed these two fonts. Typically, you want to use one funds for your headings, eso titles and logo text and things like that. And then the body text would be for everything else. In this case, are Header Font is Rubik and the body font is gonna be Karla s. So let's apply Rue Big here to this. Ah, logo text. So go over here to where it says text. You can change the font by either browsing through here. Um or you can also just go ahead and type the fonds name. And here, So I already know it's Rubik. So I'm gonna search that in here and now we have Rubik applied here. I'm gonna just apply Ah, medium weight here. You can do other ones. Like if you want to go really thick with black or really lights. I think I like the medium here. Looks pretty good standing out, and it doesn't blend in. So let's go ahead and use that. So sometimes money changed funds, your alignments might be changed. So go ahead and just a double check that everything is aligned properly. Um, and make sure you I'm just gonna make sure this logo is aligned right in the middle of well being. That looks good now. So now let's go ahead and turn this into, ah type style that we can use on all the other pages. And again, the benefit is that if you at any point decide to change this font, you'll be able to do so in one place, and all of your pages will have that font and the styling applied us. Let's go ahead and go to style here. Let's create a new style. I just want to name it, um, header, do a little dash and then just give it the name of the Fonds here. So it's Rubik. Let's do 26 point. That's just the name here. You don't have to put exactly what I'm putting in here. That's just for me to be able to identify my head of font and easily see what size and font it is. So create style. And so now, as you can see here, if I go ahead and click on this again, this text has been attached to this type style of Header Rubik 26 eso to demonstrate if I go to this tutorial card, for example. Now, if you remember, this is an instance of a component, so we wouldn't want to edit things in here because otherwise it wouldn't be applied to the other tutorial cards. So let's go ahead and go to master component from here, and it should take us right here. Now if I go ahead and click the title over here and then go to my styles here, I can apply the same header. Rubik 26 style. That's the only style we have right now. But let's also set up a body style for this text here using our other funds, which is Carla. Let's go ahead and change the text to Carla and let's go ahead and maybe bump up the size of 17. Go ahead and create style. Let's do Body Dash Carla, And this one was 17 point great style. There we go. And now I have a body style textile as well. So while we're in here with our components, let's go ahead and apply that to all the components here. So let's select our But it enabled here and change the text to Carla as well. And then I want to go ahead and make it bold and change the font size year to 17 as well. I'm just gonna make sure that it's centered here. That looks good. Let's go ahead and create a style for our but in text here as well. So I'm going. I'm going to do body Carla 17 points. Bold in here. There we go. So now that button has that cell it's even implied in here as well. Because again, this is an instance of the this button right here. All right, so let's go ahead and apply our fonds to our ah two components here, So 1st 1 to store card. So let's go ahead and select this text here. Um, we're gonna set it to our room Big fund here and let's do medium for the size of thing. We can do 22. Let's go ahead and add this textile as header room 22. I remember you don't have to create, um, a style for every fund, But if you think you're going to reuse a certain font or the state a certain style of fund on multiple pages or multiple components, I think this is the better way to do it than to individually change all of them. So let's go here and then select our styles and do body Carla 17. Same thing here, Lastly here is. Well, let's go ahead and just make sure everything's centered. Gonna center. All of these stocks could make sure these air also centered. Perfect. Let's go over here. Let's in our services list. Ah, component. Let's go ahead and change this one to the header Rubik 22 that we set up. And these ones are gonna be the body Carlos 17. So, with those selected, let's do, um, body Carlos 17 and then maybe do bold for the price here. So let's unlinked this or detach this style and do the style of body Carlos 17 Bold. He looks better when we go ahead and just, um, bring this a few pixels down a few pixels up and then go ahead and bring my store name here down and try to line that with the other text here. And maybe we can bring this few pixels down. I think that might look better. We're gonna go ahead and group these two together as well is in command G on the go ahead and select these doing. Make sure they're centered and also center them along with the rest of the component here. I think that's good. So are components here now have the right fund. So why don't we take a quick pause and then apply or textiles to the rest of our mock ups in the next lesson? 31. Applying Text Styles Everywhere: All right. So our components now have textiles applied. And if we actually go back to our mock ups, we can already see some of those applied, like here with our buttons. Um, of course, like things like this forgot password button. Because it's not a component hasn't been applied. It's always feel free to check. Go back in here and then select the right phones. Just go ahead and align them again. Maybe bring this down a little bit. Bring these two little bit up. That looks good when I select my terms here and also said it to style of Body Girl of 17. Bold. Just gonna stretch it all the way through. Now, if you remember before, we didn't have this end as, ah folded font. So you can still go in here, double click and choose the word that you want or multiple awards and then, ah, use the shortcut command be, um and then that will go ahead and on un bold that port. And what else do we have here? We have our payment. Let's go ahead and select all of these. Do a textile body carla, 17 points. That looks good. Or but in our automatically has that Carla text. Let's change this payment to header Rubik 26. Just gonna stretch that out. Center it. That looks good. Let's see what we need to change in here. We just need to change the search text over here, too. Must do body Carlos 17. And again, Make sure you center on the line things properly for our main pages here. I see my cards already had the font applied because that was a component. But I think everything else, um, other than the navigation and top boards here are inside the page. So why don't we go ahead and first do the top bar in the navigation bar? So let's double less quick into one of the components here, or one of the instances of the navigation bar, go to master components. And then here let's apply the same phones here. Let's do Let's actually go ahead and select Rubik as our font, trying to keep everything else the same. And then let's go ahead and create a new header. Lubick 36 point. It looks like I just made a mistake here in the name. It's actually a 34 point font So just go ahead and edit style and change the name here to 34. From here, you can even add description. So if you have a team and you're working with them, you can tell them what this phone should be applied to. Things like that I want to go over here to the tab, are Make sure you don't have any of these ones like that, but the top are itself. Didn't go ahead and change this to Body Carla. 17. Bold. Fix this and this center. Let's do the same thing, this holding shift here and then doing the same thing. Let's go ahead and center my text year. Bring it down. So looks like it's just 15 pixels from the bottom. So let's maintain that 15 pixels from the bottom and make sure that that and this are centered as well. And it looks like it is. You don't need to change the status bar because that's gonna be the default fonts in there . Uh, we won't have any control over this, so let's go back to our mock ups. So the navigation and tab boards here now have the right font. Except for this button here, So let's change that to Body Carlos 17. Bold looks good. So it's going to here. Let's select style and do this style here. Or let's actually do the 22 points. One, like so So this page looks good. Now let's go ahead here. Let's actually go ahead and make the email. Just this one here. Not so it's not bold. And then choose this one as the Carlos 17. Bold Rocky, Let's do or actually, we can't even do rou big head or 22. Let's go ahead and just make sure those air centered and changed the address here, too. Body Carlos 17. Bold change these ones aligned to vertical centers. And I'm just going to repeat the same process for the other two buttons as well. Feel free to pause here and do that on your designs. All right, so with those applied, I think almost everything here has that new font, uh, the only exception being these two fields here. So let's just jump in here and make sure those are also using textile of Carla 17 and center the vertical. Same thing here, All right. With our two new fonts applied to our mock up. You can see things look a lot better now. Ah has a unique taste to it. The whole app and the whole markup feel. Um And if I go to my services page, I see some of the text here looks like is too big. Like, for example, the date stamp here on the status can probably be a little bit smaller than this. So when we go ahead and select this go to master component and then for these two, I'm actually going to detach the style and then use a font of 14. Let's go ahead and that she actually changed the fill color too. Ah, a bit later. I think that looks good. So when you go ahead and create a new style from that and maybe do this one as body Carla 14 don't apply the same thing to our status text here. So let's change the font here. And when applied, the same fill 585858 All right, so that looks good. So now I just want to quickly switch over to my styles over here for my color scheme. I have a primary Texan, a secondary text. So I think we're not gonna actually go ahead and dive into adding some primary texts and secondary text color here. But you can go ahead and do that and then, um, from our components, or wherever you want to add similar colors for the tanks of you have here, instead of having a custom one here, you can just go ahead and actually use ah, your color styles. But this time you'll be able to use color style for the text. We won't jump into that here, but feel free to apply those to your projects. Now if I go back, things look a lot cleaner here. So yet wherever you see things look a little bit odd, Feel free to go ahead and change the color like we've done so. Weaken. You can apply the same colors to hear a swell, um, and wherever you see you have text that you don't want it to stand out as much as the other text, feel free to go ahead and apply multiple color styles based on your text. So there we have it. That's our types styles here, very useful and fig ma and definitely go ahead and apply it and keep in mind you have access to it from here. Whenever you just select your canvas here, you should be able to access your local styles both color styles and textiles here and then From here, you can actually go ahead and to make them as well. So if you decide to at some point, let's say make your header 30 points here, as you can see in my project, it will change everywhere else. Um, of course, you might need to go in and tweak the sizes of some of the text boxes here, but feel free to make tweaks and apply this to your own projects as well. 32. Final Touches: All right, So if you've been falling along so far, we've pretty much completed our first mock up here. In this lesson, I'm just gonna dig in and publish things up a little bit and then add some of the necessary things that we need. So let's just go ahead here and make those changes feel free to follow along. I also encourage you to go through your layers panel here. Ah, and it really makes sure the naming of everything inside of your layers the grouping and all of that is correct on it Makes sense. I'm not gonna do this in this lesson because it would probably take too much time, but definitely feel free to do that on. I always encourage that you stay organized with your designs so that not only you but also other people, maybe people you're collaborating with or you're a team, um can make sense of what's going on with your design and each of your frames. So first thing I want to do here is actually go ahead and apply the status bar. Ah, that we have here to all the other pages as well. So right now we only have it on these three pages. So to do that, um, let's go ahead and start with a map page first. Let's actually just go ahead and copy the status bar from the request page because it would be very similar on and select your map frame and do command V or control V on windows. Let's go ahead and bring our search bar a little bit down. That looks good. And then let's go to our payment page here for a payment page. We can just use a simple status bar like this. Ah, because we don't have anything underneath to have to blur it. So go ahead and just copy that and paste it into here. And then for our tutorial. Step page here. Go ahead and copy it in here. So, as you see here, the status bar is way too dark for this page. Um, typically on darker pages, we used a white status bar, so head on over to our IOS. You I components file here, So if you go over here, if you still have this open, you should be able to find the white version of that status bar as well. And then you can just go ahead and select the whole thing here, and you can go ahead and just copy it from here and paste it over here. Go ahead and just used shift and Iraqis to move them up. And then, of course, using command option K or control alta que on windows to create that as a component. And let's go ahead and rename this 12 status far forward slash light and renamed this 12 status bar forward slash dark. So this way, if you go back to our mock ups, we can just go ahead and simply choose this as the light version from the site. We can go ahead and copy that to our log in pages. Well, move things down a bit. Um, gonna go ahead and just move my guide here. I think that's good. Maybe move this down a little bit, too, as well as everything else here that looks good. Now, you might have noticed we use a lot of icons from, ah, that website flat icon dot com. So if you don't have the full version or a subscription with flat icon, um, it's definitely required for you to give credit to the authors of those icons. Eso go ahead to our resource is for the project here and then open this app known Start txt And then down here, you'll see. Ah, there's some credits here, so let's go ahead and just copy that. Ah, and just go ahead and paste it somewhere in our project here. Um, now, of course, because we're not, um, developing this app, which is designing it, um well, just need to pass this along to whoever is developing this application to make sure that they put these icons where it belongs in their application. You'll notice the casing is all uppercase here. So why don't we go ahead to our text options here, click the three dots and then changed the casing to just lower case on. We can bring this lower here and on another takes to say, icon credits both that there and put it here for whoever wants to use the's in their project. So it's always important to do if you're using icons that require attributions. Last thing I want to do here is just improved My payment page here. It looks to plane right now, so let's go ahead and bring this, but in a little bit lower. Um and then just go ahead and bring my credit card a little bit lower as well. I want to go ahead and insert kind of a description. Text here on say, please credit card for your account. Now, as you can see, my text is going on and on, so what you can do is go to the text option here, click three dots and then go ahead and make and you can go ahead. I can either choose auto height or fixed size. So if you choose fix eyes here, we can go ahead and, uh, bring our text here and resize it to maybe match our but in here, So 25 pixel from the side. Let's go ahead and remove this from here. That looks good. Let's go ahead and move the credit card a little bit lower. Go ahead and detached the style and change it to that's right body. Carla 17. And let's do a little bit of a lighter kind of phones here, and let's go ahead and just finish this text here. Please add a credit card for your account to use for your laundry service looks good. I want to make sure this is 3 25 and then center here may be lowered a little bit. Had some breathing room to my design thing. That looks better. Maybe we can center this as well. Perfect. Sometime. It's good to add these kinds of description prompts to your users either to tell them why were collecting this payment credit card here or or tell them when this credit card might be used. And that concludes our mock up design here for the mobile app. So if you're also interested about doing a Web project or a Web app designed well, we will do that in future sections. Now I want to give you an exercise to do for yourself. If I zoom in to my request page here, you'll see we have our choose laundry store. The idea here is that they scroll through the different stores and find the one they like to request their draw laundry service from and then they hit this request service button. But there's really no feedback to them right now and are designed to tell them that the order or the request here has been placed. So feel free to add a completion state or some some sort of feedback to our user. Maybe some sort of card that tells them your order's been placed or your request has been placed. Um, they'll be pretty cool. So go ahead and add something to tell the users that their requests has been sent in. Um, and then once you do that, feel free to include me in your project or email me and I'll be more than happy to provide some feedback for you as well. Great. 33. What's Next?: All right. So congrats on finishing your first mobile mock up. You I This is amazing. Together we worked on a full seven page mobile mock up for the clean kangaroo app. So what's next from here? Well, there's a bunch of ways you can go toe either improve or play around with our current design or explore fig MMA, and you UX design even further. The first thing you can do is go out there, maybe download your favorite applications and really get inspired from them. A couple more resource is that you can use online includes going to Pinterest and searching for user interface design and mobile design, or even going to the website patterns dot com, which is spelled p t tr n s dot com. From where you can browse a bunch of different mobile, you wise that you can get inspiration from and maybe apply it to your own You I designed as well. The second thing didn't do from here. It's actually go ahead and create a prototype out of the design that we've put together. So what a prototype allows you to do is to actually see your application come to life and create an interactive prototype for people to actually use for clients. For whether it's investors for your own application or whatever the case may be. You can show this prototype to developers and half in Crete. Natural application from this. And of course, if you want to expand your knowledge of U. S u X trying web you I design is definitely a good next step because it will give you the advantage of knowing both mobile and Web design. And this is really important because many clients and many obligations thes days required both a Web and mobile version. So if you have this skill set, it will definitely help you. Now I will have a course were all covered, prototyping sharing and even a Web do I designed in the coming weeks. So feel free to check those out once their life and, as always, might notice Hello, clever at gino dot com. Stuff like this feel free to share any design that you have or any questions you may have, and I'll be happy to answer them with That said, I'm looking forward to seeing you in a future. Of course,