Your First Mobile App Design

1. Introduction: Hi everyone. My name is Ra and I am a UX designer. In this course, I'm going to show you how to build from scratch a complete image editing app for IUS using Figma. And I'm going to show you some of the basic techniques that most designers do. Even if you don't have any experience doing design, this should be useful for you to apply in your design project. The course first we will build on boarding screen. Then we are going to move to create our home base screen, mood, portray, screen, rob, and rotate screen and much more. During this class, you will learn design techniques to enhance your design and make it more unique. You will learn how to create dark mood app and how to use mask for each layer. And how to add gradient to blend with image and much more. Join me on this learning journey and let's pig. 2. Class & Project Files: Welcome to our first video for our course congratulation, and let's start build our apps. So in this section, I'm going to show you all the resource that you are going to need for creating and designing our app. So the first thing that you will need to use is Ios 16 UI kit. This get some of them are free and some of them are paid, but we are going to use this one, the free one. And it's contained hundreds component assembly, demo, everything that you need for starting any design, not this design, but any design-related to Ios App. And also we are going to need to use Noto Sans font from Google. And this font has a high-quality font with multi width and height, and it's also free to use. Also, we are going to need to use SF-Symbols-Browser. It's a plugin inside Figma, and it's contained around for thousands icons. But of course we are not going to use all these icons. We are going to use some icons from here and you can have it as resource in the future. And also you need to have unsplash some portray images for our camera design. You need to download the plug-in inside Figma from Unsplash that we are going to need a lot of photo because it's a Camera Editing photo and all these links, I'm gonna leave it down in the description here. You can access to these resources at anytime. And let's start 3. Onboarding Screen: In this section, we're are going to create our first screen, which is onboarding Screen. So as you can see here, I have my Figma Interface and I have here to wages assets page where I have all the assets that I'm gonna use for my project. And right here I have Page to where I can create mine design. So click on F and I'm gonna choose iPhone 14 Peru. And I'm going to create a corner radius 50 and change the fill color to be 020 51f. And we are going to need here are home status bar and home indicators. So go to the assets and move down here and we are going to select for, let me zoom in little bits. And I'm gonna select these assets and bring it here. I'm going to move it outside the frame, move it little bit here, and just select the status bar that I'm going to use and bring it a line it inside here as so you can align it like that and brings in home indicator down here. And you can use alignment bottom. And I'm gonna remove this. And also we need here our background. So our background is going to be the camera and we'll paper here. So select these images, put it inside here and I'm going to move it around here and just drag the camera inside the frame as so. And I'm gonna play with rotation. It's gonna be 30 and also need to just drag it a little bit. So I'm going to create for possession is going to be minus 507 and for the Y position is going to be 256. And let's use this image as a wallpaper. So drag it inside the frame. So we need to play with this. So select on the layer and we need to change, the position is going to be negative 133.4. The Y position is going to be negative one to one and enter. And also I'm going to change the layer. Color is going to be colored dutch. And I'm going to zoom in to be able to see, I'm going to move these three home status and grew it as a home stats and move it up here. And we also need to group these picture layer and I'm gonna name it pays frame and move up for the home indicator. So as you can see here down, we don't have a contrast in the color for the image. So to fix that, I'm gonna create a frame. So click on F and drag it as so. The frame with 393.4, the height is going to be 334. And I'm going to move it up little bit. And inside the frame we need to fill, create a fill, click on linear, and the color on the bottom is going to be 000210 and opacity 100, and color in the top is going to be the same. So just take the same color and pasted here, but it is going to be zero here. And just move these little bits here to make more contrast. I guess this fine right now. And down here we need to create a header or headline for our app. So get the Type Tool and just type our heading. Now I create the heading that we are going need. And let's tie in a font and make sure the font type, it's Noto Sans. I'm going to change the font to be bold. Font size is going to be 44 fonts. Height is going to be auto lift. We need auto height and just going to move it like so. Now let's create our bottom down here. Just type F, create here, and get your type tool and change the size to 15. And I'm gonna type here, try it for free and let me change the formed in the middle. I'm going to just drag it here just to be able to see it and go to the typesetting our case. And I need to put it middle and height auto. And let's click on the frame. We need to fix it for the layout is going to be the center and fix it with fixed its height. And the weed see here is going to be 204, the height is going to be 44, and I'm going to create 34 border-radius. And also we need to create a feel for the bottom is going to be linear and the color in the top is going to be 65 73ed. And the color in the bottom is going to be one for D to E, six of us, it's the best is going to be 100. So I'm going to create a stroke is going to be 0.5 inside me. Get overlay and change the color to be white. I'm going to zoom it for you guys. Just we will see on also we need to add an effect is going to be linear shadow and 33 for the color is going to be 788ff and adversity is going to be 25% and we need to align it to center. And so now we have, our first Screen is 3D. We need to change the frame name right here and name it on onboarding Screen. Now we have our first screened in the next video is going to be able to creating the homepage is Screen 4. Home Page Screen: In this section, we are going to create our secondary Screen, which is the home screen. So as you can see here, I have our first design onboarding Screen. So to create the second screen, I'm gonna duplicate this frame. I'm going to remove everything inside the frame, expect the status bar and the home indicator and move the home indicator outside this frame deleted. And I'm gonna change the layer name to home screen as so. And now our frame is ready to start to design. Let me zoom in and up here we need to create another frame. And I'm going to just create a frame. And the frame size for wheat, 393.4, height 44, and the space between the status bar and the frame is zero. Now we need here our icon. So go to the assets and choose our SRF icons and copied and pasted here. I'm gonna just drag it out here. And I'm gonna choose the account icon here and drag it here. And also I need a plus icon here. Now the icon size is 44 for weeds and 4044 hide on the space between each icon is zero, and now we need to create our title. Don't forget to align it. Now let's create our titles. So I'm gonna bring that typing tool here and type my studio. I'm just going to drag it over here and just be able to see now makes sure the font type is Noto Sans and four sizes to Winnie on, I'm gonna change the font style to bold here and also all tuition auto height and align it left as so. And now we have our title here. Now we need to create down here our category icon. So what I'm gonna do here, I'm gonna click on F and I'm gonna create another frame. So I'm going to create here a frame. And this frame size is going to be for weeds, 74.4 height is going to be 78. And inside the frame, I don't need any background color here. So inside the frame. And instead of having a background color, I'm going to need create a circle. So go to here and we need the Ellipse tool and create a circle here. I'm going to zoom in on the circle. We need to align it up here a little bit. Now, delete the fill in the circle on. Now we need to add strokes, so the stroke color is going to be 6e68. A7 on the opacity is going to be 50 as so. And now we have our circle here. We need to make sure align the circle inside the frame. Now we have our circle. We, of course, we need an icon inside this circle. So I'm going to zoom out here, go to the assets here, and we are going to choose our glass icon, so copied and pasted here in our page. I'm gonna drag this down here, in this one here. Now I'm gonna choose this icon here and drag it inside our circle. Make sure to align this icon. And also the icon here is 44 for 44. Now we have our icon. I'm gonna zoom in. Now we need to create a title, downs a circle here. So we need to create another frame here. And this frame for weeds is going to be 74.4. Height is going to be doing T. Now we need to grab our icon are typing tool on five-year album. Just gonna drag our title here. Now, let's style our font size here is 15 and Noto Sans font on the font is going to be regular or to width and height. Align it on. I'm going to change the font color to be a zero, a nine FC. Now we have our first icon here. So I'm just gonna rename the frame to album. And I'm gonna group this icon and also change it to album. Now I'm gonna create another four to create our category menu. So just drag it here for another icon. Now I'm going to group all this icon here, groove it, and now we need to align it and also need to auto-layout the spacing is zero, and now we have our new icon here. Now let's ungroup this icon. I'm going to ungroup it. What I'm gonna do now is change the icon to other category and also change the name of each icon. So just, I'm gonna start to drag our icon here. Now we have our category here. Already finish this up as so. Now I'm going to change here each layer name to fit the same name of each icon. So now here we have favorites. Now let's group it again, all the layer here by have and grew with a name, the layer as a category, categories here. Now we need to make sure the layout for each, each right? Now What we are going to do is I need to drag each icon down to 20 pixel. So just ungroup it again. I need to fix this one before I start to drag it, just to make sure it's right. Alright, and this one also, let's fix it. I think it's fit. Alright, so now I'm just gonna click on the video icon here and drag it down just on select everything and click only. We need to ungroup it, click on Video icon and drag it 20 pixel. And for the gallery icon, I'm gonna drag it, sorry, As so it's pixel here and I'm gonna drag the favorite icon down here to Winnie person to align with visual icon. Now, select all the icon again and grew it, grew with again a name it and categories. And now we have our menu. Now we need down here create a separator. So what I'm gonna do is click on the line or just click on shortcut here. And I'm gonna draw a separator here. And for the weights is going to be three lines, three, and make sure the rotation here is zero. For the color is going to be the same color of the formed we have here. And also 50 going to be 30 opacity. And what we need here, we need from this separator is going to be as a curvy aligned with the selected item here, which is gallery. So we need to click on edit objects and the pin tool. And I'm going to create curve here, and I'm gonna move up. We need this curve is aligned with gallery. Now, we need to make the height 37 year. The space is going to be around 20, and I'm going to name the layer separate or one. Now, duplicate this layer, name it as separator to. And we are going to create more style for this separator. I'm gonna create a linear. So just drag it here, make sure you select the separate or to go to stroke on linear. And I'm gonna make it vertical as so. Now, let's play with opacity here. But before that we need to change the color. So we need to change the color here just to be able to see your changes. So I'm going to undo and the color here for separate or tool is going to be 087ef E. Now let's create our linear gradient and change it to vertical as so, create another three here. And just, I'm going to start to play with opacity here. So I'm gonna make Augusti here zero. And for the second one was just going to be doing at the middle 1,120.0 as so. And for capacity for Hall is going to be 100 and make it here as three. Now we have our glow here and I'm going to add an effect. So duplicate this separator. I'm gonna change it to, I'm gonna change it to the name separator to three here. And I'm add an effect lie layer floor and at eight now as you can see here, we have our curvy align with the selected items we have here. I'm going to group all the separate tool we have here or the layer and name the layer separator. Now we have our separator here. I'm going to group it with our category here, group each one of these intimate category. And so now we have inside this layer our separator and our category. Now we already finished from create our first part here. Now let's create our middle part, which is curvy gallery. We need here to create a layout of curvy gallery. So first, we need our rectangle. We are going to create a rectangle here and for which is going to be 393.4, height is going to be 260 as so. Now we need to create the curve side, top and bottom here. So I'm gonna click on that separate layer here. And I need to duplicate one of the separator and bring it up here. Now, I'm going to take it here. I'm going to zoom in just to be able to see an align it. I'm going to make one-hundred up here and I'm going to duplicate this separator and move it 180 and move it down here and align it with our rectangle here. Now what I'm gonna do is to create a curvy layer. Just click on that rectangle here, edit object and the pen tool. I'm just going to drag it down here and be careful to become with align it with our separator here and click on Done. And let's create again edit, pin tool and move it Up here, make sure to align it with our separate, or I'm gonna zoom in just to see our curvy layer here, zoom out. Now what we need here is to split each side. So how we can do that, we are going to create another rectangle here. So I'm going to create a rectangle. This rectangle, I'm going to align it here. For the size for this rectangle is going to be 207. And for Hyatt 260, I'm going to change the color just to able to see each rectangle here we have, and now we need to align it with our first rectangle here, as you can see, and make sure to align it very well. Now, what we are going to do is I'm gonna hide our separator here on now to create each side. As you can see here, don't forget to align each rectangle with each other. So it's very important to get the right size for each size. So I'm gonna click on rectangle two. I'm gonna click on the bottom rectangle here and go to Apollyon group and subtract each section. And now we have these. I'm gonna go to duplicate this layer and Rotate it in 180. Now we have the other side for our gallery here. Now we have each curvy size here. So I'm just gonna click on each one and flutter year. Now I have our fairest layout here, our gallery, and we need now to create another one. So I'm gonna repeat the same steps here. What I'm gonna do here is create a rectangle here on for week 3934, hide 260 on. We need now to duplicate our separator. I'm gonna move this up here. Now we have a separator, just duplicate another one and move it up to this rectangle here. I'm going to move it down here, just want to make it 100 to be able to see. Let me zoom in on what we are going to do is I'm gonna make a rotation 180 and also duplicate this separator. And I'm just gonna move one of these separate or up here and drag our, align it with our rectangle here, and move this one and move it down here and also align it. Now we have our separator. I'm just gonna click on the rectangle edit object and the pin tool and create our curve here and the same part going to down here. Now I'm going to hide our separator. And what we are going to do is create our split side, create this, go to create our rectangle here. Just create another rectangle. Change the color just we will to see on the rectangle width to 07 and height 260, and we need to align. It makes sure that first rectangle is the same width and height. Now we have our each side a line it click on the rectangle one layer and duplicate this layer. I'm going to drag this up here, click on each rectangle here, go to Boolean group on subtract section. Now we have our fairest board. Now we need to create our second sites. Now let's query the other side part. So what I'm gonna do is create another rectangle here, weeds to 07260, gonna change the color. Make sure to align it with rectangle very well. Now click on Pauline group, subtract, and now we have the other part here. So let's grab the other side here and start to create another layout. Now I'm gonna grab this one here. And so, and flatter each section here created this layer here, and I'm going to drag it down here. Now we have our third section, drab this one, drag it up here, and this one also align each item here we have now we have our medial part with which is our gallery. So what we are going to do is click here and we need to bring our Unsplash plugin to drag here some images. Now, our plugin is here and search or type here in the search bar about portray. Or I'm gonna just click here our portray. I'm gonna just click on each side and bring some beautiful images. Now we have our images here. We need to create our group layer for all this part and group ID and name it as Gallery. And so now we have our category, our gallery. Now we need To start create bottom part here, I'm just going to remove our indicator up here. Now we need to create here our last part. So what we are going to do is create on the rectangle, and I'm gonna create another rectangle down here. And this rectangle's size for weeds is going to be 393.4, height 111, and align it here, align it bottom as so. And now we need to create linear for the color on the top is going to be 79715, and this one is going to be the color on the bottom here, 020, 51f, and click on the opacity here, 100. Now I'm going to drag this up a little bit here in the middle. So now I need to create a curvy side here. So just go to the category layer here and duplicate our separator. And I'm gonna use this one, drag it up here. And just to be able to see the color here we have, we need to align it with our frame here and just gonna click on our rectangle, its object and the pin tool and just drag it down. So now we have our curvy part. Now we need here to buttons here. So I'm just gonna zoom in a saw and I need here to buttons. So just going to need Camera and the other bottom here, I'm gonna this one bottom here and grab the other bottom here. So we need now, now we have our icon here, the exit icon. I'm going to need this picket sure, icon here. So what I'm gonna do is just drag it here for our bottom here. I'm gonna click on each side or each icon here. And the spacing between each icon here is 185. And also I need to create here as stroke up here in this area. So what I'm gonna do is click on the rectangle, go to stroke here, and the color going to be white. But we need to create our linear here. And I'm gonna just drag it as vertical and create another two here. And we are going to play with our velocity. The first one going to be 01100, also this 1,100.0 for the last one, I'm just grab it a little bit here. And so now click on this, make it Overlay. Now we need here to create our circle for our camera. So I'm gonna grab the Ellipse Tool here and create a circle. The circle size is 74 to 74 for width and height. And I'm gonna zoom out and go to our first button here. I'm just going to copy the property here and move here, zoom in and paste it here. Now we have our property. I'm going to remove this truck here. And now let's create some effect here. So first I'm going to duplicate this layer and I'm gonna to go to add effects and they are plur, and make it a. Now I need to create our smaller circle here, a whole for our camera. So go to ellipse tool and create a circle. And the size of this circle is going to be 54.54. I'm gonna align it with our circle here. Now, let's tie our circle here now to style our icon here, just go to Fill and select Linear for the color on the top is going to be 080d to a. And for the bottom one, the color is going to be 454377 and the opacity is going to be here, 100 as so. And now add an effect here and they affect the year is going to be inner shadow and change it here to negative two and also here negative two. And folklore here is for and make here the color is white. Now I'm going to create a stroke here also. So I'm going to add For the first circle is going to be 0.5 and the color is going to be white. Now, let's add our camera inside here. So zoom out and just drag this down to be able to see and our icon here, make sure to align it. And now I'm going to hide our home indicator. I don't need it. I'm going to group all here and name the layer as space icon. I'm just going to zoom out in the middle here and just gonna take our icon here with our face icon and grew with our base layer as so. And now we have our home indicator here. Let me drag this out and also this one. Now we have our second screen as so. In the next section is going to be our others is Screen 5. Photo Modes Screens : In this section, we are going to create those Screens. The first Screen is going to be photo Modes, and the second one, portrait mode, as you can see here, I have our previous design here they are onboarding Screen and the home screen just going to hide it for just a little bit and click on F. And I'm gonna choose our iPhone 14 row here and create a corner radius 50. And for the color is 0205 on five. I'm just gonna change the frame name to photo mode Screen. And now we are going to need a status bar here and home indicator down here. We are going to create a top navigation here. So I'm just gonna go to Assets here and click on status bar and the home indicator and bring it inside my page here. I'm going to drag it outside my frame. I'm just gonna zoom in and just select each of these icon here and bring it inside our frame here and align it. We need to align center here. Now I'm just going to drag these home indicator down here. Now I need to create a frame. Just going to get rid of this. Go to Assets, the FX icon here. So bring it inside my beach and click on F and draw our frame here. And for the width is going to be 393.4 high, 44. I'm just gonna align center and move it here, line it and the space between the status bar and the top navigation is zero. Now I'm going to need this flush icon. So I'm going to just bring it inside here and Chevron down in the middle and the live photo here. And the space between each icon, the frame is to Winnie that meet shake or the other one. Now we are going to align this one. Now we are going to create our middle layout here. So I'm just going to click on our draw, our rectangle here. And the rectangle's size 3934 widths. And for height 531, just gonna align it inside upside year. And the space between the our rectangle and our top navigation is 16. And now we need our image inside these rectangles. So I'm just gonna go to Assets. Are you gonna need Unsplash any image you want. You can download any image and bring it inside this rectangle. I'm gonna choose this image and drag it here. For our rectangle, I'm just going to show this image, the space, our rectangle here and align it. And I'm going to group the rectangle and the image here and name it as photo. And I'm going to need here ram the rectangle, right-click, use as mask. Now we need to create a controller here for zoom in. So just gonna create another rectangle here. And the rectangle's size 393.4 high 200. And the color is going to be the same color of our theme, this color and align it. Now I'm going to draw our circle here as a controller. So click on all and create our circle. The circle size width four to six, and for height the same four to six. We need to align this circle here, grab it down little bit. I'm going to name it as base one year, and I'm going to drag it below our rectangle here as so. And now I need to change the color. So I'm gonna go to Assets and bring my color palette here, drag it outside my frame. The circle color is going to be, I need the draw bar here, this column, and click on overlay. And just gonna drag this down and down the rectangle here. Now we need to create a stroke, and the stroke is going to be black, opacity 3030. And we are going to create an effect. Back ground floor degree is 40. I'm just going to need to drag this up a little bit here. Now, let's create another circle here. So I'm just going to duplicate this layer and name it as space to, and I'm gonna copy that fill color here, copy it and the needs of L and paste it in the stroke area here. And diversity is 100 and the opacity size is going to be one, 6 s T. I'm going to zoom in and I'm gonna remove the effect here. Go to advance a stroke Click on dashes here. The first one, the dash size is going to be to the gap is to Winnie. The, I'm gonna change the circle size to four to zero, or widths on for who? Zero for height and click on construct proportions here. Now we need to create another circle. So I'm just going to duplicate the base two and name it as pays three. I'm gonna change a stroke color to white and the stroke size is six, and the dashes is going to be one and the Gab one. Now we need here to click on base 3.2. I'm gonna zoom out, move it down a little bit here. And so, and now we need to create an arrow here. So we need to the polygon tool here and create a polygon here. And the size is 6.4 weeds 3514 corner radius and make a rotation one at the color for this polygon going to be this color. I'm gonna zoom in again. And now I'm going to take this polygon and click on the layer. Click on flutter. And you're gonna notice that the size, width, and height is changing. So I'm gonna write it again, 6.4, the height is at, and I'm going to name the layer as R0. And here we need the timing tool to write some degrees. I'm gonna click on T. I'm just going to tie one. The size is gonna be 1302 widths and heights and bold and the color, the same color of our arrow here shows gonna take these one and I'm going to copy, duplicate this to another one. And I'm going to tie be here to six and M. So we need here our case. So I'm going to hold it down here. I'm just gonna select these item on auto layout with the space is zero between each number here and name it as degree one. I'm just going to move it down to the arrow here and just going to duplicate this to another one. But here I'm going to tie it three, and here you're going to be 77, but the color and the style is going to be regular. So moving here to regular and the color the same color, this layer here, and also for this one and the color the same name, the layer degree to move it little bit down here. I'm gonna duplicate this one also and move here and name it as five-year 0.513 and name it Xolair degree three. And now we need to rotate each degree we have here. So I'm just going to rotate this one. I'm gonna rotate it. So this one is going to be 30, the rotation for the other one here, negative 48. And so the space between the degree and the arrow is going to be four. I'm going to drag it here and just going to bring these little bits here and this one also here. And now we need to remove these high. We need to hide this part. So I'm gonna group Zara pays we have here. So I'm just gonna grab all the P's we have in a group here, click on each one and group it as, name it as controller. And I'm just going to grab the Rectangle tool and draw a rectangle here. And this rectangle is going to be inside our controller here. And we need to edit object on high just a little bit here, Rome our image as so. Now we need to move the rectangle behind the base and BaseOne, just going to right-click use as mosque. And now this sport is hidden and I'm gonna group the arrow and the degree here. And now I'm going to group each icon we have here and groove it as a Zoom controller. And I'm going to group these and with the controller down in one group. Now let's query the bottom part here. So I'm just going to grab the click on T here, and I'm going to tie up here, time, time lapse. And the font style is gonna be noto sense ON going to be bold and upper case. And the font size, It's going to be 30, or the width and height, and the color is going to be the same color of this. So I'm just going to grab the drop here. And now I need six tab from this one. I'm just gonna copy takes tab here. Now I'm gonna change the name for each tab. Now select all the top we have here, auto-layout and the space here is going to be 24 I saw, and I'm gonna bring align it here and the space between the tab bar. Our top controller here is supposed to be to Winnie. I'm just gonna grab it A space here is 20. I'm just going to move here to the photo and align it with degree here and the arrow align it again. And I need the whole to here. And I'm gonna change the photo to hold. The color is going to be the same color of the arrow here as a selected item here. And now I'm going to change the name of the frame and name it as Category tab. Now we need to create down here some icon here, an icon for the switch icon here. So I'm gonna zoom out As so. I need to bring icon here, this one, I'm just gonna drag it down here and now let's tie it our icon. The icon size is 44 for 44, and we have a corner radius here. So I'm going to add a fill here. On. The fill is gonna be linear here, and the color on the top is going to be 7971, B5, and the color on the bottom is going to be 020043. So I'm going to just move it a little bit here. And now I'm going to create a stroke here. And the stroke size is going to be 0.5. The stroke, I'm going to create a linear, the App color gonna be white on the down color and a be black. And to take on overlay here. And also we need to create effect year. And I have inner shadow effect on it's gonna be zero to two, white color white and the opacity going to be 20. And now I'm going to change the circle color and take that drove the same color here. Now we have our circle. I need to create a shutter button here. So just gonna click on all, create a circle here. And this circle size is going to be 64 weeds and the same for height. And I'm going to copy the property here for this one, here, and so on. Now, I'm gonna name this ellipse tool as circle one, and we need to duplicate this layer and name it as circle to the size for circle tool is gonna be 74, 70, and I'm going to align each circle. So make sure to align it. And I'm going to take this one and line it the same. Now we have to circle here. Now I'm going to remove the fill for the bigger circle here. I'm going to remove the fill and I'm going to create a stroke here. So the color is going to be solid color here, and the same color of this one. And the stroke size is gonna be three here. And go to Advanced stroke. Click on dashes and the dash year 541504, Gab one. And I'm going to shake here was strokes, we need normal and so on. Now I'm going to create an effect and it's gonna be inner shadow. So I'm going to create another inner shadow here on the style here is going to be 00.5 and the other one the same, 0.56 and the color 100. And we are going to duplicate this circle to the bigger circle. So I'm gonna duplicate this one and name it as circle three. And I'm going to add an effect here. And the effect, It's going to be liar floor. I'm going to be eight and we are going to change the stroke color here, 234898. Now we need to group all the circle year we have a name it as Shutter button and the space between let me align year, our circle and the space between the shutter button here on the home indicator is supposed to be zero. So I'm gonna bring it down here. And so I'm gonna do this same. And now we have our first frame ready for its to screen for the Camera mode here. Now we need to create another brain. So I'm just gonna move these down here and I'm going to zoom out here. And here we need to create another frame. So I'm just gonna duplicate this frame we have here, and I'm going to name it as portray mode. And now we need to remove the degree here. We have only needs a circle land. So just gonna go to the controller here and remove all that. I'm going to remove this one and remove also I am just needs a circle. I don't need anything else, so I'm just gonna remove, hide all that we have and now we need portray mode here. So I have in my assets here, you can create our portray mood as you want. I'm just gonna grab it here and do it as so. Now we need to change down here the photo to align with portray Modes. So I'm just going to change the photo color here. And we need to move this one. So click on the frame and align this with portray as so. And I'm going to change color here with the same color, just going to zoom out. And now we have our two Screen here. First is Screen, we have Camera photo camera mode, and the second is green, is our portray mode. In the next section, we are going to create the crop and Rotate Screens 6. Crop & Rotate Screens: In this section we're going to create to Screen. Screen is going to be Rob and Rotate Screen. And the second one's uprightness screen, as you can see here, I have our previous design here. I have the onboarding Screen, the home screen, and for Editing, I have photo Screen, portray Screen, and we still need more Screen. So in this section we are going to create a crop and Rotate and also the brightness is Screen. So to start create our screen, I'm just gonna duplicate this frame as so. I'm just gonna hide these previous screen for a moment. I'm just going to remove everything inside the room except the status bar on top nav and the home indicator. So I'm just gonna remove everything inside the frame here. And also I'm going to change the frame name to crop and Rotate. I'm just going to zoom in. Here. We need to replace this icon. So I'm just gonna go to the assets page here and grab our icon pasted here. I'm just going to drag it outside my frame here. So I'm just going to remove this icon life photo, and I need to grab two icon here. The first one is pencil icon, and the second one more icon. And the space between each icon is zero. And also the space between the frame and the icon is the windy. So I'm just going to select each one. We need to 20 space. I'm just going to move, remove this icon here and grabs a left arrow here as so, the space between the icon and the frame is 24 this down chevron here. I'm just going to replace it with a title. So I'm just going to grab our typing tool and I'm going to type here crop and Rotate, suggest Ghana. Time here crop and Rotate. And just going to move it here, we need to align it. The font size year is 20, and make sure the font is a font type is Noto Sans Bold, align left, and all the width and height. So I'm just gonna grab it as so and align it. Now we have our layer for Top Nav, just going to name the layer Top Nav. Now we need to create the middle layout here. So I'm just gonna click on F and create a frame here. The frame size 3934, wheat for height is 504. And I need to align it in the space between the frame on top nav is 60. I'm just gonna slide it as so. Inside this frame we are going need photo so you can grab any photo you have from Unsplash. I'm just going to use these photo now. I need to grab it inside the frame here. So I'm just gonna put it inside the frame. I'm just going to select the image here and click on Control E as so. Don't forget, you click on Clip content or click on Control a. And now we have our image here, inside our rectangle here, our frame. So I'm just going to name the frame layer as image. And I'm gonna duplicate this layer and I'm gonna hide a second image. I'm going to name it Image Tool. I'm gonna hide it for a moment here. Let me zoom in. And I'm gonna draw here a rectangle. So I'm just going to grab the Rectangle tool. The rectangle size is 62634 widths and 260 for high 2604 or weeds and two-six zero for height, align it as so. I'm gonna name this rectangle as Bayes mask one. And I'm gonna duplicate this rectangle and name it as base mask tool, just going to grab the photo up here and the base Mosque one up here. And this layer is going to be below here. And I'm just gonna with all our image and rectangle here inside another frame here. And I'm gonna name this frame as crop. And the main image T2 is going to be also crop. And I'm just gonna right-click on this USBs mosque. And I'm just going to use as a mosque here. I'm just going to, as you can see, our photo is here and I'm just gonna click on the crop layer here. And I'm going to add a fill here. And the fill is going to be linear. And the color is going to be the same color of our seam here And I'm going to add another color in the middle here, but this one is going to be opacity zero. And for this one, velocity going to be 20, the middle one over city 20. Now we have our forest crop here. So now we need to create a line here. So I'm just gonna click on L or the align tool. I'm just gonna draw a line here. The line width is going to be 263. So we need to make sure the rotation is 90 and the stroke color is white. And the opacity certainty. And you're gonna create another dashes here. So I'm just gonna go to advance a stroke dashes here. And we need here to create 64 dashes as so. Now I'm going to duplicate this line four times. So I'm just gonna pick on this line and replicate it on other three As so. I'm going to group all line in a frame and the space between each line is 87 and you need to align it. And I'm gonna duplicate this frame. We need to make a rotation negative mine, and we need to align it. And now we need to ungroup these lines. So I'm just going to ungroup it here. Ungroup it here. And I'm just gonna select all the line here we have click on onion selection here. And also we need to create a flattering selection. So now mosque tool, we need to create a struct here. So in this space mosque tool, I'm going to delete the fill. What? I'm going to create a stroke. Why I saw the stroke size is three and it's outside as so now we finish from creating our crop layer here. Now we need to create the bottom side here. So first, I'm gonna grab the Rectangle Tool and I'm going to create a rectangle here. I'm just gonna draw a rectangle here. Let me grab it outside this frame as so the rectangle's size is 393.4, height 258, and we need to align it. And it says same color of our fill here. And here we need to create a curvy. So you remember how we can create these curvy layer in our previous design here, we have these curvy here. So I'm just gonna grab one of these separator we have here As so I'm just going to copy one of these and I need to grab it outside this frame. Just going to use it here, just going to zoom in. I'm gonna grab the frame outside here and grab also our separator. So I'm just gonna move these separate or inside the frame year, make sure that layer is the same. Rectangle is below the separator. Align it. I'm just going to zoom in as so. Now click on Zara tangle did object that when Tool, I'm just gonna grab this rectangle down here. I saw John just going to zoom out and I'm going to grab this rectangle inside the frame here, align it and we are gonna need separate or liter. So make sure you have it now. Now we need to create a controller here for our photo. So I'm just going to zoom out as so and need to draw our peak circle here. So click on here and we need to create a now I'm going to draw a big circle. So I'm just gonna grab this icon here on the circle size for weeds, 10694 hide the same 1069 and we need to align it. I'm just going to move it up here, this As so. I'm just going to remove this field and create a stroke here. So the stroke is going to be color a 0a9fc and the stroke size is going to be ten. And click on advanced stroke here, and click on dashes. And the dashes here is going to be 146. I'm just gonna zoom. I saw and slided little bit up. And now we are going to name this ellipse to a stroke, stroke one. We need to do it inside, replace it inside our frame here. Don't forget that. Now, I'm gonna replicate This layer here, I'm just going to duplicate it. A name stroke to, and we are going to change the stroke color to 08 e5e be the stroke is going to be here. So stroke size is to click on van sitting here and change it to two dashes and 200 gap. Now let me zoom in, just see the stroke we have here. So the stroke size here is not, it's 20. So now we have our stroke here, and now I'm just gonna zoom out. So I'm gonna go to the stroke, our stroke here, a second stroke and click on the color, make it linear. So I'm just going to zoom out with, I'm just gonna grabs and enter here. Just to be able, the color is to be obvious more. Some just going to replace it to vertical here. So I need the color. Most of the color is here. For this one is here. Now we need to align each is truck here. We are going to name it as controller here. So grab it in a frame here and name it controller. I'm just going to group it here, each layer and name it as controller as so. Now I'm gonna zoom out here and we have here our layer of controllers. So I'm just going to slide down as so. Let me zoom in. And now we need to create another degree here, which I'm gonna click and create a zero here. So just gonna grab the Type Tool and make sure the font size is 13 year. I'm just going to type here. 00 is going to be the same color of our circle here, our dashes here. So make sure is the zero size is one, and it's bold. It's left here, and the color is the same color here of our stroke here. This one, this color here. So, and now I'm just gonna grab it outside our layer here for the moment. We need to create another circle here, small circle. So click on all and draw a circle here. The circle color. Remove the circle, fill here and click on stroke on it. The same color here for our zero and gravity here on the space between the zero and the circle is zero. So, and now we need to create a. Now I'm just going to move this zero on cycle here as group each icon here and name it as degree. So make sure to align each icon here and now are just going to need to have a curvy menu here. So I guess our previous design here, you already know how to create this curvy category. So I'm just gonna wrap mine here inside my assets to not repeat the same tips here. So I have here category. I'm just gonna grab it to my frame here and just going to move it online it, and the space between each going to be 60. And I'm going to remove the fill here and click on this separator we have here and add it down below the category here as so now we are going to need to create our Darwin tabs here. So here for our tabs, we are going need to ICANN, we are going need the action icon here for Don and for delete. I'm just gonna grab these are done. Icon, this one for delete icon and check each icon here we have as so. I'm just going to need to tie be here, crop and Rotate, grab the typing tool and type here crop. And it's going to be 150 for 15 for the font size. I'm bald and Noto Sans for our phone type. And then click on the crop here, shift a, four, our layer here. Now we click on Shift E for all to lay our onclick on, fix it height and it's going to be 44. So, and the color of crop is going to be the same color of our zero here. And just gonna drag it here. And I'm gonna duplicate this crop year and I'm going to name it as Rotate. The color here is going to be not the same. So it's going to be irregular for the own style here. And also the color is going to be the same color of our icon here. I'm just gonna grab each one and just going to click on each icon we have here and make sure to align it as so, and click also on the icon here. Now, we already finished from this frame here. I'm just gonna look in case anything is not. Well, it's not, it's gonna be wrong. Everything's right. So for the brightness frame here, just gonna duplicate this frame has so, and now I'm just gonna name it as brightness screen here. I'm just gonna move this title to replace it as rightness and align it. And also we are going to remove this zooming crop here. So we have here our Layer Brightness. Click on this layer here crop and remove it as so. Now we are going need to also change the category here. I remove it and we are going need another assets here. So I'm just gonna grab this every here. So I'm just going to zoom in and grab this category and brightness here inside this frame and remove the fill as so aligning. Here, we are going remove this Rotate and crop and we are going to replace it with another icon. So you are going need here, another three icons, just going to need Filter icon here. So I'm gonna grab it and also the uprightness icon and Rotate icon. So we need uprightness icon here. The Rotate icon here, select all these icon and the space between each icon is zero and align. So I'm just gonna click on this spiritual here we have an movie Little down here. And now we have already hour, now we have already our brightness Screen and also we have, let me zoom out to be able to see each Screen. And now we have each Screen already design it. We have the crop and Rotate Screen ends up brightnesses Screen. And for the next section we are going to create our last two Screen 7. Edit & Filter Screens: In this section, we're going to create a screen. The first is Screen is going to be Filter Screens. And the second one, edit screen, as you can see here, I have all our previous design. I have the onboarding Screen and home screen. And for Editing, we have photo and poultry, and we have crop and brightness. We still need more to Screen to finish our app here. So we are going to need to create the Filter and then the edit screen. So to store create our first screen, I'm just going to duplicate this brightness screen here. And I'm gonna change frame name to Filter Screen. So now we are going to eliminate some Design here. So I'm just going to remove this category tab and separated. We have controller here, we don't need it. And also the degree on this frame. We need to change the brightness here title to falter Screen. So I'm just gonna replace it to a filters Screen and we need to align it. So now we need also to replace this image. So any image you have, just replace it. I'm just gonna replace it with this one here. I have an also I'm gonna change the height of this image to for a two because we need more space down here for our Filter photo frame. Now it's ready to start design. So I'm just going to create a rectangle here. And the rectangle's size is 74. Weeds on 90 for height. Align it. Now we need to fill this rectangle here with photo. So I'm just going to right-click and choose the plugin of Unsplash here. I'm going to choose the same image. I have the up here. So I'm just gonna click on portray and choose this image I have here. Now we need to duplicate this image, but I'm going to create a corner radius for three here. Is going to duplicate this and name the layer of this first one as a monster. For the second one, just gonna drag it as so we need to change that width and height. So with 54 and height 68. And we need to change the name to image it to or image1 for the image layer. And I'm going to create a rotation for this 10%. We need to replace it below the master image and drag it 30% to the Monster image. I'm going to duplicate this first layer I have here. This one, duplicate it and name it as image two. And I'm going to add this below the image one and drag it. At present. We need to duplicate image to image is three, I'm going to name it here. Image is three and replace it below image to and drag it. Now we have all our image here. I'm just going to click on this image one layer and duplicate it. A name it image you for, for the rights side. And just gonna drag it here. But I'm going to change the rotation to negative ten and also align it with this one. And we need the space is 30, so I'm just going to drag it here. And for this image, for, duplicate it to image five. And we need it below image for and just gonna drag it. Surety were sent here. And now I'm going to duplicate this image five-year and name it images six here. And we need to drag it down image five-year. And this piece is 30, the same. Now I'm gonna click on the muster image we have here. Just going to remove the fill, but we need to add, we need to add a stroke here. So I'm just going to click on stroke, and the stroke color is going to be the same color of our Filter icon here we have Now I'm going to add an effect here. So I'm just going to click on Effect drop. Shadow on the color is 087fe. Velocity is 40 here. What? For X? Zero, for Y one and the pleura is ten. And I'm gonna click and create another drop shadow here. For this one is going to be negative 60 here is 20, color is black. Opacity is 20 here. And I'm going to create another drop shadow previous one, negative six. So this one is gonna be six only. Here is gonna be four for Y. And upload is to Winnie the same and color the same is black. But here the opacity is 50. Now I'm going to right-click and copy properties here as so. And I'm gonna click here on this image and paste property. But I'm gonna remove this color stroke here. The first drop shadow we have the color here. Only leave it in Black, Drop Shadow. Copy property of this one, and paste it to all other images here we have. Now, I'm going to create here a fill for this image. So I'm just going to click on this image and create a fill. But the fill here is going to be different color. The fill color for this image is zero, B have seven, F E for opacity is 25 is so unclick on this one. And we're going to add a fill here. But the fill here color gonna be non the same, another color. So click on F f196e for the university, 25. For this one. Also, I'm going to add a fill here, remove this color. I'm going to be 6573 ad on the same for the opacity 25 as so. Now click on this one. We are going to create another barrel vault, going to be plugged in 40. And this one also black bar, the opacity. Let me create the feel of our city is, this one is 40, the first one is 60, and this one is 20. Now we have all our Filter image. Click on All image. We have an grew with in a layer and name it filters and aligning the space between the image you Filter. And the down part here is supposed to be 60. So I'm just gonna drag it here. Who's 60? Recent as so. Now here we need to create a pattern. So I'm just going to click on T here. I'm just gonna type here. Vivid, cool. So and size is 30 and it's Paul Noto Sans for font type. And for the color is 080 pf7e. So the same color of our selected photo. Just going to drag it here for our selected photo, align it. We need to create a rectangle. So I'm just gonna click on R and create a rectangle here. What I'm gonna grab it outside this frame. So this rectangle size widths add on for height 35 and corner radius is turn here. And I'm gonna grab this rectangle here for our bottom here. And now I'm gonna to create a color for this rectangle. Just gonna go to this category icon here we have. We need to click on this icon, lips. And I'm going to copy property here, and I'm gonna go this icon based property here. Now we need to change the color of this form to white and we need to align it as so. Now I'm going to duplicate this Rectangle. Let me name the layer to bottom here. Bottom one, I'm just going to duplicate it bottom to here. I'm going to remove the fill, but I'm going to add a stroke here and the stroke is gonna be solid. And the color of this truck is zero, B, F, seven, I've E as so. It's normal here. Make sure it's normal here. We need it to the center here. Click on this, change to outside and the stroke size is one here. Now I'm going to create our inner shadow for this bottom here. So the inner shadow is gonna be, or why? 0.2 for the floor? Also 0.25 and black for the color and 25 for obesity. And I'm going to create another drop shadow here. So we have inner shadow. I'm going to create a drop shadow here. And this drop shadow is for Y one here on the color is going to be zero P of seven. Opacity, 25 plus five here. So now we have our button gonna click on this, groove it as bottom here. The space between this image. We already finished our Filter screen here. And this between the bottom here on the image is 60 and down here is 50. So for the photo, everything is nice. Alright, so I'm going to zoom out on duplicate this frame to create our edit screen and just going to change here the screen name to edit. This step is going to be more easier than that before one. So we are not gonna do a lot of work here. I'm just going to remove this title here. I don't need it, but instead I'll move it. Let me zoom in, just gonna remove this too icon here. And I'm going to take this title and name it as edit. But we need to make sure it's not bold. It's regular here. So I'm gonna replace it here as so. I'll make sure it's 20 to the frame. Now I'm going to replace this image. So I'm gonna go to Assets here. I'm going to take this photo I have here, and I'm going to copy it here. And I'm gonna replace this image here. And we need to change the size to 5517 line as so I'm just gonna remove this. I don't need it on. Also, we need to see the space between the top nav for the image. So down here we are going to create, I'm going to remove this bottom here. And here we need to create a smaller photo for the edit mode. I'm just gonna zoom in and I'm gonna click on R and create our rectangle here. Rectangle here for weeds is going to be sorority, or for height is gonna be 50 as so. We need to align it. Now we need to duplicate this rectangle here to ten others. So I'm just gonna drag five here and five for the other side. And we need here also. And another one for the ten. And now I'm going to click on all this rectangle, shift a for auto-layout it. The space is gonna be four. Make sure it's center here on line it as so. And now we have our rectangle here. I'm just going to replace inside each rectangle here with image. So just going to right-click here on this image. So let me start with the middle one. So I'm gonna right-click and click on Unsplash plugin here and we need more photo. Now, click on portray and choose any photo you like for each rectangle here. Now for this middle rectangle here, I'm going to make it more bigger. So I'm just going to change the width to 44. Height is 60. And we need to make sure that all left frame here is center here. So now we have our images here, and now I'm going to create down here another icon. So I'm going to zoom in. I'm going to zoom out here. I need our icon, so I'm gonna go to Assets here because we are going to change this icon. So I'm gonna click on this icon here, on, drag it here. Let me zoom in. Here. We need to like this one, change it with this one. I'm going to remove this and take like one here. And also I'm gonna remove this and this icon here. And I'm going to choose this more in four Here icon. And also I'm going to remove this icon. Or we're going to need this article and this one just need to align this icon here. And this one. Also, we need to align it. I'm going to click on All icon here as so. We need to change the frame here to images. If you want to create more images here. For example, you want like 5.5 here. You can do it. Do what you want. What? The same for, all the same idea. Now, king rhetorician, we finish our app here. We already now have all our screen here for our Camera app can grow iteration. We have a full App now for Camera Editing. And follow me for more courses about you are design on web design