Figma UI/UX - Design a Budget App UI/UX - Using Figma - (Complete Project)

1. Introduction: Welcome to this course. My name is Yes, Toni Jo three and Alba instructor. In this course, I am a fullest tax after develop far And you want ux designer you We're going to learn how to do that mobile, Have you? Are you excusing fig mob? Fake my east One of the best tools for designing you are you x. You will learn how to use different source off tools within the fit MMA once he will finish this course you will, aunt, of learning how to use every tool of Fatemeh and how to make are really Walt f you're ux. I'm going to show you how to design a complete A budget management. After using Fig MMA, you will design several pages for the budget f and you will learn how to use a different source off tools You learn how to create group component or a gentle isco few particulates , school view any mission prototype how to export a design and many more things 2. Design SignUp Page Part 1: welcome to discourse in this part. We're going to go ahead and get us to the working with Sigma. So for working with figment fast and foremost, we need to visit figment dot com. So just open your browser and type Friedman dot com. Once you will. Inside this figment dot com, you will be able to see this sort off user interface and and in here you will be able to find out a lot of information about fig, MMA animated videos and different sort of things. If you want to, you can read it. You will be ableto get a lot of ideas about it, and they have some sort of documentation. So that thing you need to do is first and foremost. If you are a new user in fig mad that you need to make sure that you have an account in figment dot com. So for working with FEMA, you must need to have an account in fig ma dot com. So just click on sign up, and once you're here, either you can sign off with your Google account or simply you can live your email and password. And after signing a pro sign off, you can simply log in. So once evil looking to figure dot com using your email and password, you will be able to see this sort off dashboard. Maybe if you are a new user, then you will not have any any file here, as I have worked a lot on it. Therefore, I have a couple off off now projects here that you can see here and the thing that you need to do in order to work with our new file. So in the right side corner you will be able to see a plus icon. And in the left side you will be able to see stars resented Blufgan jobs and some other options. Okay, so folded and on the bottom you will double toe a work as a team. So for us, what we need to do win it. And if you want to import your existing project than it was simply imported by clicking here and as we're a new so we need to create a new file. So for creating a new file, we just need to clear on this plus icon legal new file, and then it will give you a pop up window and in here you will be able to see some custom. Our template. We can say Either you can choose a blank canvas. You can choose iPhone 11 approach. You can choose poor deck stuff. And in here you have a couple of other options. So for me, I'm gonna choose the blank canvas so that I can show you everything from its cross. And then he had filed. And once he will do it, you will be ableto access. Are this window? Once you're here, you will be able to see on it on you can say navigation bar, then the left for and then the right bar. So on the top, you can see a couple of icon. And these are the tools that that is required for designing any sort off mobile. Our web application using figments When Here you can see rectum. Goal line, narrow leaves. Polygon is star placing maize. And in here we have bento pencil text. And if you click on this hamburger, I can't. You will be able to see Ah, a couple of options here where you can create new file edit view object factor Text block Is there also here and several other things. And in the right side. What about object? We will select Italy, appear well, heart of our customers and is that we will do. It will appear on the right side. So let me show you fast. So faster, foremost, we need tohave an frame. So for designing working on it we need to click on this icon and then you will be able to see our frame option. Either you can click here or you conveniently placed f Then this frame is gonna open. So once we'll click on this frame, they're in the right side. We will open a couple of options here. So for for our mobile phone, we have iPhone 11 pro life in 11 pro eggs iPhone, eight plus iPhone eight and couple of options and a couple of options. And then we have tablet. We have deck stop, waas, paper, social media or figment community and several other things. So, for our application, we're gonna work on a mobile phone. Therefore, I'm gonna select iPhone living approach makes once we will click here, so it will give us them off on mobile phone Are you way, which is iPhone 11 pro. And once you will select it here in the right side, you will be able to see a couple of options. So these are the things that we can customize it. So in w means the white off this away, and then the height. And for this icon is for our border ideas. We have these Philip shown for our color. Then we have a stroke effects and export and several on things. So we will work all of these one by one. So first and foremost, we need to chance stop name of this file. So instead of saying I fully live in pro, we can simply click. We can simply double click here and we can give a name so we can say sign up, sign up. So our fast you is going to be our sign up. Sign up base. Andi In here we will design our you wait. And for doing these thing faster. For most we need toe. So let's take health from this direct angle. So click on this and click on this rectangle. So once he was selected rectangle then we will be able to designed it this way. So So just, uh, let me show you. Show you again. So just click on this rectangle or you can simply place R on your keyboard. Then you will be able to see rectangle. So then just click on your left mouse on, hold it and then drug it and as much as you want. So let's say we need it this way. And if you want, we can also drug it this way and in here. If you want to know if you want to chance the background color here and how can you do it? So for changing the background color under this field, it will give us an template off color so we can use our own color plate if we want. So let's say if we're gonna choose and this color here and now we need to customize it here . So if you double click here, then it will give you a couple of options here. Like you can see this, a small taught and if you hold here, it caused the factor. So if you hold it here and click on this dot and if you up it, then just click on this dot and hold it and then do it this way So you can design these sort of things using Ah, these technique it cause of Hector. So we can simply do it here. And we can drag it here this way and this way. So we don't need to have it in our are you weigh So rather we need to have a border radius from the bottom side. So how can you do it? So just double click here and if you double click here, then it will comes this way and in the left side click here and you will be able to see this one and it goes corner radius. And anyhow, just press 30 and then it is gonna give us and border. As we click on the on this corner and again do double plea and play here and then again at here 30. Then we will have this border radius from both sides. Now, on top of this now, in here, we can at we can design some sort of present. We can say so for doing this thing, we can simply ah deck health from this lifts, we can add it this way. And if you want to move it. Then there is a tool it cause move. Praise V or click on move. Then you can move it here. And then you can change the color off this tool. You can change the color of the stool. And then if we press, if you do double, click and click here. And then if I cut it. Ah, a mistake. Not this way. So the thing we can do once we'll click in the left site, you will be able to see the in the right side. You will be able to see a door here and then if you want, you can jacket this way, all right. And what else we can do here? So now in here we will. We need tohave. Ah, new. We need to have a new rectangle so that we can put our email address, passport field and our bottom. So for doing this thing again, select on this rectangle and in here we're gonna go ahead, Andi, select our rectangle here and then we can simply added here. All right, now, this time I need to have border areas from all the sights and therefore simply what can I do double click. So simply I can do so. You can see Ah, we have Ah ah. We have four daughters in the four sides, so we can simply click here. And we can simply Marcy this way. If you if you officially anyone, if officially any obvious and then all the side will great water radius or you can directly selected from here so we can if you want a grisly greatly slipped from here it will also work now in here lists Jan star bagged on color off it. So the background color. I'm gonna select this one. And now it looks pretty good. Now in here, we need to add our email address, password and our butter. Right? So for doing this thing first and foremost, we need to have what you need to have. We need to have our text here so we can simply click here and we can do one thing fast, Adaline. Then we will add our text. So click on this line and in here we can and drew a line here. So just click and drag it toe right. And if we want to know, we cannot see this line probably because it is so tiny and we need toe increase the s truck size. If you want to increase the stock, simply increase it here and we can see now it looks good and know that matches the color. So if you're gonna chance the color in here inside this field, then it is not gonna work here. We will have to chance stop line color under disease stroke so we can chance it to white. So now it looks good. And I guess it is not. I can We can make it a bit more bigger. Not this one. We can select this one on. And this one. So now we need to have a text. We can say here, you mean and what else we can do? We can change the size off the phone trick Inns said 24. And since the kalak to white on. And then we can see here email. And now what can we do? We need to have a password here. So for doing this thing, we can simply I'm sorry. We can simply make them group so that we can call in duplicate it. So for making group, we need to slag this email and this light. So simply press control. Then select this one and then this one. Then after selecting those two figures, right click here it will be able to see off shown it calls and group selection. So either we can select from here or you can simply press control G. Then you will be able to make it group. Then if you want to rename it, then we can simply rename it or you can press control are we can say you, Millfield, Then enter. And now we need to have the similar type of things so that we can simply dio duplicate it sold, make a duplicate just like this group that we just created. Then press control de Then it will make duplicate. You can sit in duplicate selection and now if you drag it then you will be able to see a duplicate copy. Now, simply you can chance it stands. The text email took bus work. You can say Okay, we can edit text here. I'm sorry. Let me to control Checked. So instead, off doing this can simply toe is they pass What? All right, So we are done with our email and password. Now, in here, we should have a bottle. So for making a button, we can simply take health from our rectangle and then drag it here and drag it here and then in here. And we can make border radios 50 and then chance the color. You can choose this color here, and if you want, you can choose this sort off offshore. Like the sword of Gideon. You can choose linear ingredient. You can choose radial ingredient. You can choose diamond. You can choose angular. You can choose a maze and different sort of things you can choose. But for me, I'm gonna choose this. Uh, I'm gonna choose in this color and then in here we need to have a text in, said Thies In the media, we can simply say sign up and then we can just the color do white and then drag it to the center. So now it looks pretty good in here. What is we can do? We can make our arrow here so you can see our tools called arrow. So click on the arrow and in here we can design it Is any arrow here, Onda, We can design A and no here. And Jim stay struck five and jeans the color too. Might. So now I guess we need to make it in this point. And we don't need to have a stroke. Five. We can say simply, she will be good here. And I need to decrease the size off this one and drag it. Obviously. So now it looks pretty good. So we met this sign a button here and now in here, we can simply edit text. If you there has already account, then they can go for signing. So for that, just select on this text and in here we can save. We can say, uh, already have account. I think so. It is becoming a big a text. We can say ah, have account or we can say are incinerating a tech stuff. What is so we can do? We can simply ah, send them to logging. So in here we can edit text and our arrow icon here. So for doing this thing, we can simply slick. It takes here, we can see log in here, and then we need to have a off arrow so we can simply duplicated press control D and do bigger selection all and drug these duplicate one and paste it here. So I guess we need to drag it a bit here. Okay, so and the text here and add daikon hip. And then we can change the color black to white for this logging. So if a user has logging, uh, I already have an account and they can go for logging. And we need to make group off this to fit. So sign off and this area and logging. And this s so that when we will do prototyping, it will give us an extra benefit. So for making group, we can simply slag this arrow and this log in and the slogan Cyclical logging on this arrow on Make it grew. Press control. G and press control are rename it. We can say logging and similar thing for sign up And for this arrow so it can press and mag group control. G and control are for rhythm, and we can say sign off here and then press enter. So it becomes a group. Now it looks very good. So if we want to run it, then what should we do? We can simply click on this icon. Then it will open in a new window and we will be able to see our design and let's see how it looks. And here we go, and it looks pretty good. So we did a good show. Fear and our application is gonna work. So in the next part, we're gonna go ahead and get started working with our log in section. So right now, I'm gonna go ahead on and stop this video here. We will continue it in the next lecture. So see you guys in the next lecture by way. 3. Design SignIn Page Part 2: welcome back once again in this part, we're gonna go ahead and get started working with all logging pissed. So first and foremost, if you want toe design our new base, then we need to create our new friend similar to this one, right? So either we can do it. Just simply click on this frame and then select a new one and then we can descend. What about we want? But for the logging pace, we need to have a similar type of design and just want to change stuff. Text. So for that, I don't want toe are take our blank frame. Rather, I'm gonna duplicate this one. And it is the best way to work because it is going to save a lot of times for us. So whenever you will need similar type of design, so what you guys will do, simply copy your existing one, then duplicate it, then work on it. It is gonna save you a lot of times. So for that first and foremost, what can we say? Do so just click. Just slipped in the hole. Our frame which is sign off, then press control E. And here we go now we have our duplicate one. So for that, I am gonna go ahead and change the name. Sign off to signing and we need pretty much same descent. So if we want, we can simply chance the color. But I don't want to chance it. So rather, I'm gonna go ahead and just Jan star text here, So simply we can say so instead off Sign off. We can say sign in. So just you moved the up and adhere in. Sign in and then we need to have what I want to have here. So now we have signing. I guess I did up big more space here. So do this thing to say Now it's good. So once signing done, then we need to change this log in tow. Sign up. So simply Jen's that text sign up. Same up, so that if you that want to create a new a condom, they can move toe our centerpiece from here. So now sign in and sign. Understand? Now in here, let's at oh, new text, which is gonna be our forward password so we can say for good password. Then we will give them on you off Al Abdeh, look where they will be able to show their forgot password. Functionalities. How toe Rick about the pass away. So now in here, we can say forgot password. And we can change the text size 24 to 18. We can simply drag it on the center and then chance the color toe. Quite. No, it looks pretty good, isn't it? Yeah, it is. So now our off signing paces done So weaken dough off you more things here if we want. So we can make some sort of design here on like that dot icon and then in here, What can we do? We can, uh, weakened a few more things here. Like you could do wanting. So I'm gonna go ahead and at and against, like this lifts So cliquey lives on me on the lifts and then draw some small circle so we can insert off. Drink this thing from here, we can change the height and white so we can say hi. 10 and white is also going to be 10. Now, let's see how it looks now. It looks good. No. Let me change the color to some light color against, like this blue now let me a chance the size a bit more bigger. So if we slept 15 then how it looks So I guess sipping is gonna be the best. So click on these lifts. So click on the lives and make it duplicate a few more times. So duplicate it, Onda we can at it here and then we can duplicate couple up more so with it six. And then what can we do? We can simply make it a group. Okay? So simply make it a group so we can say group on. And we can simply say circle one for this one. And we need to similar for another one. So we can simply duplicate it on and drag it here. And if you want, then we can simply change the background color. So if we change one color, like if a If we're changing our background color off a group, then it is gonna change for all the items. So there's a new thing, I guess, for you and we can simply change whatever color we want tohave here and we can do it. This whipped Nothing. Two already here And we can choose, I guess. Let me find some good color. Can it use the dark and light blue? Okay, so we can chose this one. So that's something we can do. Ah, we can duplicate it here on bond. I'm sorry. So what use weaken? Do we can make them a component? So right, click and then make them create component. So if we create them component, then they will be inside these assets. So this a new thing that you're gonna learn. So if we're gonna make any group or any item as, ah component, then it is gonna be inside our SS directory. It means that if we make something company, and then we can reuse them. So now I can simply drug it and put it here. That is what I wanted to do, isn't it? Good thing, I guess. Yes, it is a good thing. So now it looks pretty good with it. Some business here, So if you want, you can play with those things. But it is not mandatory. Now let me show you how to work with prototyping. So if you want to. So now we have only one pissed If I want to move toe our logging pace after clicking this logging. Then how can record it? So for this I think we need toe. Take health off prototype. So for doing this thing fashion for most. You need to select this prototype. Once you're here, you will be able to see a couple of options here. So when our Caesar will click on this log in button on this logging so that means that they have already have an account. Then they can. Then then we can send them to this space. So once you were inside this water type deaf and if you were selecting any item or any groups, then you will be able to see our daughter Icon will appear for you. So what you need to do? You just need toe click on this story. I can click like the long click. Just click here and hold it and then and drag it to your destination like toe with space. You want to go? So once our Israel click on this log in place, we want to goto this signing pace. Therefore, I have just drag it to here and it becomes our prototypes. And now if I run it, then it is gonna appear for us. Here, let me show you. So now if we are gonna click on the sign up, then it is not gonna work. Now, if I'm gonna click on this logging, then we are in our signing pace. But as it like, we can see signing, we can see for good password. Then we can see Sign up as it comes instantly. Therefore, we couldn't see any sort of animations. So what? I mean here. So if I click and medically we care here. But if you want, we can make it any. Met it. So once you're here, you will be able to say in direction and it has on tap. It is couple of properties. So letter, We will show you how to work on this on drug presenting miles over Khobar after delay and several other things. And then in here we have option cause never get to. Then we have a couple of other options, like open overlay swap with back close, overly openly. So I will explain it to one by one if whenever we needed and then we need to. And this is the destination where we want to go we undergo this sign in pace, but right after that, we have an option called animation on inside this and update this animation, there is a couple of animated options so we can see. Dissolve smart animation moving, move out, push sliding, slide out. So if if you're gonna select moving, then then it will be able to see a small preview here. And you can also make the Millis again, like how fast do you want to have and where you want to have a different sort of thing. If you poor sliding, then you will be able to see also this thing. So if I'm gonna back here by clicking here and if I click this logging, then we will be able to see any mission here. And if I'm gonna select moving, then we will be also Well, we'll also be able to see this animation is coming here. So moving means like that. This doesn't This entire final comes here in this way. See? This way. So, like I'm gonna keep this moving on then if you want, you can see easy in easy out whatever you want. So let me show you again. Click locking and this thing, I guess easy out is the best one for it. And then once we're here once, either we'll click on the sign of button. Then we will send them to the space so that again we need to click on the sign off growth. Then we will be able to see. It is I can hear. Andi, hold it. I'm sorry. Let me do undo and just click on it. Click on this icon and press it to this one. So we will be able to move yet. So what's it? Let me off. So we ran it. Therefore it is gonna load it again. So if I am click on the sign off, then we are in this stand up bass. Novik, if I'm gonna click on this logging pace, then we're in our log. We're in or sign in place, so sign up. Logging. And so we didn't mistake here. So instead of saying logging, we should say here, signing right, so we can say signing here. So just chance that text here, log in tow signing. And then if I click on this sign up, then we are inside. This signing on then If I click on designing. Then we're in our signing. Then we can see our for good positive shows. Then we can say we're sign off and again please come to sign up. And then we are in our sign of fight. So once you theoretically con designer but on or wants to click on this son in battle, what we will do, you send them to the to the home place. But right now we don't have any home Peso. Once we will get our home pace, we will send them to the home. Pissed. Now, In the next lecture, we will have to work on our forward pass about so that you can know how toe how to work with custom a lot dialogue that we often see in different sort off mobile applications. So I'm gonna go ahead and it stopped this video right here. And in the next lecture, we will enter of working with our forgot password. So see you guys in the next lecture by 4. CustomAlert Dialog Design Part 3: welcome back once again in this spot, we will start working on our for good possible section. So for that fasting for most, let me run it. So we need to our take our custom off. I want to design our custom from so that we can show it once. Or is the real click on this for good Passport? So right now. So in the preface part, we ended up working on our sign off field, then on our oh signing. Okay, so now in this part, we will start working for our forward pass or section. It means when our Israel click on this forward pass what? We will show them a custom. Miller there, look here so that you guys can end up knowing how to work with a lot. I look and inside our electoral look, we will show our email field on a button to send the former possible that we usually have in our different sort off mobile applications. So before that, let me show you a few more things. So once I'm clicking here, then we can see our animation from the right side. But if you want, you can customize it as Well, so just like the movement where you want to go. So once. So when we will go to signing pesto Ah, when will go to signing pace From the sign up base. So we can see this animation. We have selected hair moving then easy out. Okay, so in here So we can see these. This animation is coming from the right side. But in here you can see for before I come here. So this is the direction. If I select this one, then it is going to come from the left side. See? It's gonna come from the left side. If I select this one, then it is. It will come from. So let me show you one by one. So now if I click sign off, it is not gonna change. But if I click signing then Glickstein and then you can see Ah, once we're clicking on signing, then you can see it is coming from the left side. Now do it from the top. So click on this one. And then if I click on the signing that we can see this thing is coming here and then sign up then this. Think so What can we do? So when is really click on the sign up? It means in this one that means in this one like this one for this one, we can select this one. So for sign off for signing it will come from our top. And for sign up, it will go from bottom. So if you want, you can customize it. I just wanted to show you in the people's, but I didn't show it to you. So therefore, I'm gonna explain it here and now Let's move on our further parts of sections. So for doing this thing, we need to create a new frame. So go to this frame and click on this from section. So either you can choose from any and then you can customize it so I can simply slicked on this one and then I can customize it. So it's not a big deal. So we can What can we do? We can on do it this way. Let me and drug. It's that we can get in space. And then this one is here so we can either weaken, increase, decrease. There's not a big issue. So now fast and foremost to go to the do then section so we can Jansen name and And we can say what you can see. We can say for good, that's what. And then in here we can select 50. Then we will get this shadow. And now let me chance the background color. So for changing the background color, we can choose any sort of color that is related to this field. Oregon, choose this color. Okay, we can choose this color here and what does he do? So let's at all He lives here for a circle. So at our lives here then and drug it here and dance the background color. So let me show it here. So if you want, you can drug the color plate and you can Oh, see it here The life changes. So what color we should choose. So let's just this color. I guess this color looks good. OK, this color And in here we can add icons afraid ing an icon. What can we do? We can simply install some sort of black in. So, as you can see, I have installed off black and call I qualified. So if you are new here And if you didn't install any, I mean any plug in then for you. So goto this plugging and go to this Manus plugging so once you will hear it will give you a new window. And in here you will be able to see all sort of plugging that is available for fig MMA, and you can simply what it condo's you can oh, simply use any icon that is installed here. So I have been stole this I quantify here, so you can see. So this one I can, I guess I have means told it earlier and different sort off in here. You can also see the plug in and you quickly here. Then you will be able to see a different sort of blackness that there you can simply starts . And in here you will be able to see so featured plug insert. Those are the future floggings. And in here you will be able to say, browse blogging and then you will have starts off shown. So if you want to install any plugging, then select a plug in and then you see, I have installed his I qualify and just click on the install button. Then off. It'll work for sure. So I guess I didn't install it? I don't know. So let me click on it. Install and first goto this icon. If I onda once, he will click here. Then you will be able to see this icon This install button. Then you will be able to see the details off this plug in. So it is worryingly similar because I have installed it already. So you can simply install this way so you can install I qualify. And now? So if you want toe important this icon, then goto this plug ins and click on this icon If I on it is going to give you a hug Oh, it will give you a new window And you will be able to select your desire icons, whatever I can you want toe show in your application. So it takes time. I guess it is related to the Internet connection. Oh, I don't know why it takes so you can see it has couple off. I can hear You can choose any of them if you want. Andi, I don't know why it is not coming here so I can slit any Rocard while running this plugging so this pregnancy than working for me on. And so instead, what can I say? Uh, let me show you this icon this planning if it works so it is working. But I got an issue with this plug in. Oh, and what about this map maker? So let me on you install this plug in uninstalled and let me install it again Black and installed on DSO This map maker pregnant is also working So let me give it a try Toe this icon if I one more time and let's see So finally used to working So it was showing in Europe And now you're still working So you can say different sort of icon is here and you can choose any icon whatever you want So let me sarge some icon here if we can get so this and Don icon is here or this one So once he was selected here you can change the color and you condo's Oh, you can chance the hide wide and several other things If you want, you can just play with it. And so once he was selected, you just need to click on this import. I can't. Once he will click on this import icon into labor, it will see our missus. Then close it. And then you can see these iconic staple here. So it will appear toe somewhere to your project and you need to find it. And then what can you do? You can simply added here on. Then chance the and hide and white orbs like I gone. So what are gonna do it? Ah, we can simply do it this way. Ah, we can So they say can increase the size and decrease the size. It's not issue than chance, the color toe white. And let's see how it looks. So it looks really bad because with this background color, So I'm gonna change the background color. So let me at not this one we can choose. So I'm not getting any good Bagram color here, So I guess this color is good. It's related to this. And this No circle is not looking good because we need to have same hiding white. So, gents, the height to one on 10. Then it will be a perfect circle. No. Once we're done with the circle, we can do these things here. All right. And in here, we need to add are filled. So how can we add a field so off? If you remember that in our previous spot in our our earlier parts, we added others email field this past what feel so And we met them are grope right again Say these email field. But now if I want true Oh, get this feel here instead off doing the design again and again I cannot do it because I have just married group Andi I cannot do it thing. So in the previous part I also shown you how to make it component to use the data again and against therefore, what can we do here? To minimize our work? We can simply make it components. So just like this group and right click and create component once he will create it component Then goto this asset And here you go. We have this email field here. So what can we do? We can simply drag this email feel here and here you go and we can get the exact same feel . Hear See how easy it is We don't need toe. Make the design again and again. Even if you want, you can customize it. You can customize it any time. All right, So now in here, what can we do? We can add a button. So if you want, we can also add We can also make component this one and then we can on get it here. But it's easy to add a rectangle. Therefore, I'm not gonna make it component here on. Just practice it this way and then weaken against the border. Radios toe 50 and against the background color toe block. And then we need to have a text here on the medial and we can say sent. And we must need to chance the background color because our back Nicholas Black and our text color is black there. If we cannot see anything but if you gents the color do white, then it will be good on. Then we need to drag it to the middle. Andi, for Kennedy off, we can simply copy this icon control de maggot duplicate. So I married duplicate, and then I'm gonna drug it here. Here you go. So now it looks pretty good, isn't it? Yeah, it is. Now. I guess I can drag it a bit closer. So now it looks pretty good. So we're almost done. But now how to connect this thing with this one? But look at here. So look at here. So now at the moment when we're clicking, we're moving to a new place. It means that we're never getting from one place to our new place, but for the forgot password or for the customer dialogue that we often see in different sort of moral application. But we can see is that once click on it are new window are new. Pope are going to come on the same screen. We don't need to move to the next place, right? So how can you do it? So the same thing we're gonna to in here for our forgot password. So for doing this thing first and foremost, goto this prototype. And once you were in this once you were in this prototype, you need to make it with this forgot password so we can see slick the forgot password text , and then you will be able to see this dot Just click and hold your mouse and then drag it here. So it means that When Israel click, then we can move. But the task is not finished yet. At the moment, if you click on this forgot password, we'll see it is coming this way. But this is not the way to show or custom. L Attallah let me show you how to work with this thing. So in here. So all the thing is here, so any her you can see in direction and on type wanted means. If we click, then we're gonna take our action. And the caution is that what sort of actions were an attack? So we're gonna take So previously we were saying Never get to It means that never get to a new place. But we're not going to navigate toe any new paste. Rather, we're gonna open overly. We need to select open overly so that it can open on our sympathies. It means that it will open on the same pace. Let me show you. So now if I click on forgot pass What then it is gonna open in the same. Please notice that we didn't move any new place, right? This is what I want to talk. Show you now. You still need to customize it a lot because in here, So once you selected, then we can define our overly where we want to show our custom. L adelo, Either we can show it in center top plate, off center of right bottom line and several other solar said bottom center. No, we can see in bottom center, right. And then you face licked it toe top center. Then we will be able to see it in the top. We can see, but we can not see any changes in because the color has become the same as our o log in and sign a peace. Therefore, I guess it's better to chance the background color off this base. So just chance it a little bit dark. Then we can see and what else we can do, we can minimize. Just, uh uh It is not gonna work this way. I guess so. Now it looks good enough. So I have just decreased the size off our customer left. I look okay. No, inside the sport of five. Again. Select this one first and then, ah, top center against, say, oh, centred. Then we can see it in our center, but it's Still, we have a lot of options to do, so you can play this way. Either you can select or according to your choice, you can sell anything. But for me, I'm gonna select center because it looks good inside the center on then and then in here, you will be able to see so you can see the options. The intimate options here and then you can see are left are gone. So rather, I am gonna sleep the center then are in here. You will see two options close when clicking our site at background behind over so close When click are said, it means that So this were when I said that when we click outside of this customer at that Look, we're saying that we need to close this electile. All right, But now if I'm clicking are set off this land I look it is not closing because I didn't check it. So now check it now if I click our site that it has gone now at Baghlan behind overly so If I want to add a background, then we can simply add our background here. So advanced that wants we'll click on Forgot password and inside the these. If I want to have any background, then we can do this thing. So I guess we can choose your local out here so that you guys can understand it. So click on forgot password. See, our shadow background is coming. Then once we're clicking, then it is coming back. You can do this thing and then you can also do the animation. So the animation process is same like the previous one. Either you can choose stop to bottom bottom, put off and left, right? Anything, whatever you want. So click forgot password and then it is coming from the left side and click It's gone. So now we also need to make sure that when our Israel click on the send button Well Oh, what it will do We will close this overly right. So for that, what should we do inside this indirection instead of non? We can say we can over against their we can simply Once we'll click here, we will send them to a new paste maybe from ah, home pace or the log in place. So for now, let's say we're sending them to the sign in place as we're coming from signing. So, uh so instead, off never get to weekend, Say close overlay. So instead of open offer late, we're now in here We will say close over less. And now open this one and once weekly consent, then we'll close it. And if I'm clicking outside up this Al Abdullah, then it is going to remove again Click. It is gonna appear Leaguer Sigh it gone again. Click on dissent And it gone so not used to working perfectly. So if you want to dismiss the dialog what they're clicking our button. In that case, you just need to make it close. Overly? Then it is gonna work fine for you. And I guess so. Now click on the sign up than our sign up pages here and then signing Plea consigning our signing paces here. Click on Forgot Password and we can see where for Good Pass award. Click our site and it has gone now and I've talked for dispatch. I'm gonna go ahead and stop this video right here, and we will continue application from the next lecture. And in the next lecture, we will sort of working for our home place. So see you guys in the next lecture. My by 5. HomePage UI Part 4: welcome back. Once again in this part, we're gonna start working with our home piss. So it means that after finishing sign off logging, then we will send We will send our users to your home. Pissed. So basically, we called it home Piss in mobile application. So for these first and foremost, we need to have our new friends. So click on this frame leak on this frame and select iPhone 11 probe on in here. We can see this thing, but the size is decreasing, so we can are increase the June in. Are is so what can we do here? No, we can do it here and then again, Jamaat. So no, this is the perfect size and no, what can we do here so fast and foremost? We need to change the name. So click here and change the name and we can say home here. So once we will say the nam is home. And then we need to change the background colors click on this design and we need to chance are new color. So before that, what we need to do. I guess we can increase the size a bit more instead of saying 50%. Let me add 75. So we fire mating 75. Then it is giving a lot of this pastes come out so we can design it. Then we can. Ah, but in here we can see the prop your site. So it's not a big issue, so we can do it this way. And then first and foremost, we need to add our Eber, so we easily call it Upper. So click it, Drug it here and gents the color So we can just a color for our Ebbert And we can say But we can say here. So first and foremost, we need to add our text here and in here we can say Bodgit minutes man on. Then we can change the size it into 24 chance the color black toe white. So we can say budget management or whatever name you want to say Here you can simply say it here. It's not a big issue here, Andi. Then what can we do? So this is star Men part. And then we need to change the background color off over ever. So, for that's like this frame once it was like this frame and we need to change the color. So I have selected a color. So I'm gonna slick this color so you don't need to copy the hedge so you can choose the color court and then go be it on basted here So you can simply look at here like 1911 c 47 which is the court that I'm gonna use or if you want, you can use any coat, any color. So now this court is giving us this background color and now see this aber background color . It's not good meeting for this one, so I have another color. So I am gonna copy this one here and let's see if it looks good here. So when you will work on your project, then you will have to choose your color so that it looks good because color gives us a lot off Are things that can change the look off any sort off mobile application or weight application. Therefore, selecting a color, it's a big deal, and I guess it is not looking good here. Let me select few other colors. So if we can, so we can choose this color so we're just doing these things. As for learning purpose, therefore we don't need to Ari off it. And then in here we'll have to add a card. So this is the background color. So let me see the background. So first, let me run it so that we can see the pace and how it looks. We didn't at any productive yet, but it's still we can do it this way. Oh, we cannot do it right. So then we can run it? No. So we need to select it. Then we can run it. I guess. Then, no, we will be able to see it and let's see. So it's still we cannot see you try it where we cannot see these thing. Here, let me fix. They show here, son, you sign off, we can see it, but we cannot see it so we can do. We can make the productive so that we can see. So once we'll click on this signing, we will send them to this home base and no So click on signing. Then we can see the sea ways here and we need to drag this budget because the iPhone have has deception here. Otherwise they dio so otherwise it will be good on other mobile up so we can drag it a bit more. Don't. Then it looks good. And in here we will add two icons now in here we can at our border Gannett, So we can add our reason Parts so fast in here we will have a card off shown. Then we will have rest of the things. So for eating a card fasting for most We need to select a rectangle here on designed. This garden this way can do this thing here and slick this design and make it wrecked off. Had to give it some rectangles. Somebody radius! All right, it's No it looks good, but it still we can at they can increase the size. I guess so. It's very difficult to misery it this way. Andi, it looks good. So we can also I did. And don't Onda. We can What is weakened? Oh, I guess 50 is not good, but already a size. Rather I will go for 20 and now it looks so bad. Tests will at a party aan den, we are go. So now sign here. We will have toe play a bit more because? Well, at different sort of design, we will try to wet. So I'm gonna stop this video right here on toe. We'll continue it from the next lecture. So see you guys in the next lecture by 6. CardDesign HorizontalScrollView Part 5: welcome back once again. So in this part, we're going to design our card so we can do this design in a different ways. So first let me at our background color for this one. So I have copied our color so I can copy this color. Andi, let me add it here. Suggest the background and based it here. And here you go. So this is the color that I can get after are using this one soul at ah shadow or effect here said drop shadow. Ah, against the that we can use thesis and drop shadow here so we can see a shadow, I guess. See, we can see a shadow. You can see a drop shadow here. And if you want, we can add she and for any frankly, here then you frankly here then effectively here. And if I click here then Shadow has gone. So if I click again then click again then remove it then it then it is gonna come. So what can I say? Ah, I don't need to make any name here, so it looks pretty good. We can audience we can do here so we don't need to do any other things here. I guess we can regard this shadow. So if you want to get shadow than click on this effect, then this and drop shadow and then you can customize it here. Like how maney you want toe Show the eggs and why? And four. And this way. And if you want, you can change the color as well. For me I don't want to change the background color off this shadow because it looks pretty good with this shadow. Okay, so no. Oh, so now less are try to design Tried to make a design using the pen tal So this is the panto that we usually use for making a different side off thing. So we will do this thing in this corner and for this corner, we will have different so fast. Quick here. Once you click here, it will be ableto draw. You will be able to track and drove it here in this way. Then you can so click on, then hold it this way and again Click. Then again, click again. Click. Then again, Ah! Then you will have to How long? Place off your left most. Then you can Ah praise it here, then you can make it around double this way. So after pressing a double play, Carl Holt it, then you can do it this way. So you can. Then you can do it again. You can do this thing and then we can make this design this way on. Then we can connected with this field so we can know. So we can now select V for move. So if you want to do any sort of design, then you must need so we need to connect it right. So we need to connect it. Let me make distinct with this part. So connect this thing. So it is not connecting this way because we need tohave so against, like, the pento so that we can I think this way. So what can we do here? We must need to connect it. Otherwise it is not gonna work. Let's see if it is gonna work. So unless we're making this thing, it is not gonna work. So we need toe, connect it this way. So there's almost there and drag it a bit up and then we can do this thing. Now if I click on this circle. If I click on the circle, then we can change the stroke color to see if we can change their stroke color. And but we need to change the background off this color. So we need to change their background off this color for doing this thing. What we need to do so we can make this filled. So it is not a working here. So let me remove it. The whole thing here because we did a mistake here. I guess so. We need to add this pencil toe this way. So work it, Andi Mack it fault. Then make it. Then again, make it here, Onda. We can drug it this way and then we can drag it here and then we can drag it here. So once we will slag the circle using this whipped then what can we do? Then we can change the background color. So like inside this field you can change the color so you need to sleep the field And then we can change the color, any color, whatever color you want to. So I guess we did in the I did the same thing in previously, but I didn't click on the field. That was a mistake from my part. And now we can increase it this way and we can increase it this way. This is the design issues that we can do in our card in this way. And if we want, then we can simply minimize it This way we can also minimise. He'd easily Okay, so let me change the color for this one. I guess this color looks good Now let me at another pen. So at Let me at this thing this way, then and let me at this one. This way we can do this. I did a mistake again. So remote feed here Onda weekend Do these one so you can just randomly design according to your choice Aan den. You can make it circle once you will make it circle you will be ableto jane studies in So if you are making it circle then you will be ableto gents that do that. So this is not the background for it. So we need to select this one. Okay, so we need to select this on background color on then we can change the color and we can play with it soul. Choose your dessert color. What color? Whatever color you want tohave in your cart and then you can track it in this way. Okay, so this is the options that you can. This is the way to make it discernible in your application using the mental using the pencil tool. I guess we don't need tohave putting here. This one thing will work perfectly here. Just Jan star Let me at a few other colors here. I regret. And then it looks pretty good this way. And in here Now we need to add Ah, what text, Right? So, first and foremost, what can we do? We can make them growth here, So click and click and press control G So they are group now. Now, if you want to add text, I can simply add this takes here. So let me jacket Have it looks so it looks pretty good And then So I just wanted to Did you How? Toe design Using the pento. Okay, so if you don't want to add this 10 years completely find So just learn how to work with the Chantal's So No So we met it a group, then we need to have a text here so we can say a company, a forward, see? And then we need to change the color off this text so changed the color account and we need to change the size against that. Don't Here, this way. Ikea's Oh, it is good to have here and then in here. And then we can add a new digs just here and let me at the text here we can see one. You can say do 456 eight than mine. And then we can do weaken drug these text this way and let me change the color and let's see how it looks. So it looks pretty good with this color. Andi. Then what ISS we can do here? We can say I call number 2456 Then we can say balance here. So we need to add a new text here and we can say balance here. Balance. So we need to add this way balance aan den. We can use this clone here on day. Then we can It's agency too, right? And for the balance, we can simply edit text here. So just at some damn itics we can say 658 0.6 Onda a druggie to the center point and let's see how it looks. So we need to change the color toe white. So this is our off guard. We can see our econ balance and eco number and the balance. All right, so this way we can design our card so we can at multiple card in here. But for now, I'm gonna add this one card and letter. We will add another car. So I guess I can do this thing here and fretting a new car. So eating a new card, but we need to do we can simply make them a group. Then we can copy it, and then we can go. Hurry gentleness, scope. So let me do it in this lecture. So for doing this thing, fashion for most let make a group off all this data. So select all the data, including the rectangle, and make them, or you can select from the last site by pressing control and quickly. Then it is gonna make that is gonna slick. Then press control g. And then Renna made control are and I can say guard one. All right, so now it's our group. So now So now you are going to learn how to work with a scroll view Very gentle is called So for doing this thing. So let me duplicate it first. So press control De so we can see it This message to placate selection. Now we can make it duplicate, right? So for doing this thing first and foremost, we need toe select this one and in here. Once it was like this frame You will be able to see this clip Contin option so removed this one here and then I'm sorry. Then playing this card and add it here. So once you will remove this clip car like clip off shown by clicking here, then you will be ableto. Then you will be able to add it here. And if you want Now you can change the card number or background color or anything, whatever you want. So let meetings The strikers. I don't We don't need to chance Letter. Well, if you need we need to do we need to chance this thing now The thing is that fashion for most we need to make them Ah group these two cars again we need to make them a group. So for that, what should we do? So slick, those two card and press control G and make them a group. And we can say And you can see this group is our set off this home. So therefore we can drag it to the to this home. Okay? So simply slit and drag it to this home because this is our home frame. And once we will select this one is growth. But now we cannot see anything here. Now what can we do? Select thou frame again and click on this clip content. Once he was like this clip content, This one will disappear, which is no, it was outside off this friend. Now, if I click on this group is still we will be able to see it. So click on this group and then right click off your mouth and magnum frame. So we need to make them frame if you want to use for a generalised Scorpio. So click on frame selection. Once click, you click on France election, you will be able to see the cycle has been changed. Like this one. No, no, we need to drag it to the frame size. So now our job is done Almost done. So instead, this frame we have this group to and all of this thing. And now why don't need to? Do we need to goto this prototype And then in here you will be able to see overflow v ever noise schooling. So go click on here and click on Holy generalised calling. Once you will click here, then you will be able to see It's called few Now weekend a school. Our data here. See? We can escort it. We have to cut right now. So this is all about originalist call view and how to design a cart. So I guess enough talk for this part and we will continue it from the next lecture. And in the next lecture, we will aunt off working on our battle or other parts. So see you guys in the next lecture by 7. Chart And Home UI Part 6: welcome back a once again in this part. We really started working on our home pace and we will add our chart and the rest of the pot. So in the people spot we ended up working with our card few. And with your card is not a card few. So we did our custom reason for the card and where we're showing account and the balance and we can also school eat right, And in here I would like to add a chart. Then we will add a few more fierce here. So for reading a card for reading a chart, we must need to install a plug in. So if what you need to do inside this plug in, we need to install these charged plugging. So if you are new, if you didn't install it yet, then what you need to do we just need to click unplugging and so you can goto this menace plug ins. So then it will open in a new step on. Then you can click on this plug in here and once you're here after this featured plug ins, you will be able to see browse all plug ins and in here. You can start your blagging himself for me. I am using Carney. See, Ace, I'm sorry. It should be See is e A R D s. So this one So I have already installed it. I have also installed this one. But we're going to use isn't because this one is going to give us a lot off options. So you just need toe click on here, and then you can simply Klay condition still button, Then it will be installed. Okay, so no for getting a chart. What we need to do up in installing the chart. After installing the charge, you can click here on and go to display G and click on the charge once you'll click on your plug in. Then it will give you a lot of oceans. Like what sort of charges and do you want to add? So, for instance, it will give you ah line chart if you want. 00 Show a lunch and then you can do it. Here. You can do this way area chart and the bar chart and a pie or that or diamond chart so you can use this way and you can also in here. You can also add the configuration so you can change the number of anybody want to have fear chart And then you can also add the ignores agendas It like the inner radius. So it is no increased the size or decrease the size and out already us. This is the thing that you can do. So no. Once you were done with that, then you can simply click add charge. So once you will click on actors, then you can drive the chart wherever you want to show it here. So I want to let me jamaat it So I want to at the start right here. So we know our home base. Andi, this chart is here. I guess I can duplicate it. Let me show it here so we can see these charges here and I guess I condone public it It Oh are so fast. Let modify this chart. So in here you can customize the colors you can see in the color. So inside this field you can let me and drag it here so that we can see it aan den. We can drug the chart. We have a lot of options to adhere. So Ah, once we'll add the fields, which is the background. Then you can also change those colors like the outside radios or other field. I can choose this one for the sun, and this one is for so you can chance in this way. So, like the dot color is gonna chance if we're gonna select it. The legacy it is becoming white, I guess. Let me increase the size. And this is the thing that we can get here. And I guess it has couple of more options here. And if you want to change their stock size, then simply chance it to five. Then you don't become bigger. So I guess I did it only for in this field. I guess we need to do it for the entire part so I can chance it toe one, and then we can slick the whole chart and then we can change the stroke size zta access to key. And now we can see. I guess we need to change the background color because it looks really bad. It looks really bad here, and we can change the color, not this color. Let me see how the greenest look greenest looking really bad, I guess This color all the good here. So it looks pretty good And we need to make sure that we're changing this color toe white so that we can get the So this is not the color to change white. We need to change those colors. So not this one though. What will be based one for it and for the rest of the park on. For rest of the publican customizes we need tohave white in this color Onda we can add this color So if you want to change a stroke color then of course we can chance it this week. Now let me are duplicate it so we can chance So this color is also looking back here so we can add Ah, some other colors here like the shadow color You know, it looks good but we did a mistake here by mistake We have changed the color for this filled It should be white like all other part And now it looks good And for the text off our set off the text What it calls So we can ah, simply drug this takes and we can chance it to white Andi, Now it is beginning white. So we need to change all the text color here. So what can we do? We can simply slick the entire field and for the text color for the text color What we need to do so we can simply are no move directly through this one. So click that text like in the left side. And this is this is this is your main group which is containing the whole chart. And in here we can simply no expand it. And then we can move to each and every group. So you can see we have a couple of proof here so we can move. And then we can change the text color, toe white. So genetics color toe white on Ben moved it here, Change the text color toe white. So you can, uh, use it this way. And you can also chance. The color takes color, so this color is already fight on. Then parents the Germans discolored toe white and I guess we have one more. Only this color is going to be quite so Now we have all white color and we have few more here. If I am locked wrong. No, we don't have any other text here. So we can simply and now are in here. We can What can we do? We can simply in duplicate this growth on and show it here and now we have to charge here. So we're all done. And if we want, we can change the color off this chart. So chance it too. Green color or dark green color. Okay, so now it looks pretty good. And in here we will add four items. So for reading items over here, what we need to do We need to take health off directing us. Go here and click on rectangle on. Select this off on a select this rectangle here fast and foremost. We need to change stop border areas and we need to make sure that we're giving it 30 aan den. Let me show with me. Check how it looks. So it looks pretty good here. And Oh, just the color we can give it in this color and we can duplicate it. So before duplicating it, we need to have an icon over here, and then we will add up text here. So for aiding a icon what we usually do. We need to take help of the blogging that cause I qualify. So if you haven't installed excitement for yet, you can simply install it. So for the installing this, I qualify the processes same again. Go to this plugging access the plug in directory and browse all pregnant. And in here you just need to source. I quantify. Then it is going to appear for you. So once you were here, just install it. I have already install it. So now we need to take health off this iconic for plugging simply I qualify. And now it is going to open a new window for us here you can see. And from here we can choose some sort of icon. We can do some sort off icon from here on. And what I can, I guess I can just this one. So I'm gonna choose this on, and if you want, you can customize it and then import daikon and Ivan has been important. Andi, where is this icon gone? So I quantify you can see these. Like when? If I use here. So it is located here, So just fixed. I'm sorry so just selected on and target here and then increase the size, then increase the size. Decide once he will selected, they will be able to see these signs. Oh, then you can increase the size off it and you can drag it whatever you want to have. So let me see that Michigan, how it looks. So it looks pretty good, but it is not in center. So just make sure that it is in center and then in here, we need to have a text. And in here we will add a text and we can say is it's, uh, income. And then what can we do? We need to just the color tow it own just off fund height, logins the form size and then drug it here. Then this is going to be income and then chance the color off this text white it Look, it doesn't look good in white. Rather, it will be good in black or some other colors. Wiggins blood will be the best option for it. So now we have our Phil called income on. Do we need to have similar sort off for items here and then what can we do I can simply make them are. So I can We can simply magnum it groups so that we can duplicate it. This is the best way. So simply select your our text Your icon and your rectangle either even slept by clicking and or you can simply slipped from here and to once you were done Then you can make them group we can say Oh, let me rename the group we can say does on Then we can simply duplicate it on Let me see how it looks So it looks pretty good but I can drag it a bit more here from this side and from the site. And then we can what we can do. It's not looking good, so we can track it a bit more. Here and jacket are bit more here. So whenever you will have to duplicate any sort of items, then you should make them a group so that you can always exits are always chance them. And now I'm gonna change the background color for dis item. It looks really bad there. I can go for this green one. So this green one looks really good, Andi, Instead of income the text. I'm should say here we can say expense expense. So no, on golf course, we need to chance this icon from here removed these icons from here. And let me at me awaken from this. I'm sorry. I have picked on are wrong blogging. So again, goto this plug ins and click on I quantify. Once we're here, what can we do? We can choose on Awaken here so I can choose this one here and then simply you can import icons on days Like communists here on drugs, I can hear and increase the size of a deck. And so we need to have similar sort off, Hide off like this thing, this one. So the Heidi's 65% in one and the wind is 45 contacted. So 65.71 slick 65.71 is the height and the white is the what is 45 11 tree 45 point 12 I guess I did a mistake here. 65.71 65.7. So it looks pretty good now. We just need to now just need to drug it here. So these icons should be here in center, right? I don't know what is happening here, so we need to send it in here now. It looks pretty good. So let me see the Oh, let me check the X and away. So 10.38 4.75 10.38 4.75 So that's something is not gonna work here. I guess there's already in the center. It's no. We need to have off and other to feel here. So let me duplicated here on. And then another duplicate is here. Then we can simply change the background color for this one. So chance the background color first for this one. Not this color. I guess this one will be good, but ah, we will have to chance the text color white to black. So now it looks pretty good. Oh, no issues here. And for this one, we can change the color in this color. So it also looks good, but we just need to chance star color off the text to block. So now it looks pretty good. If we need, we will chance that Oh, background color later. But now let me change the icon. So for changing the icon, what we need to do again? Goto this plugging Andi select I qualify on Do you can our import de se con and you can import another record so you can At the same time you can input multiple items So we imported to like two icons. So one is here. I don't know where is another one? We need to find out it. So let me remove these icon from here on, then we need to remove this one from here and then Jack this Then we need to drug these icon What is happening here where we cannot track this icon. So we need to select it on den only to increase the size so we can rotate it. But it is not working this way. I guess there is a to I come here, so we need to drug all of them all together. So chance it to 65 and chance it too. And then we need to change it 45. But the cycle looks really bad because it has, I guess, and under part. So these icon is not working here? Probably. So I'm gonna delete this icon here. So let me select Daikon from here. Andi So we have items and then items. Then items on, then items. And then let me do this thing. Let me ah, minimize all this field. So this is another I can't that we got from here. So now if a runny nothing has just no, let me added one by one so that we can track it clearly. So I qualify Andi from here we can at our the Zaken. It's just this icon I got important. What can we do? Know we can no added here and then chance it to 65 and hide is 45. No, it looks pretty good. I guess we can rotate it on. We can now do it here. So the rotation is not gonna work here, so No, it looks pretty good. Aled, this thing are here on do we can do so I guess we did a lot of things here. Andi. I'm gonna go ahead and stop this video right here, and we will continue each in the next lecture, and we will have to customize it a bit more because I would love to change the color and the icon and the text, because it doesn't look good here, So I will. I'm gonna update all this thing in the next lecture. 8. CustomColor Part 7: welcome back once again in the spot to organize. Start working on our home Away in the Fever s party ended up presenting this thing but it doesn't look good. We need to change the color and the icon and the text. So for that so let merchants that color fast. So I have copied some color from a different color color code generator. So I'm gonna use those colors and let's see how it looks. So I have copied this color So let me copy this one first. So let me copy this one on you can copy it. And then inside this under this field, when it took Lee here and there only to paste our color code here. But make sure that you're removing the hash symbol because in here we don't need to use the hash. And no, we got this color So this color looks pretty good to send it. Yeah, it is until we will have to change. Stop. I can color and the text color. Andi, for this one. Let me copy this color coat. So copy this color coat and basted here. So what is the color code for this one? Why it is not coming here. So we need to fix this one. So this is the good for our background so we can cope it and then I can see this color looks really good. And this one I'm gonna copy. No. So if you want, you can choose any color, whatever color, if you want to use. So this onus YOLO So interrogating this yellow what can we do? I mean under it And for the background color we can change Sit here Aan den. We did a mr here. So what color regard. So we got the right color But in here for the icon We did a mistake previously because we give a background color for daikon so we need to remove it. So let me remove this color here. So I guess we can simply removed the color from here. And no, it is gonna look good. So I have removed the color and letter. We will change. Stop text color and I can color and let me copy the color from here. So copied this color court If you want, you can simply life this color coat or you can choose your own color cut whatever you want . So for this gone, let me double click it here and inside this feel and then basted here and remove the court here and then. Okay. So again, we got this background color for here and now how it looks so it doesn't look good here. Rather, I'm gonna choose the last one. And let's see how it looks initially. How it looks. So copy this one here. So we're gonna choose this color Onda. We need to remove this color and then press on the field aan den based on the court and here ago. But it's still we Garda color under this off icon that religion notice in the paper spot on if you want. Remove the background color from the icon. You just need to click on this minus. Then click on this minors. Then it is going to remove. So we had to color. Now I guess it looks pretty good now simply we just need to change the color off icon and the text. So for the cycle, I can choose the color, this color and for the text. I'm just selecting some random. So if you want to change the text color color. So simply chance that text color do they're select the green. Okay, so this green looks good here. Aan den. For this one, we can choose a different sort of color, I guess In here, what will be the best color? So this color is not looking good here. We can go for the white color. So what? It's white color here. This one is white color on DFO for this one and for the text. But the text We also need to change this color toe white color on for this icon Andi 42nd. We can chance the color too. In this one, I guess. Uh, I guess in here we need to make it. What? Because the background is bit dark for this one. And the text in here when you do calories, White. And instead of saying expense here when he dubbed the ***. When you talk about the text we can say foot on, let me drug the text in center. I'm just adding some random text here related toe this application or like ability to the budget. If you want, you can give Finnan him whatever we want and genital in the last one for the last one. We can choose on a different color, I guess. This color and for the text off first we need to change. That takes so we don't need to have expense here. Brother, I would like to say so. We have income, we have expense. We have food. And then we can say we have simply Sabeel and we can drag it to center. Andi conjugate to center. And of course, gents, the collar to white. So this color is not going to help us. And a man, a chance the color to white. So this is not working because we didn't chance the color inside the sticks. So I'm going to remove this one here. Now I can make the color toe white here and now it looks good. So the white color is not looking good over here Because so let me say we have four color. I have used the four color here and now it looks quite good than the previous one. So it looks pretty good than the previous sculler, Andi. We're almost done for D C way. Now we will have to create different sort off pace so that toe. Once our Israel click on those fields, like when they will click on income will send them to a new place, and we'll show them they are income data. So question for most we need to add a few icon over here so that we can add our profile options here. So for doing this theme, we need to take health off or I quantify. But I'm going to stop this video right here, and we were going to do it from the next lecture. So see you guys in the next lecture by 9. Profile Page UI Part 8: Welcome back a once again in this part we lister working for our profile fits. So for doing this thing first and foremost, we need tohave icon over here. So once Israel click on this icon, then we will move them to a new place where we will design for the profile off our users. So before that, So before that, let me Eddie, I can hear first. So for that, let me open this black and called I quantify. So instead, this I qualify, we will have a different sort of ico's on do we can choose and we can choose icon related to profile. So let me Sarge here if we can get something related to profile CR pro file so we can see these icon is here and we can we can used this icon as a profile picture or we can simply use thesis traditional icon. But instead of using this thing, I can choose this one. So if you starts normally p r o, then you'll be able to get this result and select it. And so this time, if you want, you can change dykan color from here. So let me change the color from here, says James. The color here. So we cannot. So they don't have any color. Pick their free can. A chance it This way we will have toe right? Got so we don't need to do it here. We can simply import this icon Onda, once we will import this icon. These icon is here on. We can simply jacket to here. Then we can increase the height and weight from here. So say 40 the height Onda. Why it is going to be 35 aan den What can we do? We can change the color toe white Andi So we can see this icon is here. But I guess so. We just need to improve it a bit more so in Krista. Hi, Dana White. So slick. 60 and 60. Let's see how it looks. It looks pretty good, but we need to drag it here and here you go. So now we can see in these icon ease here. So no. Once our easily click on this icon, we will send them to a new place. And right now and to right now we don't have any place here, So therefore we need toe create a new frame. So I'm gonna go ahead on its link this frame and create a new frame that is called Now we need to create our new films for that Goto this frame and select on from then when you dislike this iPhone pro and let me chance the name off this So what can we do? We can simply agents the name up this friend do we can say profile and to once we will select profile, we will have to add a lot of options here. Like we need to have a background color fast. So for that, goto this file and we need to add our background color like this color. So, like this color so we can copy this color code from here on DSO This is the bag known color . So this is the background color, so I can simply copy this color court from here like this is so. I am just taking the same background color from this one. So copy this background color and paste this color code here. No, here we go. We have this similar life off all Bagnall color here. Now the thing is that in here, I'm gonna drug Our rectangle on the direct and go we will add What do you let? We will add the profile picture and then the name. So for that, we need to select a rectangle contract angle on DSA elect its rectangle. Lisa, we Andi Let me at it. Onda, we need to chance the radius border areas for this one. So select border areas 30 and then we need to have this color over here for the items. So for getting this color here, we need to have because this color is the color off this card so we can go here and paste it here and here we go. So we got this color and we have what we need to have. We need to add our effect here so we can add a drop off shadow so that a drop shadow and we can add a few more shadow here so that we can get a bit more so it goes to your for will be enough for it, for for this one. So now we can see this one. I guess we can increase the size and in here we need to have our images. So for that we need to take health off lives. Andi jacket here. We need to drag this thing. So make sure that you are giving our exact same height and white. Then it will become a circle. When you drug it, it doesn't become ah circle. Therefore, you can simply chance the hide and white from here. So as why this 172 gents, the height is 172. And now here we go. I guess we can decrease the height and weight against 161 160. Now it looks very good. So what can we do? We can simply drug this Emmis. Or we can simply take health off this so we can simply drag name is that this will be the easiest option So basted here. So we got Ah law Biggie Miss. Here on. We need to resize it. I guess we need to recites. This emits and finally we guard up, right? Says I guess and we need to add this thing over here So again we need toe. Many must minimize stuff. Hide and wait for this one. And then once I would put it here, it will become ship here, so we need to make it circle. We need to mackett circle like this one. Andi, this one and make sure that we're giving it a circular again. Say 50. And then very good, then here, Rico. So instead, off this thing, we can also use this option here. It calls. Ah, show coming. Create component and use the mosques. We can use the same. It's as a mosque here. So what is that? Bundles of using the mosque here. We can get this thing. I guess we don't need to use any mosque here. Rather, we can simply What can we do? We can simply at our we can simply at our limits here and give it 90 on. Here we go. So we got our profile picture here, so either you can simply choose it this way. So once you'll are make our lives. Then if you are trying toe dropping him, it's on top of the list. Then you can easily make the shadow that are not the shadow you can easily our circulate just giving the border radius. As you have mentioned the height and white fort that lives, then you don't need to make mention any height and white for your Emmis are This is the best way you can do. And if you want, you can also oh, directly at this email instead of waiting the ellipse. OK, but if you were reading it lifts then you can go a bit more customized, like if you are. If you want to have a bottle like if I'm gonna minimize they miss here, then I can change the background color off the it lifts, and then it will give us a new look so you don't need to have it. Rather, we need to have just a mess. And if we want, you can give the a stroke here and give us Took five and see. We can give them a stroke. And if you want to chance that stroke color Gen Z two white. Now, here we go. So now it looks pretty good. So I guess in sort of Fife, we can get gonna give 10 and it looks pretty good, but then is becoming a big, more soul. I guess six will be good Option here. Here you go. So now it looks pretty good. Now in here, we need to at name separating an M When you toe added text here and we can say what we can say, we can say Devitt Johnson. So I'm just getting a random name and let me change the color of this text. So chance the color toe so fast running to selected and chance the color to fight? No, it looks pretty good and toe once we're done with this thing. So let me show you how it looks. But if I'm gonna click it here and nothing is gonna happen because we have not to add it any prototyping so click on this prototyping and then we need to click on it and then you will be able to see the dot and then simply drag it to here. But we need to have our animation here. So for the animation, so how it becomes bag automatically Say it should be never get to, so never get to instead up None. We need to say profile. Okay, so you can directly never get oh, access this one. So once he will sleep that never get to. Then you can access the all of the pages or you can simply click here and then simply added here. So I shown you in the river spot. So this is not issue. So allowing it to add our animation instead of saying instant, we can say moving on this is what we can have. So now if I click here, then move into the David Johnson pace, right? So now it looks pretty good. And in here we will have to add a couple of options for idiot our name. It emits. We didn't don't need toe. Have ah edit option for M s. We need to have a mental bus. What then a few other things like we will at our log out button over here. So for that, what we need to do, we need to create our rectangle over here. So great are rectangle here and then go to this design and make the border radius tarty. And of course, we need to have in these color courts or simply copies color court from here and based it here and then we need to have our effects. So at four drove shadow and in here we need to add our name here. So the enemies, what can we say? So when you do at the text here and say so. Whatever name is in the profile, you need to have the Samuel here defeat Johnson. But we should add Ah, the size 14 not 14. It will be 24 will be good. So drug it to center. And in here we need to. So first, let me change the color off this text. So instead of block James it toe white and then in here, we need to add another text, and this is going to be it. And then we need to change stuff our size obvious to 36 Vegas, not 36. She will be good if we can keep it same. And but need to change the color so we can choose this color and you choose the green one. Okay. The green one will be also good, so we can see it'd option is here. Now, we need something few more times. Okay, So for that, what can we do? I'm gonna make them group so slick all of those things. Oregon also select by clicking in the left side corner and make them a group. We can no, really me to consider profile attempts so just to give a meaningful them and now we need to duplicate it. So making duplicate on, I have duplicated it, then duplicate, then duplicate. Okay, so two things air here on DFI things so fast and this on Let Mogens that takes for this one . So this takes is going to be Imola just so we can say the middle silicon says they connect random Eamon David at the raid gmail dot com. And for this one is going to be bus. What for the password field. We just need to add hash and this one. So let me check it how it looks. So we have Johnson name bus What? And we don't need to have any other references. Rather, we can add Ah, log out button over here. So for reading a log out button, we don't need to have this so just simply move one text and another text We can simply jack on the center Onda, we can say and we can say Log out, look out But instead, off off green color This loggers button should be red color So this is ah, lager bottle. But it doesn't look good here because the color is the background. Color is a bit dark, so I'm gonna choose a light color here. So it looks pretty good here. Who wants a will click on lockout button? We will. The move back to will move back to the signing peace or on the sign up base. So it will go to if we move back toe the sign up? A. So therefore, I'm gonna add our prototype. Here s so before reading a prototype, we need toe. I just need toe have, ah group off it so that when user will click on this inter item, we can send them. So Santa pissed. So select this rectangle and this text and make them group on. We can rename it and we can say log out. And then there state now move to protect life. And in here we can simply click this one, or you can simply So once you will have a lot off pages, then you will not be able to drag it this way like slept here. And then then jacket this way. So it is not the easiest way. Rather, what can you do under dispute? You will see the interaction and by default, it will be none. So what you need to do, you need to Ah, praise on teff Then you wants you on tap. Then you will be able to see the navigation often an adoption so open overlays to our poet or never get too. So we need to move there. Never get to so clear you never get to and where you want to go now in here we want to goto our sign a piss So this sign up this means descent effects and then it'll automatically give you this options say we can see this one So this is the best way to use it instead off making drag and drop each and every time and for the animation we can use in this animation that we are using. So now if I'm gonna click on this lockout, then we are in sign of pace again. Klay consigning So this is our signing taste and you can forget password click on forgot password This is appearing and click on signing and we're here. And we can also do hurry Generally schooling for our guard on den If we click on this icon were here and we can see this nice design and then click on this lockout. And here, Rico. So it works perfectly. So we did a good job over here, and we have successfully ended. Are finishing our profile pace. Now, we have a lot of things to do with our income expense food and bill options. Therefore, in the next lecture, we're gonna start working on those field, and we will aunt of learning a lot of things. So see you guys in the next lecture. Bye bye. 10. AppbarDesign Part 9: welcome back once again in your previous pottery ended up working for our home loud. And in this part we will have to work for each and every attempts that we added in the previous lecture. So, for instance, for income, we'll have a layout and for the expense we will have our new load on both Lord should be similar. But for that fashion, for most what we need to have we need to have our friends. So just click here and take it from so I'm gonna slit iPhone 11 pro and let me increase. Let me ju mean this one. And now it's looking so first and foremost, let me change the name. So instead of life in heaven, bro, I'm gonna say income. So this one is going to be dub men layout for this income. So once usually click here, we'll send them to hear. And for that first and foremost what we need to have winning two gents the background color . So I need to use this background color so forgetting their color court. What can we do? We can simply click here, and this is the color car off the background. Color off this profile that we're using for each and every layout. And I'm gonna copy this color code here, Onda against, like this one and paste it here. Here you go. Now we have our background color. Now in here. We need to have the Abbotts afraid ing our ab are. We need toe, take health from rectangle, so define our So we need to define ah at birth. And now I'm gonna change the color off this upper. So what color we can choose for Aber. So instead of aiding any sort of random color, I guess we can use this color that we have used for our homeland. So we should have the similar color here. So copy this color code and click over here and based it here. So there is no rules to use Michaela coat. So if you want, you can use your any color coat. Whatever you want. There is no harm to use your own color coat. And now in here we need to write our text. So for reading a text, we always need to take health from this textiles. Click here and in the center. I'm gonna say income. Oh, I did a mistake here. What is happening here? So I guess I clicked on a wrong butter. So let me fix it on Jamaat on and German number Sochi. So play here and when you do really context. Okay, so we need toe copy the color court. Let me based it. No, it's fine. And now in here. We need to add our texts quickly here. And then we can at texts, we can say income income. And now we need to just the height off the text. We can say 24. And then we must need to need to change the color off this text. Now it looks pretty good, but we need to Juanito, put it on center. Okay, So if you want weekend Negus, we can increase the size 24 to 36. All right, now in here. We must need to have a bag battle so that when you there are in this income are dashboard, we can send back them to the home page. So for doing this thing, we need to help our back button and fretting a back button. We can take help off this arrow icon. So what can I do we can simply What can we do here? What is it? Here. Let me remove it on Dislike the arrow here. And we can simply, uh, draw it in the back side. And then once we will draw it Women to chance Stop off a stroke, Oneto T. And of course, we need to change the color black to white. So if you want, if you need to back but on, then it can be stepped. Are dragging from the right start and, um left it to the left side and then jacket to center. Andi, I guess we need to have it here. Not there. I don't know why this arrow is create problem. Each and every time. Whenever I try toe, use this all back battle. It always create problem. But that isn't. Instead, we cannot fix it on the right position. So now I guess in I guess now, Houston, right position and the income text is here and in here we will have We need to help our plans cycle. So for having a plus icon, we can simply take health off our plugging that we installed earlier videos. And the plug in is I quantify once will click on this plugging. It will give us on prop of window for selecting the icon So we can search ad Eichel, which is this one. Either we can choose this one or this one or this one this on. We can choose any icon, whatever we want. It's not a big issue. I guess I can go for this one. We can simply important. Here you go and where it is so it is located here. Simply drug toe here and gents, the color to white, one soldier into color to fight. We need to change sta What is the need to chance here when it do Jazzercise? So we can simply what can we do? We can simply drag it this way and it will become larger Aan den. Here you go. So when our user will click on this plus I can we will assure them are prop up by look where they will be ableto add their daily income like the title like the amount Andi the description and then they will be able to save. And what about the real safe? We'll show them in a card in here. So this is the thing that we're gonna to now let me show. You know, if I am click then nothing is gonna happen here. But if I'm manically here, we can see your profile, dashboard and even manically log out. Then we're here, then signing and signing. Then we are here and we can also school it here. Now we need to use prototype for moving toe this one. So for doing this thing, what can we do so first and foremost only to select this prototype theft. Once we are inside this protective, we can access all this feel from here instead of dragging from here to here. Okay. So once we will select on prototype then every item will have our daughter. I can. It means that we can jacket and we can send it here. But once you will have a lot off you a lot of Lee out. Then you will be able to drug all off them. This way you can do this thing, but it will be difficulty. Therefore, I always suggest you to use the name and you can excess all of these things from here. Now the thing is that how can you do it? So for that once you will select this one. So just need to select from where you from where to where you want to go. So if you that is going to click on this home there are we will we will send them. Tow this one right? So we can see the dog here We can play here and drag here on instead. We can simply use here. So instead of saying none we can say on step and then on deaf. Then again, it is showing none. So I never get to very want Togo. Never get to means we will move from one place to another place And in here we will be able to send when it didn't mention the name. So our this you enemies income Therefore I'm gonna choose here income See, Now it has become Now we can see in this drawer so just Nitto are at on tough. They never get to that very one to go And then once you will do it, you will be able to see this animation is here. So instead of instant animation, we'll set Use this moving and then we will be able to see this way and to know if I'm gonna click here, then here we go. Now we're in our income dashboard. Notify Bagley on back. Anything is gonna happen. And you still we need toe fix this income text here because the ah, like Dolph. Oh, the design off this iPhone pro is a bit different. And the other firsts, it has camera our son books here. Our sound option here. So I'm gonna jacket a bit now. It looks pretty good here. Okay, So something we can do for the big butter and we had turned. Now, when user really click on this back button, we'll also send back them, send them to here. So either you can do it from here. Or you can simply click on here and then you can and drug it here. And here you go. It'll automatically selected all of those field that we were trained by selecting Go spill . So it's your choice. What approach you were gonna do you're gonna use You're gonna flow in your project side that you can choose from here, or you can directly move to here. And now in here you have bunch of options for reading your animation and then you can choose from laugh the ride and from down from them from ups. And then if I medically here and here we go again. Click. Here we go again. Click Now it is working perfectly Snow. It looks pretty good. Now we are almost done. Toe work on it. Onda and us talk for the spot. We'll continue it from the next lecture. And in the next lecture, I will end up teaching you how toe add the layout options like the items that we're gonna show in our income you weigh. So I'm gonna stop this for you right here and see you guys in the next lecture. 11. ElipseDesign Part 10: welcome back once again in this part two we're gonna instead of working for our income debtors we know profess part. We ended up working with bar on the protective section. Now, in here, we need to show our data that our either is gonna store. So for that, we need to have similar type off rectangle, and we will have multiple. They attacked him here. So fashion for most. We need to take health off overact angles. So I'm gonna select this rectangle, and then we need to design our rectangle here. So that thing I can do, I need to move in design. And I can do me a bit more there. See how it looks now It looks really, but we can our state with this and then we need to Ah, when it took increase the size, I guess a bit more. And then if I'm gonna increase it a bit more then it is completely fine. And now we need tohave border radius from four sides from here, here, here and here. Therefore, I'm gonna use party here and it will give us border radius. Now we need to have a background color off this item. So I'm gonna choose this background color. Therefore, I'm gonna copy this color here on, then selected here and based it here once. We will based it here. We'll get this color, but we need to have our bark shadow celebrating a shadow for reading a shadow on the bottom . We need to take health off this effect and then we can add a couple of more. So then we will get this shadow. You can see this shadow a bit more if you want. You can chance the shadow by clicking on the customers off shows, but we don't need to. You can always customize it here, but I guess we need in this one here. We don't need to have any other options here. Now, if I look at here, then we can see it looks pretty good. No fashion for most in here. We need to have our We need to have a circular. So for afford that, we need toe take health of these lifts on. Then I'm gonna draw these lives here. And as I told you earlier that this ls should have similar should have same height and whites. If you look at here Height and white. It's very difficult to men. Is the hiding white now? Therefore, we can choose it from here, so I'm gonna choose it. 84 white and we need tohave 80 for height as well. Then it will become circle. See, now it looks pretty good. And we can choose a color for this one so we can choose any colorful It'd toe this field or this one. I guess now it looks pretty good. And in here we will have to have our text years. So I'm gonna select text, click on text on Dhere and then we can praise, we can say And, um just for a random checks. So I will expend it letter and put it on center and then chance the color to quite. Here you go. No, it looks pretty good. So this is the thing that I wanted to show you in this part and will continue we in the next lecture. And in the next lecture we will add our title description and the amount off these items. So that is what I wanted to show you in this lecture. And I'm gonna stop this video right here, and we will continue it from the next lecture. See you guys in the next lecture. But by 12. Group and VerticaleScroll Part 11: welcome back. Once again in this part, we will start working on our item filled in the previous part. We ended up working on this circular, which is called Lives Here and in here in this part, we're gonna go ahead and get started working for rest of the part. So, for instance, in here, we need to have a title than a description, then a budget. Then I can hear. So for doing this thing, what should we do? First and foremost? Let me ju mean a bit more so that we can edit it here clearly on then in here. So for reading a text here, fast weight toe, have our text Soap economist text Andi in here. We need to pay. We need toe post. So now So we need to write our textile. What can we say? We can simply say or selling product. So selling product. So just Dogmatix to connect anything, whatever you want. So damn it takes two. And then we need to change the font size off the stakes. So currently of stuff. So let me include it to 36. It is becoming a bit bigger. So 24 will be the good one. And we must need to chance the background color since the background. So we need to change the color of this text Since the background color up district is black , it's not a block, but related, like quit, but it's quite close to block. So what will be the nice one? So now so one thing, it is noticeable that you don't need to run it each and every time it is gonna update automatically. Now you can see selling product and just below this product, we need to have our new text. So simply what can we do here? We can all duplicate it or you can simply play this text. So it will be much more easier if we are gonna duplicate it so that we don't need to change the color and control de and then control De and then jog it here and then simply what can we do? We need two. Or decrease the phone size here, maybe a 10 and then change Start text here. So instead of writing the whole takes, what can we do? We can say I salt many new things. Thanks on. Let me see how it looks here, so it looks pretty good here. So one thing that we can do here is we can are What can we do here if we can drag it a bit ? No, we don't need to do it. It look good here. So now we need to have another text. You click on this text and in here, I'm gonna add a price. So please just click here slid the text, Andres it here, and we need to write our dollar. So the price. So praise the dollar. And just Brenda, my dim. So 56. And then again, you need to change the text to 24. And then this time I want to choose our different color for this one so we can choose this one, and we can drug it a bit more here and let me have it looks so It looks pretty good here. And another thing is that what can we do? We can drag it a bit more here because we need to have icon on top of this one. So we need to slick move. And then here we go. And in here we need to add icon so that whenever Israel click on this icon. So when we'll click on this icon so that our user can get few options to idiot on abd it the data and therefore I'm going to choose the icon so we can simply take health off this list to make that treat dark symbol here. So as it is giving us these options so we can simply go here and just Jen still hiding a white from here. So I guess she Andi see very stay lives. So this one is here on like this on is so dizzy lifts so t is not the right one. So I can seem thing jacket here on Do we need to increase the size a bit more So let at five and then at five and then how it looks still it looks very tiny. So we need toe are increase the size of a bit more laughs at eight on in, heroes need to add eight So once we will add eight Now it looks quite good, I guess. Oh, decrease the size a bit more instead off eight. Now it looks a bit more bigger, So I'm gonna decrease the white 8 to 7 Onda and seven. No, it looks quite good. So we need toe. Duplicate it A few more time. Not few more time. Just three time. So one is here and another one is here on another one is here. Know how it looks. So it doesn't work this way. This is the it lifts on and here we go. So now we have so it is not duplicating because So this is our lips and now we need to duplicate it. So click on mag public it. No, we can hold it and then we conjugate. So when it does selected here. So there's a very tiny we cannot all catch it here. This way. So let me fix it here. So this is they live. So now we need to duplicate it on duplicate it and then we can drag it here. So now we have to on. Then we can drag it yet This way. So now it is working, But it needs to be here. So now see, so they can city But it should be here. But it is not the workings we leaves. 12 is creating our problem. So I'm gonna just remove this one and make duplicate from this one so controlled the on, then present here. So again, any describing the same issue. So it's better toe duplicate it from here. So make this and click. So select here and then Meg public it. Andi, hold it. And this time it is gonna work. All right. But it is. It should be closer. And this one, but it's still it is not in the same position. Let me select this one. So actually, 66 1 to 5125 and this one. So we need toe school it a bit more. Here on and Harry go. So now it looks good. So simply we can have this three daughter so and then we need to make them a group. Let me give Oh, let me get me out. So now we need to make this to dot group. So before that, let me drag it one more time here so that it can We can get it a bit more from here. And this is our dot and it should be 125. No, it is gonna work c 125. Because all of those field have ah 125 from the white. It miss from the down and X means from the left side. So we can easily our chance it from this way and now it looks good andare instead off Arti 91 I can decrease the height from here Decrease that expel you From here we can say she 85 so that it can get a bit closer. See? And then we can also do the same thing for the 2nd 1 Onda, we can say to succeed ill now it is a bit more closer. So now it looks good. Now we need to make them our group. So this lifts 13 14. I'm sorry. So the start in 14 on 11 and Magnum a group. So we need to select all of this one and then we need to make them in. Groups of place control cheek on and they have become a group. So once they are in a group, we can What can we do? We can simply use for typing for this one. But we thought that we need to copy this item multiple times over here. So all those items should be in a group So for doing this thing, I can simply drug all of them. Or either you can do it or you can simply off press control and click all of those items that are related to this field and then make them a crook. Control G and let me you name it so press control are and we can say id EMS grope off income. So always try to give some meaningful name so that your user content of understanding and no, we can duplicate we can make them duplicate. So press control d on it as we can duplicate and then jacket. So once you will make them duplicate and to drug with any with Jack for the fast one, Then if you are gonna place control de, then you just get automatically at so press control the sea. I am pressing control d and it is gonna add automatically. So now if I look at here, then I will be able to see all those items so we can see all those items are here. And another thing is that we can notice. Call it. No. So for doing this team, so you have learned how to make is calling for the whole regent off you. But when you are when you need tohave particle isco view in the time you don't need to follow any jewels. So simply what can you do? Just select it and increase the layout Height off your off freeway. Very want tohave for gentle. So if I'm gonna do this thing, then we will be able to see this is called off France's it's gonna come automatically. So now let me paste a couple more time here. So it is not gonna work now first only to selected press control D on And here we go. 13. I'm sorry. So I need to make them growth on d Errico. Control de, then press control the again Control D. I'm sorry. We need to select it and control D on. And then I'm sorry, what we need to do here. So we need to select this one and press control D. And here you go and press control D on. No, it's fine. So we have decided times now we can easily do schooling, and here we go and we have decided So we have successfully ended off changing our you weigh on. Do we can see this thing. So that one thing is that we can do here. So it looks so it looks pretty bad for the door symbol. It should be a bit. We should decrease the US We should decreased our size off this dark. So we met a group here, remember? Here. So as he in a growth, if I'm gonna change the form size like the height and white off this growth on this particle adult. So if I'm gonna change the dot symbol here, So if I'm gonna change the dart symbol here, it is gonna chance for every items, But I guess we don't need to change it here. Rather, what can we do? We can simply change the background color and us and few ticks off this circular. So for that, I'm gonna choose some color for this one for this item. So just this one, not that team won. It's the groove on this one. This ill is still on and chance the color to green. And for this one for this one, we need to choose the color. This one. I'm just using some random color so that we can change the color off this one, Onda. We can see different sort of color. And let's see how it looks. Well, we're using different sort of color on before this one do. So this one, we need to use the background color off this one. I guess we can choose something like this one. Andi, for this one. For this one, we can choose. We have some reused, reused color here that we can use now. Andi, for this one, we can simply chose. So whatever color you you will choose. So it is gonna appear here. So it'll always such as to your previous column that you have used for your project, Andi. Then we need to have not this one. We need to choose the lifts color. And once he will choose the lifts color, then we can person Jack for a few color from here. Now, let's see how it looks. So it looks pretty good here. See, we don't need to chance all the color so we can see only ice cream color that we are we're having here. And now it looks off free. Good. So if you want, you can also opted. Takes here. But I guess We don't need toe update any off about next year because we're just trained. Our purpose is to do our part is to design nothing is. And in the next part of what we will do, we will work on this plus icon, then this start icon. So whenever is really click here, we will show them are the electoral look where they will be able to put their title description and amount and they will be able to save it once they will save it. And for all of this item that are we need to show them how toe it it. So when they will click for each and every particle item, they will get our pop off to update their data. So that is what we will do in the next lecture. So I'm gonna go ahead and stop this video right here, and we will continue it from the next lecture. See you guys in the next lecture. 13. Add Update AlertDialog Part 12: welcome back. Once again in this part, we will at really start working for this plus icon when he's really click to add something here. Then we will show them our customer, Ladakh, for doing this thing first and foremost, we need to select our friends. So goto this frame of Schoen's on Glicken frame and you can choose any sort of frame. Then we can simply modify it so we can click here and first gen stuff our name so we can say at data. So it should be this way. At ditto a large yellow. It is simply at this thing and then we can customize it this way so we don't need to have this one and fasting fastest. We need to change the background off this one. So the background color should be this color and before that Jan star border radius. So at 30 Andi, I'm gonna choose this color So this color court copy this color court and based it here. Then it looks pretty good here. So fasting fast. We need to have our text year for the title and for the description. And for that on, we need to have another one for battle for doing this thing. What can we do here? So simply we can take health off. We can. So this time we will do different sort off designing here so that you guys can enter learning something new. So in the previous Al Abdullo, we just had a text on our arrow Always we were using for input fit. And this time I'm gonna use different sort of techniques for reading those things. So I'm gonna take health for rectangle. So click on this rectangle and then draw a rectangle here. So just here. So I'm sorry. We need to increase the size here, so let me remove it fast. So we need to remove record for remove first and then in here we can simply I'm gonna remove this one. So we need toe, select this rectangle then and then we need toe drag, this one. And what can we do? We can simply draw it and then increase the size. And then, gents, this one there's a lot of options to draw. You can use any sort off functional tests that you prefer, so draw it here. Sandro, eat on. This is the design section off our on. Then we can increase that white from here. So at 3 50 on and it here aan den it be more here in this way and then fast chanced our border areas to 30. So in short, hearty, I guess we can have 90 more radio so that it can become a round. See, now it looks really good. And any here the thing that we need to have First of all, we need to have our you need to have a stroke for aiding a stroke. What we need to do we need to simply select this one and school down. And in here you will be able to see that struck. So chance a stroke are 123 And here we go. We will have this one at a bit more solar. Stay at five and we need to. And then we need to change the background. We need to change the background off this obvious for you could say abstract angle fast. So chance the background something else. So chance this color. And then now we can change the color over a stroke. Kericho Now it looks pretty good. It looks pretty good. So This is the thing that we can also do using this one so fast need to draw the rectangle chance the color advice stroke here and increase their struck size. And if you want, you can use different sort of a stroke. That is our ever level. Here we can say center assistance. You can see that changes is gonna happen here and then you can say outside. And then you can see this one is here, so it looks pretty good. I guess I can are decrease it a bit more So at for of now, it looks pretty good on inside this one. We can simply add it takes TSA fretting attacks. Just click on this takes on in here in the middle, in the center. I guess we can simply say Daido and then we need to change the color off this text. So chance it to white. And the default one is 24 because previously we were selected the high top of what takes 24 . Therefore it is also showing is here. So if you need to update, it obviously can do it from here. No issues here. I guess this title is looking good here on Ben. Another thing is that it should be here. And the thing is that we need to do here, we need to decrease the size off this one like the height so I can minimize it a bit more here and then Oh, now it looks pretty good. So now we need to make them a group so that we can duplicate it. So I'm gonna slit all of them and press until G and then control are and name them what you can see Input field. We can say no. We can make them group press control D and then duplicate it. And then we need to have I'm sorry, I didn't mistake here. We need to have the internet. So select this group and press control D So do clicker selection. And then what is happening here where we cannot get the data here first, let me show that if we did our group in the right way. Oh, we have our rectangle have six rectangle here. That is the mistake. So we need to remove both strict angle. So this had a news director go. So I'm gonna remove it from here and this is also and you move another one. Andi, remove this one from here. And now we have this one and this one. So now I guess it would work. So select this one. So when I was selecting out this rectangle by mistake, there were a few couple of more rectangle. Therefore, it was happening here. Now press control the now we can see inside our group. We have one title on distract angle and then praise control D and here echo. But this text is not inside this rectangle. Right? So what can we do? Ah, weaken. What happened here? This is a rectangle. This is a wreck. Tango on. This is a rectangle that is unused. So I'm going to remove it here. And then I guess we can press control G. And let's see why it is not coming here. So there is our input field here. Okay, so we did another mistake here at in foot field here, So let me remove These are growth. So let me into on group and then let's check what is the issue here? So we have this one here and this one here. So press select board, both field so control G. I'm sorry. So press control and then select this item at the time We need to press single Andi Then we need to press control, Then do and praise control. G once will press control G they will become grow and let me duplicate it. Andi again, The same thing is coming here again. The same thing is coming here. So there is our issue here. So we need to fix it. So they should waas that we didn't do that growth in the right way. So let me on group it again so that you guys can all know their exacting how to do this thing. So we have one rectangle and one title. We need to slack both so select and make group And once we will make them group now press control G So slick this growth here and press control de and then we can duplicate it. See? So the president saying But I did some mistakes, I guess. And that's where that it was not working and press one more time And here we go. So we have G items here and the second takes should be our description description and that thought on the last one should be our amount. Here we go. So now what thing we need to do? We can see the size is not appropriate. Therefore, when it does increase the size off this style of books simply here and then increase it a bit more on the one swollen because it bit more in here. We will have to at two button. So one is for our safe button and one is for cancel buttons. So for that, copy these. Click on distracting Go. Andi, In here. We need to I'm going to remove this post. So we need toe slick, this rectangle and then in here. What can we do? We can draw a rectangle chef here so simply this one. And first we need to chance the border areas at 90 and let's see how it looks. So it looks pretty good. Andi Onda We need toe at only to duplicate it. So make them duplicate control. De And here it goes so duplicate. It's working here and for both up them to have a different sort of color so we can choose a color. So let me move this drug. This color plate from here. Andi, we need to choose thes color from here. But it is green one. And for this one we need to choose the color off red one. So this red color we can choose from here. So this one will be for safe and descended before castle. It's now we need to have a text. So at it, text here and press here and we can say can sell. Cancel, and then we need to jacket a bit more in the center. And another thing is that we need to decrease the form size here, so we don't need to have 24 year. Rather, we need to have it in here, and it'll be good, Onda, we need to duplicate that text the control D and dragged the text here and I'm doing that Takes two safe. So I need to have already has safe Andi because we did a mistake here. So let me at a text from here. We need to live safe on, then need to drag it in center and gents, the phone triggers. We need to change the fund. So first chance, the form size. So first chance the color off it so that we can see how it looks. So chance it black toe white and then chance statistics to block too. Quite so we need to change stout unit increase the size of what, next from here So important to 24. And for this one imported to 24. Uh, so it should be 24 not 14. All right, so we need toe add capital letter for this text. So instead of waiting small letter there so we can see looks smaller than the cancel one. That's the issue that I was trying to fix. And then we need to change the color to white. But we have done over these I guess those things are not in center, so tried in center and now we can see is in center. So another thing is that what can we do here, toe, Get it a bit more resent So we can add a circle here and then we can play with that. So for that, let me at it lives here. So drug Ah, by lives here on dfat stand for most Jen is the Seiss off this one So instead of 100 when it go at it see here aan den. No need to add 80 here, and then it conjugate in center. And so once he will do double click, it will give you are a bunch of options for gents, the gender chef. See? So it cost of Hector. So And if you click on the start that not this way with me Control Jet. And once he will click DoubleClick, then you will be able to see these option here is coming. Then hold on any of this one, any off distort icon on then you can simply drag them and play with that This way. See, you can do this thing. This you can do this thing this way. Andi, this is the uses of factor. And if you want to, then you can choose the color from here. And here you go. So this is the weight. We at different sort of design issues here. We can simply I guess we need to change. The color on the green color will be good here. So now it looks pretty good here, although we don't need to have it here. But I just wanted to show you something that we can use here but it looks pretty good. However, you can use it in your own ways. Now it's time to add the Paradise section. So click on this prototyping. And once he's really click here, we will send them. Soc no! Disappeared here and then drug and jog it to here. See? So now we will be able tow access. This one, It is gonna come this way. But it should not be this way. We should use this. Oh, on this one for L A t I. Look, I guess it looks really bad here, isn't it? Yeah, it is. So I'm going to remove it here right away. You don't need to have it here. So I guess you have landed how to use it. And then I don't need to use it now for longer. Select this one and then incident. Never get to when you do. Jews are open overly. And then that this nation and our destination enemies at that I let Dalek. So now if I'm gonna click consigning so if you're clinically consigning. Planning on glee consigning weaken income leak on this plaza tone And here we go. Now we can see this customer. Mandela has appeared and ignore See the border and I have a click outside. It is not gonna remove because we haven't added those offshore. So any here we can see So you can also play with this thing So off center, Like where you want to show your one. So let me say bottom center than how it looks. So it looks pretty good. I guess center is the best one. So all this to center Onda center and close when speaking outside. Then 11 enable this one liquor site It's gonna close. Add background behind overlay. You can also do this thing and for the animation we need to have moving on. And this one let me show you something. Click oxide. It is gonna disappear. Come click and it is going to disappear. So when is a click on the safe? It should be disappear or move to a new destination on 20 we'll click on cancer. It also should be disappear for doing this thing we need to select. So these button simply so we need to make them a group. So slick the whole text. I'm sorry. We need to slake the whole text and press control G Andi. They have become a group and we also need to make them growth here and brace control G so they have become group. Now we can take that Prentice off the start. So once our is really click here, what we will do we need to show we need to show on tough. It means that when they will look on on this item one what we will do our instead of navigate to our open overlay or separate or back or open Ling we simply do close overly so if we slept close overlay then it is going automatically close Close See, it is not going any fair. So and after saving these, if you want to move any other places than you can also choose the navigate two options Then again then against like this growth And for this one, we also need to praise on tape up less selecting aunt If we need to press close off early so then it is gonna work the same way. So clear here Leaguer site It is going to remove Andi can sell it is going to remove on and for safe. It is very move for cancel It is gonna Shimoff. So that is what we wanted to have in here, Right? So inside the circular. So let me add this one instead. Off doing the factor. We can simply jack our lives here and we can edit text here, so that would be the nice one. So goto this design on and and what can we do here? We can simply chance the color background color on then inside this one, we just need to add it text so we can add It takes here we can say so Text is going to be considered at, so we need to have a text here and then we need to slag this one. So once you will select a text, we need toe Add this text here and we can say at and then we need to change the color toe white, and then we need to change, so need to drag it to center. So now let me check it how it looks. So here you go. So now it looks pretty good for this one, Andi, or we can simply drag it a bit more. The circus It looks good, but the simple thing is that we can do is we can increase the height up this one off our whole a little. So we're gonna use it. Then we will have to jog the whole debt up. So instead of doing this thing So we have our smart off, Sean, Simply what can we do? We can simply make them groups All these. Then make them a group on Select all those field and Magd Emmick Cruyff So they have become a group. And for this to also make them a group and just press so just press control G and they have become a group Now we can easily I'm sorry when it to make them a group, right? But we haven't press control g. And now they have become a group now drugged them here and as I'm sorry, so as and they are the group we need to select the winning to slake the group. So instead of the particular item we need to slick this group on, then we can simply drag them here and then we also need to make them growth and press control Z and truck on to win it toe praise when it to make them grow. So I guess it's already group, then truck. So we did a mistake here. I guess we need to make them a group instead. Women group. I did a mistake. I guess so. Press controls G in a group now. Drug This one here. Here, Rico. Now it looks pretty good when we can take old off these advantages for these items. So place safe. Andan praise, cancels. It is working perfectly and we need to have similar things for our But all of these options performed this and draught items remember that previously we make them group so and we need tohave similar design for this and adjusted to 10. We just need to change the cancel on. Do this one on this text for that. What can I do? Simply simply I can duplicate this at data l adelo and and press control DE to duplicate it . And it has become duplicate and then chance that text here. So instead of at we can say we can say object data l a toddler the update. Ah, a lot of dialogue. Onders it. So now we just need to chance that text. So interrupt this. Add text What can we do simply? We just need to chance it. Toe it it. And then I guess we need to use. Put it to use capital and a small nicks Tonito chance this capital and one in two chance capital and small mix on. Then it it has done. And then in here we just need to change. This text can sell to dill it It's a place village to have dill it and then this one should be on. Then this one should be abduct. I'm sorry. We need to have it Arc Capital, so need to have abduct, so we need to have it update. So now these are corruption has done. And the other thing is that what can we do? Simply So add on it it. So now, once these little click on this dish in this growth, we will send them to this one, and we'll have to show them. So click on this dot Click on this growth See? And we can see this one so we can instead off drag and drop so we can save the jacket here as well. No problem. So you can sit connected. So instead of never get to in here. We need to change state open overlay for the custom. Oh, look. And slate close when click outside and you can see moving and easy out and all of the features. And because we were coming are duplicating this thing. They're sorry automatically. Everything has been selected that we were using for this one. So now let me check it. So click on this one. So click here. So we need to click on this one on Dhere. Go Now we can say it a tattle description amount deal it and update if I'm click on a kick on. So if I'm gonna choose on object, then you can see it has automatically removed If I'm gonna if I'm gonna click on this delete button And it has also remote because that birth pill also has been selected here because previously we were doing this thing here c c. It has on teff and close early. So that thing is that it has automatically added, because our way did we just have duplicated our at a dot on holiday look. So this object that Al Adela therefore whatever functionalities we have added in this one, everything has been automatically selected here if you run tow ab idiot, then obviously you cannot get it here. No issues here. So you can see this one. And for this one, but and for and for in this group, we can also see. We're gonna also see this thing is here on this thing is here, see? None. And so if I'm gonna select this one, then we'll be able to see on tape and closer wonder that we use to and that they usedto dismiss Awadallah. So our at and it has finished and everything has been completed for thes income. But this income dash sport and we need to have similar sort of things for the expenses, I guess. And then similar thing for the bill. So it is working perfectly. Andi, I'm gonna stop this video right here, and we'll start working on our expenses before that. Let me check it. One more time is so that I can get confirmation that everything is working perfectly. So our school view is working then Our this data is working perfectly in this idiot off shows is working perfectly. And then this one is also working perfectly. So here you go. So now we have finished it. And then our big button is working perfectly. And then we need to work on our expense filled than food and our appeal field as well. So we will start working in the next lecture. See you guys in the next lecture by 14. HorizontalList ExpenseData Part 13: welcome back once again. So you never preface spot to We ended up working with our income offshoots. So we ended up in purely all of those features and in this part to win it, to start working for our expense, so for expense. But we're going to have a different sort of designs so that you guys can enter of learning a new team to design so faster for most, we need to have our friend So goto this frame Andi, click off frame and select iPhone. 11 pro on. Let me Jim it. So join in. And no. So it has become 100% zoom. So this is the best one. Like, we always need to have 50% so it looks good. So first thing fast, we need to change. Stand them off this one so we can simply say expense. Okay, Once you have done with the name changing what we need to have, we need to have a background color like the background color that we used for each and every item. So the court is here, so I'm gonna copy this court, and I'm gonna baste it for this one. Andi here ago So this is our main expense. You I So first thing first, let me oh, do the prototype section so that we can make it prototype. So this is our put out of options. So this is our expense, and it is not connected with anything. So what we need to have when it toe for an hour is really click on this expense, we will send them so for that. But can we do? We can simply select this one. And then we can simply at the directions to click on on tape on de never get to where we want to go. We want to go our expense base so that men once he will do it. Then you will we see this drove. See? This line is coming here. So instead of dragging from this location to this location is quite difficult. So you can always choose it from here. Andi, once he was like this off shown, you will be able to see some sort of any mission here. So by default, it shows instant. So now we need to add moving. Andi. Then let Mickley here. Here you go. Know we're here. So now we don't have any back button. So what we need to have We need to have our back button here support the back button. First thing first, we need to have a but we need to have. We need to have Abbott here, so I'm gonna select our Abir. Sweet. Let me undo it. So need to move on to descend part. So instead of presenting this are aber one more time. What can we do? Simply We can simply duplicate can simply copy this one. So remember that in our previous part we ended off the reasoning Our Abir So we can simply take this ever and then we can added here. Right? So for doing this team, if I want to a copy of certain part from one from one frame to another from in the case. But we need to do we need toe, make them are component. But before that we need tohave our group. So let me group all of this thing. So this item this thing I'm gonna make groups of press control G So it has become group. So once you'll make them a grove, you can simply right click and then you will be able to see off shown it calls. Where is it? It goes component. So we could see create component. Or you can use the shortcut key control all Truckee. So once you look like this component, then it'll appear under these asset soc In here we have these options. So whenever we will create component, it would appear under the SS. Now it'll it has become asset, and we can take use, digest it as much as you want and anywhere so we can simply drag it, and then we can add it here. Then we can show it here. And here you go. So this is the beauty off using the component. And I guess previously, I also shown you how to do this thing for the rail station. But on this one? No, The thing is that we just need to update the text, so simply chance it to expense expense. And in here, we don't need to have these icons, so I'm going to remove it from here, and we need toe. I would like to work a bit more for this one, so I'm gonna chance the white off this one. So instead of 48. Let mere 30 on anything is just here. I guess so. I need to choose this one. Andi. So why it is not changing here? So what happened here? This thing is not changing here. I guess we have joining. Therefore, we cannot Oh, James, it here. If we want toe for just a reason why it is not showing here. So we need to remove this one here and then. So I guess it is not working here. This way. Uh, it should work. Let me try it again. So we cannot chance this icon here because we have drawn it using these arrow symbol here on it is completely fixed with this one so well from gallery. And let me try it. If there is any way to do this thing So we can simply do one thing that is called group selection. A frame pattern being sent to backward and no shows here toe after this on. So if I want to abduct this one from here, then see, I can simply up did it. And I can change the white with hearty here. See, now we can taken chance, though off 2 30 on and Here we go. So this is the way, as we have Ah Mech component from here. So we met eight component here and then once we will change it here. It is gonna change here as well, because we just copied the component from this file toe this fight. So instead of changing here, we can change it there. So this is the thing that we can do now in here. I would like to have all holy generalised call view where we will show them the title off the expense, the amount and the dead. So for that, we need to take health off our rectangle. So I'm gonna draw. Oh, I came here. So let's say this one here aan den, I can double click, so they sort of doing these things. We can simply praise these one, and we can at 50. Here we go Now. It looks pretty good, isn't it? Yeah, it is. And then we need to change the color so we can use pre used color. This color is not looking good. Rather, I'm gonna choose this one. Not this one. I guess this one. This one on anything we need to change stop border areas instead of 50. We can at 30 it'll be much more better and then so we can simply are juice or any random color. And then the first item will be our text where we will share like the expense Steiff. So we can simply say for buying foot. We have ah expense. Oh, we have some expenses. So for that, what can we do? We need to change. Select the text and then right here our text we can say foot. And once it was like this foot. So move toe on before on drug and drug and jug Andi. Then we need to change the background color and the sizes criticize form sizes 36. So I guess statuses will be good enough and let me move toe this expense and it looks pretty good. But I would love toe, decrease the phone size so 36 then use it to 40 Now it looks good, but it is not in center. It should be in Not this one. We need to choose this one. It should be in center. See, It is in Centre Onda thing is that we can do here. No the 2nd 1 should be our amounts. Like the amount that our is a is gonna expense for a certain time of fruit. So we can say our dollar symbol and then at 560 and then simply we can increase the size. Ah, big, more aan den. Chance it toe white or we can choose green. Getting greener will be good So now it looks good on then we need to have a debt. So for dead we need to select text again and we can say 20 t July and the year is 2020. So for the dead, we need to chance onto decreased are fun size. We can say 24 will be good on drug it Onda once a well jack, it here will be about to see it here. So the food and the text color is going to be here. So it looks pretty good, isn't it? On disses died em that we have just designed. So what else can he do here? We can Ah, I guess it will be good if we can at those Texan center or it looks good here as well. No issues here. Now we need to make It s scalable. So before that, we need to make them group. So first and foremost, Magnum, our group on we can say and rename it, we can say expense items on. Then we can duplicate it a couple more times it and a couple of more times. So say we cannot see this one this way. So I'm gonna select the expense frame and then removed this clip are like clip content. Then you will be ableto see the fuel and then duplicated multiple time, so duplicated a few more times as much as you want tohave it. And then so I can drag it a bit more here than truck it here, then drug it. I'm sorry. Not this one. Wanted to select the entire group. Drug it here, truck it her on drug it here. And another thing that we can do here. So I need to change it. So the text has been drugged here? I guess so. We need to not this one. I'm sorry. So in to select the text and then drug it here on drug it here, then it looks good. Then drug it here then so other two are good enough so we can simply change the background color off these item so we can are off. Go for this one Then we can choose and under color. Ah, not that text color. Rather, we need to change the background color. So double click and choose your dessert color Whatever color you want. Tohave this color again Choose this one So double click And for this one when you choose in this color So just I'm just dating some random color You can choose any color whatever you want Tohave fin your oh item on den for this one we can choose again Add this one here. So this color and for this one is going to be this color something You let it to this one. Now it looks pretty good. Slipped me. Okay, so we need to change this color here because the background color and discolor is almost same. So it is not gonna work here, so I'm gonna choose something else here. So this one will be good. But now we will not be ableto see anything here because we haven't added any functionalities for her. A generalised call for you. So the thing Is that what can what we should do so fashion for most We will have to make them a group. So all of this data So each and every item is a group. And now we need to make our entire group so slick whole bunch of data and make them a group Suppress control G. So they all have becoming a group. Now what can we do here? So click here and then you need to press play Pontin So that all all those data can disappear and let me show you something. So once we will make them a group, Andi then so we can use this clip content because it will need a letter. And then once we're done it with this group so then right click on magnum frame. So you need to click on frame selection, wants your click on from selection and again click on click content and then drug and drove here this way. See it still we can see in these often is here And if I'm going to remove it nothing is just so once we will do this thing and then we need to have toe klik aan prototype and instead of saying noise calling, we need to slip her a gentle its called you. Now we will be ableto so we did a mistake here. So let's move on to the descent part and in here when it removed this clip of Sean and then that inside this part of life. So we cannot see anything here, but it should be here, right? So what mistakes we have done here? We make them our group for all these other. So the reason is that we cannot see our data here. The reason is that if you look at here, then we will be able to see that all obvious detect them is outside up this frame off this mainframe, which is our expense. So it all of those should be inside this friends. Therefore, we need to drag them and paste it here. So we need to have all that. I am all these expensive item under this expense. So I'm gonna select and then track it here. So we to select one by one on then track it here because see? And now we have only one. Then we can see. So now all off our data are inside this one. So now if I'm gonna slick this expense and then if I'm gonna click, then Harry, go now we can see our details here. So if I'm gonna click on here, then it is gonna disappear. So fasting fast. So the mistake that we did it waas all of the data where are set off these men free, which is our expense. So whatever we're gonna show it should be under this expense. So now, so fast. I'm gonna chance this background color here some to double click on. Then chance it toe this color Americans choosing this color. So once. So now let me explain it one more time so that you guys don't do the similar type of mistakes. So once we will select here, everything should be inside this frame. And if we look at here, then you will see there is a depth calls, flip content. Once it will click, then everything is gonna be disappear once you're gonna unq lick, Then it is not gonna appear here. So fasting fast is we need to make them a group so slick, all bunch of better here and then we need to make them our group. So once they are in a group now, if I'm gonna choose here, then I'm gonna click. So everything has been removed like everything has been disappeared here. But all of the debt are inside this group now. Slick the group on right. Click and make them off frames. Click on frame selection. Once we will click on frame selection in here, it will be able to see the icon has been changed. Like this one. Now slid the frame and and minimize this too are men. Note now we will be able to see our data and off course you need to add. And this is scalding option here under this prototype. So it's like the frame that is continuing your whole debtor that you want to show in our origin of you. Then you need to have this horizontal spooling. No, here we go. No, we have our data here. So that is what I wanted to show you. So there's a very visitors. I guess we also did this is calling in our earlier parts, like and this one from this card. Just because off the mistake, it takes a bit more time on bothered me for this mistake, and then what can we do? So this is the holy generalised call view for this part. And I'm pretty much sure that you guys are gonna love this course. And I'm going to stop this video right here and in the next part in here we will add our dash sport for the brutal experience or a few more other things. And I'm going to stop this video right here. We'll continue it from the next lecture. 15. DashboardDesign Part 14: welcome back once again in the spot, we will start working for our dashboard off this expense. So in the previous part we did. This is called Viv. So far, and in here I'm gonna add a dashboard for the entire experience and the monthly experience and the total expense. So for doing this thing first and foremost, what we need to have we need to have our rectangle here. So I'm gonna design a rectangle here. So draw this one, Onda, take a bit more space because we have a lot of us space over here and I'm gonna increase this one here a bit more, and then I'm gonna drag it here. And here you go. So this time I'm gonna do ah, bit more customization here. So for that, first, let me at the background color so I can see this color looks really good. So I'm gonna choose this color this background color for this particular like them. So copy this color and slick distract angle and placed it here. Kericho and fasting. First we need to have our box shadow here. So added T or four more A couple of more here and then so we need to choose the options here like the shadow color like the shadow off shown so that because the bagman color is background here and the main color is also back down. Therefore, it is not looking good. So we will fix letter. But before that, what I wanted to have I want Toto have border radius in tow a different way. So for that for doing this thing, what can we do? We can simply select a particular so we can simply select our particular filled. So just need to double click. Then this dot will appear and then click here and in here you can give the radio so we can give your radius 50. And for this one, I can also drag obviously. But I don't want to drag it this way. Rather I want to have it. Oh, book shadow. So we can simply select this one slick. Then this until appear here on at 50. And here we go. See, it looks really good, but instead of 50 I guess we can give them a bit more. And it's like this one instead of 50 at 80 on. The same thing is for this one DoubleClick slick, this attempt. And just for a tick on here, Rico. So now it looks pretty good. Well, it's something different than the previous one, right? So what? It something different. So look at here that this one is automatically going back to this all budget minute, which is the home pays. Because if you look at here, So we basically we did it. We met it. A component. And in here and for the previous one like that for the income data. This this option waas selected automatically. Son was connected with the home pace with the with the main home piss in under this part of life. See? So, as we have copied from here, it has automatically added the same features that we're getting here Soap Lake. And it is coming back to this home. So now in here, we need to add our data. So first thing first is we need to have a text here so we can edit text against it in here . We can say in the dreaded text here. What is it? So just like this text and then in here we can ride it text, and we can so we need to slip the design first. They need to slip that text on in here. So text and then fixed. So what is happening here? So it is not working properly and get something. Is so when strong here, Andi. Then when it to add, it takes there. But this is not working here. Aan den. Here you go. I wanted to write the text so we can add like a number. So a c So first let me change the back color up this one because the bagman is black. Therefore, we could not see anything Now. Here you go. Now it looks good. Now we can drug it here. Once we was selected Weaken drug it here and then. So the front side is 36 Onda text this year. So we need to have a couple of text years. I'm gonna duplicate it. Control D aan den added here and then in here we can say balance. Oh, Instead of saying the balance here directly, we can say this month Then duplicate it again. And instead of this month this time wanted to right here last month on then make it one more copy. Aan den we need to have the balance. So this month, Last month, Andi. Total expense, total expense. And then the last twenty's current balance. So this is what we need to have in here. But we need to decrease that take size for each and everyone every item. So we can select this off. Shown this option last month. This month account. And then, gents, that takes size 36 to it didn't for all of them. And now see how it looks. So it looks quite good, isn't it? Yeah, it is. And then we to have, I guess, can increase it a bit more than before. You are 24 will be quite good. Andi, This one is not in the right position, so we need to drug it a bit more here. What can we do so we can drive it here in this way? And this one is also from here. This one on. Then we need to add some. Hello here. So for each and every month. So for that we can have a off arrow here so you can draw arrow. Where is they? Are always here. So this is the options to choose the arrow on. We can chose this way on long. Let me see how it looks. So you need to change the color of this. A stroke black to white on here ago. And we can off course. We can change the white from here under 2 50 Andi here ago. But we need to change the stroke size. Want to see? And this is what we wanted to have here. So I'm gonna choose this way. See on then. We need toe duplicate it. So we need to make them duplicate. Then again, make them to get. Then again, make them duplicate, Then again make them duplicate. I need a mistake here. So need just like this one. So why this is not coming here. So now it looks pretty good. So everything is fine here, so we can have that amount right over here, so we can simply at it text and then at the data here. So, at fixed, we can say dollar symbol, not dollar symbol. So this is just a accounts we can say five to and 25 Then we to select. And then we need to change the color black toe white. This is the phone number, and then we can simply duplicate it on. Then who need to chose 50 80? Yeah, it looks pretty good. So then duplicate this one, then duplicate it one more time on Dhere ago. So it looks pretty good on then. Just need to update that text so you can simply update as much as you want. Total expense. You can say Andi in here. You can simply at Janice. I'm just heading some random text here so that we can see this one. So our expense part has finished successfully. And we can see our item later. And then our total calculations. So in here we can simply add our text. And we can say it's a Dodge port. So plea context. And in here we can say passport. Dashboard. So what can we do? We can simply chance it toe white, and then we can chance it toe 36 and oh, God, it should be a bit less. This one will be the best one. Andi. Yeah, It looks pretty good now. Now there's almost done. So we have finished it. And then if I beg here, so what? Income is finished and This is our expenses and our dash sport. So now this two part has been finished, and now in the next part, really sort of working on our bill section on the food section. So I'm going to stop this video right here, and we will continue it from the next lecture. See you guys in the next lecture by 16. BillsUI CustomAlertDialog Part 15: welcome back once again. So you know where people spot We ended up finishing to work with expense, and they were dash sport. And this is the right time. So we have learned how to work with very gentle on how to do custom resent from the dashboard. Now, in this part, we're gonna go ahead and get started working with this bill option. So once is, really click on the spiel, we will show them some off you items for being the big, like the electricity bill. Gas bill, water bill and several other things. Just some random. Well, item on do we'll show them toe have the options to pay the bill. So for that first and foremost, we need to have. So if I'm gonna go toe put a time, then we'll be able to see a lot of things are connected with each other, and it looks like just a crazy See. So see, Look at here. That how many of them are connected to it? This on this one and this one. So we did a lot of these in here. So if we look at here than we can say, we can count to 36 nine. So we have designed nine pitches so far. And then no, we're gonna do is in a few more pages here. So, first and foremost, we need to have our friend Supplee con frame. And here we go and click on this frame. So now this is our friend and first thing. First, we need to have a background color. So for reading a background color, we need to choose the background colors, click on it and select design and copied a background color from any off of all out where we were using the background color and then slicked here and based it Here, Here we go now joins the name to build, and we are ready to go. So we need to have a aber. So we met our component off our at bars that we used previously. Then I'm gonna copy it here and then paste it here. Here you go. So now we need to remove. Why? Don't need to do so. We need to remove this icon first, remove this icon and then when dio removed this text But in here we can remove this one because this one is connected with the prototype C by default. It is connected with the home is not biting ful because when he met it component so that this one was connected with this one. So there's the reason that whenever we're gonna use this Eber, it is gonna automatically connect it with this home. It's a good thing because we obviously need to move to this home place from the bill pace, but we don't need to order off it, So just need to change Start text income, tow bill. You can say bills here because we will have multiple bills. And now, if I'm gonna click, nothing is gonna change because we haven't at it. Our positive options from here so fast need to select decide him from here. We want to go. So once he will select here, then we will have this interaction option. So now, by default is none. And then we need to slick on test and then we need to have never get to and then we want to go. We want to go to our bill, and then it will give us this one so it is not connected. And then we also need to, so we'll get the animation because we have copied it. Andi, this one not like a bill. And here we go. We're getting the animation and back We're here, so we need to drag this text. So select on design first and select this on and track it a bit more. So need to select the P on now. Effect weaken, Bill. Then you can see the bills is here. All right, so now here, we need to design our bill options, support doing this thing, What we need to have We need to have our rectangle so pick on district angle here and then and draw options here. So we would I would love to have two options here. Slipped me back to the pace and click on experience. Let me find out some suitable color so we can choose some random color so fast. And for most we need to chance. So if we want a week and do this sort of present here. So let me add this to then here. So at 60 or 60 at 90 from the stop and this one from the stop on, let me check it. Have it looks so it looks pretty good to than it. Let me. Here you go. It looks pretty good on the other thing that we can do for this part from deception, we can also have icon. We can also have border edges off 20. And here we go. We can also have ordered yourself 20. And then we can simply in charge it here and then went to change the color so we can choose some random color here and here you go. So we have these option here. So we set off on here, we can add it just here and then let me duplicate it. So before making it and duplicate, I would love to have that text off this one and the icon. So what can we do if we can add our text? So click on this text and click here and we can say electric bill and we must need toe decrease the phone size 36 to 24. Or maybe we can decrease it a bit more. No, let me check it. So 24 will be the best one here. So at 26. 24 change the color to white. So what can I would not be good here, brother. Black will be the best option here. Or we can just some sort of color, this one. And then we need to have this one here. And then we need to choose our color, not a color. We need to choose our icon here. So go to this plug in and decided if I So I'm just gonna at some random Michael so that we can finish our task as quickly has possible. So for that for the bills, I'm gonna choose this one and then for is taken. So here it is. And we need to chance this one. So design on and the height and white on this iconic and simply chance it from here. 50 on 50. Here you go. No, here it is. I'm going to remove it here. 10. Me too slick, though. And we can now drag and drop it here. So it looks pretty good here. No, we can make them, ah, group suppress control G, and then we can duplicate it. But before that, we need to change. Starts pulling. I guess it should be see, like chick. So whatever it is so just to do to get it, Onda, We need to press control G to make them duplicate here. I d anything you stay here. I'm sorry. So we have off some random item here and all of them are in group. So now we can No, no. If we're gonna duplicate it, then they indeed that I was gonna duplicate. So let me Reince it here and this way. So instead of Electric Bill, we can say water Bill Onda, We can say what our bill here, Andi. Then we need to have a need to duplicate this data one more time and then magically duplicate toe one more time. So now we have this option, But we need to re Aaron sit. Andi, here we go. How? It has become a bit different than the previous one. I guess it should be this way. And now if you look at here, the icon has disappeared from the center on. It should be here. And that takes should be here. And that takes should be here. A swell So electric bill. Water bill and then in here, we need to have we can say net bill, and then we can say gas bill. So These are the thing that I wanted to add here and now. So for each and every item, we will have to show them our we will have to show them. Ah, a lot. They look for Dee will be able to put the option and then they will be ableto send the money. So for that we can take a health off our frame so fast we need to take a frame. So instead of taking our frame here, we can simply duplicate any of this frame and we can make them and we can simply abduct them. It will be our It will be a wise decision, right? So we can simply duplicate this option. I'm sorry. We need to remove it on then slick this movement on press and then press control D And here we go. It has come here. It is a pure here and in here. What can we do? So first thing first we need to update the name off this month. So we can say B Bill. Now look on and in here we need toe make few changes. So fasting fastest. You need to chance it to pay. You can see I'm sorry. So click on the Sony to click on the move tools. Then select this one and then when click on display aan den. Once you click on this pay, then we'll have toe. I'm did this one title toe a moment. Then you can say, among best description. Andi, incident the execution. It should be unknown. Amount to not then month and months. So amount, not months. And in here, we just need to help. Ah, we just need to have one button so removed this one on. I'm gonna drag it here, and I'm gonna increase the height and weight off this one. So instead of object, it should be be we can say Hey, Bill. Now look at here. We cannot see it here because we haven't had it. This one with the option. So now we can do What can we do here? We can simply at production. So click on this part of life, and then I'm sorry, you know? Then Then hold it and then and drive it here. And once we will do this thing instead of never get to, we will have to use open overlay and then we'll have to So, Jake, this one so close when clicking outside, Then add the desert animation, whatever you want to have. So instead off from site, I want to have it from the top. And then if I'm gonna click and it has come so pay pay bill and then amount not on months. If I'm gonna click our site name is going to disappear on if I'm gonna use this one. And if I'm gonna click on this table and it is also gonna disappear, we Although we have been toe work on this pattern for this one, but it still it is working. The reason is that we copied it from this Abit one. Therefore, all the features that was available in this button it is showing us over here. See perfectly here. Then we will be able to see this one, which is our. So if I'm gonna click it here, then it will be see on tape, close overlay. So this is the advantages off making duplicate off a certain thing and therefore are you don't need to do everything from its crust. So that's why I always stripper to make duplicate. And you should know how to duplicate it and how to use it, because it will safe your time a lot when you will work on a professional project. So now, if I medically, then he's gonna work. So this is gonna work. So let me do one thing that so make make a copy for each and everyone for a foreign agent. So we should connect this one for each and every item copying connected. I guess it will automatically work for all the sitters. Yeah, it is working because this one has already all of the features. So I'm gonna select this one and again, this one Then again, this one. So it should be connected to this one on this one. So age is working Perfect, you see, So if you want, you can add our custom item for each and every item in. You can simply change the name if you want, but we don't need to have it because all of the features is gonna be same, because we're gonna be we're going to pay bills. Nothing else here. So and in here, we can simply add our text, right? And we can say, Choose your bill, Andi, for doing this thing slipped design. And I'm gonna choose our rectangle over here. Andi, just at a few more in here on. Then decrease the size. So increase the size here on, then increase. Decrease it a bit more. And then in here we need to at so at radio study. And I'm gonna choose this scholar here like this background color. We can simply copy from a copy it from here. This color. So copy the color code from here. Andi basted here. No, now it looks good. Pretty good. But we can on in here. We need to have a text. So click on the text. Andi, In here, we can see be you're bills once they will pay your bills. So this is how it works now it looks pretty good. We have added our text here so we can say pay your bills or we can do one more thing if you want. But we don't need tohave to add any icon here. But if you want definitely you can do we know issues here, click on it and then we can see this thing is coming here and here we go again. K, we can click on payable options. And this is working perfectly. So our bills, but have been finished. Now, in the next part, we're gonna start working for the foot section. So this is enough for the spot. And we will start working from the next lecture series in the next lecture. My, by. 17. FoodUI PlaceImagesTool Part 16: welcome back once again in this part, really stood working for our foot options so well and training some sort of food in a great And then we will show the price off your foot. So that is what we're going to do in this part. So for doing this thing, we need to have our friends click on this frame and click on this iPhone 11 pro, and then we need to drum in here so once we will join mean so it has become a bit more. So click on so 50%. Now it looks good. So fasting first is we need to have a background color, so first chance on him. So chance the name off this one, we can say foot. And then we need to change the background color. So change the background color off, and we need to choose the color. So for pity's color coat and slick this one and paste it here and here we go. Now, go to this asset and take this one from here. Aan den. Here you go. And chance this icon and no need to change that takes toe foot their state. Andi, if possible, try to drag it up a bit. Don't. Here. Okay, so it looks good enough. So another thing is that let me at the for adoption. So pecan prototype on and select this foot slick this foot and then we need toe use on tape . Then never get to son. So first need to press on Tiff then never get to on then our option is foot on, then moving this one. Andi, we're all done. So I'm vertically comfort were in food and click on back button and were in back. So now we can start working on our foot from So before that I want tohave it up. Oh, not the whole thing, Just the fixed. So we cannot drag it here because we copied it from this income. So if we're going to chance it And if you got a chance for everywhere, so we can not do it here This way. I guess it's looking fine here. Yeah, it looks good here. We don't need to do any other things here. So now in here, we need to have our off shown it calls rectangle on. Then we will show our Emma's on. Then we'll show the price off this food attempts supplicant rectangle on Ben. We need to decent truck it and then went to change the size. Ah, in here and then Jan Star border radius to 30. And here we go. And we must need toe Jan star background color. I'm gonna choose this color and copy this color code from here and slip this one. Once we was like this one, we'll be able to update our color coat, and then here we go, and we must need to have effect. So at border like and drop our borders shadow on drop shadow and we can see drove shadows here is coming. And then what can we do? We can simply have a text over here so we can simply have a text over here. So afflicted text and we can say on Dukan, Say 60. And then we need to change the color off this text. I guess this color will be good. So instead, off in this left side we can add it in center by clicking on this one on this one. Are this one this one? So we need to select it here. I'm sorry. So we can also do you think? This way. And in here We need to add our image. So for eating the same is there are a couple of options to use it. The best one is that we have an option here. It caused place images. So once you click on this image is you will be ableto access all the you will double toe oh , excess the folder. And then I have downloaded few images and then I need to exist the folder here. So this is the images, so I'm gonna select all off them. So if I'm gonna select all off them So we for that let me make them group. I'm sorry. It should be here. And then I'm gonna added here, so I'm gonna make them uncle on. Then let me duplicate it. I'm sorry. So there is something wrong, Sweded. This Mr here. So this thing is not in group, and now it wants we'll click Pest Control d And then so again, this is coming here. So let me check the group. So this is on this one, so I'm gonna duplicate this group, right? So press control de on duplicate selection, and then we can Jews it here on then so we can decrease the size because it is not gonna at here. So we can simply do it here on. We can do this thing here. So let me move it here. And this size is the perfect size. So I'm gonna first let me a chance. Let me jog that text here and then make them let me make it group so control d And then so again, it is selecting this way. So we need to choose it. So we need to remove this one here. I'm sorry. So this group is not working doing anything here. So this one is the right one Because we had a double group and then we can oppress control D aan den. So again it is creating this issue. Let me undo it here. And this is our group and this group is going to let me show. Is there any other tingle? Okay, so we have a lot off item here. There's the issue. We could not do this thing now it is clear, and now we can make them all duplicate. And now we can see how hot it is here. So we have to. I d him over here. And then what can we do? So look at here. Click on these bills and then go big toe this home pace and then click on this food and we can see these two white in this year. And now we can They can be a bit more closer. And then in here we can add our images, so place images. So we need to go to deck stuff on Ben, we need to have our 40 way, and then I'm gonna select. I'm sorry. Ambulance liked. We miss on. Then we just need to press one by one to place the images. So, see, see, you will be able to see the images lent and the number off images that you were holding. So we slipped it to Therefore we can say to So this is the best or so. Please just don't need to click one and one is here. And another Let me do all right. So I did double press. So let me select it against place images and just remiss. And then if you hold, then it is gonna show you. So click one and then click one Here you go. So this mess is big, becoming a bigger size. So I'm gonna simply so simply, what can we do? We can simply decrease the highest off the limits. Andi on this is direct angle and we need to increase the hide off direct angle. So this is the aim is so you miss high. It is 2.2 and a rectangle. Heidi's three point something and this is how it is looking on. This is our group, and this is our background off over rectangle. So if we're gonna use distract angle here this way, then we can use it this way on. Then we can simply ah increasing decrease the size. And on top of this m s, we can have what text. But for that, this color is not gonna work here. So we need to change the color two green toe black. We will be ableto see it here, and we can also drag it here and then for this one. We can also drag it here. But we need to change the color green toe black and then it looks good. See, it looks pretty good. So simply what can we do we can simply Oh, make them ah group. So instead, off eating that fixed over here, we can do one more thing. Is that I guess Ah, we don't need to have. So instead of waiting this text just here we can simply at ah new rectangle just to blow off piste text just below up. This you may is on. Then we can mention the amount off this item. Then we can make them a group. It will be their good decision. So chance it do 30 Andi Then only do Jin's the background color. I'm going to choose this background color here. So copy this color Andi basted here and then me in here. We need to have our text so crazed that text here we can say 60 aan den. What can we do here? We can simply gents, you can simply Liffe it here and then make it a group once will make it. Our group will be able to duplicate it. So again and again, we're having this duplicate data so that the least that that takes has become our stood up distant group. So it should be in here. And now if I'm gonna duplicate it, then I guess we will be ableto drug it here and then chance the chicks just at all different number. So at 80. And here you go. So no, it looks pretty good. Right? So the same thing we need to have a couple of more time. So for doing these thing, what can we do? We can make them a group, and then we can duplicated so press control, G. So they're now in a group, and then we can make them duplicate. I'm sorry. It should be this way. And then we need toe increase the size of your frame as we're taking holy gentle a liquid as we're taking particle list. We don't need tohave. We don't need to do any other things. We just increase the frame sizes and ages gonna automatically detect the It's called few, but we need to chance they miss here. So for genuinely miss again, we can follow this process. So go here on DSA like place him in the stomach and select this one and this one. Andi. Then we're gonna have this one here at the salon here. Here you go. You mess has been changed and Then again, we need toe. Make them duplicate. And if we duplicated here, then we will be ableto access it here. So what we have here? We have adjusted, but it is still showing this data here, but it is gonna abduct gradually. See, it has been updated. So this to mess images have been updated. But the rest one have not updated yet. I don't know what is the reason. So let me run it so that we can see the fresh one on. Define gonna run it then it is going to appear from the beginning. Okay, so we have selected this one on Dhere. Rico. So it'll appear eventually. No issues. So no issues there it is gonna appear eventually. Andi. So let me take it one more time. So let me back and then click on this foot on. Then we can see 12 Jamis. And why it is not working. Let me remove the scope. Let's see. What can we do? Know what? Can you see? It? You can see there is only stat vessel one m s have been uprooted. But Decimus is that admitted yet? I'm sorry. Don't Jen's it this way And now if I'm gonna run it, then it is gonna add here. So this is the basic process to at our images here. So I guess it is about the Internet issue. But it is gonna work for you for sure. If those two images can be they are loaded than other tools will be loaded. No issues so far Now, the other two images are not showing here. Andi, that document has unsaved changes recognition. So this is the issue that it cannot save here. And that is only is that I need to try it now. I guess that you miss sizes really high their stories on that it cannot load it, but it is gonna work eventually. So the thing is that it was the shoe off internet, therefore we could not see it. Now we can see these images is here. And if, as we don't have any, monsieur, we cannot see any images from here. So simply we can all take Are you miss from here? And then we can place it here. And of course, it will show us that we have anonymous. Then we can I did a mistake here and knife I'm gonna see it here. Nothing is gonna be chance to, because Dizzy Mrs is quite a bit and fast. And for most, we need to have a duplicate one here. And then look at here. Now we can see it. And in here and we can based our new limits. I can say this one, and then it is gonna show us. And here you go. It has chanced. And here you go. So we can see in here you will be able to see you, Miss Rhys iced. And then So it takes time to load. They mess. Once it will be loaded, it will be automatically updated. In the meantime, what can we do? We can simply ah, duplicate all of them a couple of more times that we can make sure that our school Fury's working perfectly. Andi are you can select the group. I'm sorry. Where is the group? Come on, man. It is not just doing a lot off on. And that has been duplicated. I guess we can duplicate it one more time, so duplicate it. And here you go. We have added this options here and now we can duplicate it here so we can also scold you. Weaken Met disco abuse We can see here. The document has answered chances Jekyll Christ. So it means that due to the identity show, it is taking a bit more time to load the data. But this is the men process to add. So we just need to add the images just based it here and copied because it emphasises really peak. Therefore, this ticking a lot of time to look so fame gonna change ticket the properties off this immense. Then you can see 10 point she and me, there's a QC mess and it is gonna take a lot of time. Toe Lord Amis, See? And no, we can see this images are here, so we can It's called We can do is call view and we can do also back options. So we have successfully finished our foot off Shawn's. And now the thing is that what can we do here? We can simply in the next part, we will learn how toe export our design and how can we save all off them in a file? So I'm gonna stop this video right here, and we are almost finished off this project. See, we have designed all of this thing, And if I'm gonna lock out, then this lover is gonna work. So email, password, field signing field, then signing. Then sign off, then signing. Then click on forgot password, then from where possible is also working. Plea consigning were in our passport. We can also school it. We can click on this score income and the nucleus school, and we can clear here. I can click those daughter. Then you can see these custom idiot pattern dilute, delete update options. And once we need to at the legacy at title discount amount, cancel and save up, shown back here and then expense here. And then we can do this thing here. And then if you wanna click on bills, then we have these options. Click on this pills and we have Deceptions week here. Baby will get here and Bill here. No, when it typical net bill. So back from the bills and the food. And look at here. The magic has appeared. See, the images has appeared here. So this one and you miss a new miss. And, um, it's a new Imus and all the images we Justin duplicated. See? So it was our Internet issue, as I told you. So you can What can you do? Simply You can lord the images in this way, and then you can show it here whatever you want to show. So I'm gonna finish this stuff, this video right here and we'll learn how to export our design. So we have met are nice. Day isn't a nice, attractive, good looking f. Now we need to export eight. Export the design either in our jeopardy format or PNC from it. And then we can save it and we can send it to our client. But this is the thing that we're going to learn in the next lecture. 18. Export All UI Part 17: welcome back once again. So we have successfully finished our application and you can see all off our um Now it's time to export our us so that we can open it and we consented to our client or or develop our or anyone who is gonna write code for all of those us. So before that, let me show you the guarantee way like the final portion of this way. So when you that is gonna open this up, they're going to see this one this year by if their new user. Then they're gonna register using email and password, then they're going to sign up on. Then if they are already a member, then they need to signing. So once they will click on this, then they will be able to see these away. So it contains three options wanted. Signing one is for a good pass. What? And another one in Sign off from here. We can also move toe so enough and we can see the animation. And then if they're forgot their passport, then they will be able to recover it using this on. So it's a completely functional and the meaningful off. And then once they will signing, they will redirect with these home place and they will have to cart and they will be able to see account Onda Palin's option. And here you can see in the chart and in here on top of the right we can see icon. Once they will click here, they will be able to see their profile picture so there will be able to see a picture on the name and they will be able to see the AB adoption from here and no one's well back here . What can we do? We will be able to see this for options. One is for income and we can see this one. We're gonna school, and once weekly here are custom Valladolid is gonna appear And for the update off each and every item waas, DoubleClick we'll be able to see it it title description er and this option here and back and the ones that will pick on expense. They will have all the expenses data and then they will have a dashboard. Now back here and for the bill, we have four of Shawn's beer, your bills and for the electric bill, it is gonna come a lot l o for each and every item. And you can pay your bill. No, back to here. Click on the food and for the foot. We're showing some 40 minutes on the price of the foot, and that is what we wanted to show. So while you were gonna so while you'll or finish this course, you're gonna learn a lot of things. A lot of features that we can use and we can add in our replication. And I ended up showing you different sort of your design just to show you how to do it. A different sort of tools and parts off. Fichman, I hope you have learned a lot from this course. Now it's time to export our project. So for exporting, you need to collapse. All of this men frame. See, you need toe, have it in this way so that we can access all of them this way on. Then you need to select. And then if you want to export one by one. So there's that you just want to export this one. Then simply select this one, this frame and then in the right side and on the talk and in the bottom you will be able to see these export option. So by default it looks this way. Once he will click on this export, it is gonna come this way. And in here you will be able to define Ah what you need. What size? So Monix beautiful. So we can choose it. And then what for, mate? Do you want? Either you can choose peons, your JP, CSBC or video? So it's up to you. What you want for me, deputy is good enough. And once they will keep click on this export foot then it is going to explode for you. But now the question is that how can we get all of them at once? So if you if you so by the for once, he will export only one. Then you can see it has already exported. So if I want to click, then you will be able to see this one on. Let me our export it for this one. There's studies one just a one just for example purpose. So pick on this export. So if you were gonna slick and J P. C and one by one, then it is gonna appear in our image. Form it. So click here. You can see how did that is here. So how cool it is. Now, if we're gonna export all the images all together, then it is gonna download us all. Gee, file. Once you will extract the chief felt, then you will be able to see all the images. So I'm gonna do all the files at once. So select all the file so press control G and select all off them one by one, Select all of them on the one Kericho. Now, in here, you'll be able to see export hard in layers. It is showing 13 layers. Supplicant export. Andi, once you will peak on export and you can see exporting as it is gonna download aji file. It is gonna take a while toe, report the download and once it will finish, we will be able to see our Giefer. So we have finished our exporting. Now you can see there is no exporting messes. And I'm gonna open the folder where I have saved it. So once you export it, it'll comes in RG file and you will be able to see in the name off your project file. So the foot problem is on budget management app and it has come here in this way budget minutes been f and as our JI file and no right click on Let me extract it here so that we can see all the images here. So all the images are going to come off here and let me increase the size to our cycle. Here you go. See, now we can see all the images. So let us start from here and let me show you the next. And then you can see and then you can see. Sign off, then. Our This one did cycle this icon this and then this This one This one This one This one so we can see all of the items. This is the way to export your design and simply you can export it. And you consented to your I'm sorry. It should be here. So this is the way to export the data. Eso to explore your design. Andi, I'm when I stop this video right here and we have finished our project. I hope you guys have landed. I learned a lot from this course so Bye bye, guys.