Learn Figma For Absolute Beginners 2022 | Shehar Yar | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn Figma For Absolute Beginners 2022

teacher avatar Shehar Yar, UI/Ux Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:04

    • 2.

      Using the exercise files

      0:44

    • 3.

      What is Figma?

      1:29

    • 4.

      Signing Up For Figma

      1:20

    • 5.

      Setting Up fonts in figma

      1:49

    • 6.

      Understanding the workspace

      2:03

    • 7.

      Setting up first file in figma

      1:10

    • 8.

      Working with Frames

      1:24

    • 9.

      Working with Shapes

      4:03

    • 10.

      Working with Pen Tool

      2:57

    • 11.

      Working with masking

      3:58

    • 12.

      Working with text and fonts

      2:58

    • 13.

      Working with Components

      2:47

    • 14.

      Working with Constraints

      1:54

    • 15.

      Versioning

      2:05

    • 16.

      Understanding and Creating guidelines For iOS

      2:22

    • 17.

      App Overview

      0:28

    • 18.

      UI Splash Screen

      3:20

    • 19.

      UI Login Screen

      6:12

    • 20.

      Account Recovery Screen

      1:08

    • 21.

      Reset Screen

      1:15

    • 22.

      Sign Up Screen

      2:12

    • 23.

      Home Screen 1

      6:56

    • 24.

      Profile Screen 1

      3:51

    • 25.

      Home Screen 2

      0:52

    • 26.

      Product List Screen

      1:01

    • 27.

      Product Detail Screen

      6:00

    • 28.

      Cart Screen

      4:55

    • 29.

      Payment Screen

      3:35

    • 30.

      Place Order Screen

      4:09

    • 31.

      Search Screen

      2:45

    • 32.

      Favorite's Screen

      2:17

    • 33.

      Profile Screen 2

      3:37

    • 34.

      Edit Profile Screen

      3:10

    • 35.

      My Orders Screen

      2:56

    • 36.

      My Cards Screen

      1:30

    • 37.

      Add Card Screen

      2:11

    • 38.

      My Address Screen

      2:25

    • 39.

      Help Center Screen

      2:27

    • 40.

      Prototyping

      10:30

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

518

Students

--

Projects

About This Class

Figma is one of the most amazing and leading industry design tool used for UI/UX and prototyping for Web and Mobile Apps.

In this course, Instructor Shaher Yar will teach you how to use Figma and how to design a Nike Shopping App along with learning all the new features of Figma by demonstrating a full app design workflow. By Using the exercise file assets and colors, you will be able to set up the workspace and start by creating more than 15 Screens of the Nike Shopping App. You will be able to create an impressive user interface by applying artistic skills that will enhance the user experience of the App.

In the last, you'll learn how to prototype your app by creating connections between frames which will bring life to your app, and then you can share your prototype with your friends, developers, clients, and other stakeholders.

By the end of this course, you would be able to create efficient mobile application designs with Figma.

Meet Your Teacher

Teacher Profile Image

Shehar Yar

UI/Ux Designer

Teacher

Hello, I'm Shehar.

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello. In this course, we are going to build a real-world app with prototype in fitment with let us features and designed aesthetics. My name is Maria and I am a UI UX designer. I have more than five years of experience in the design industry. Through this course, I will guide you on how to create a Nike shopping app in FISMA with latest design principle and design aesthetics. Scores is divided into three sections, into two FISMA session, UI, UX section and Prototype section. In the intersection, we will see what is sigma and how to use its features. In the UI UX section, we will start creating and structuring, although Nike app. And at the end, we will link all the prints together. So it looks like that the overlap. And last but not the least, we will see how to share with other team members are stakeholders. I haven't got to show you. So without any further ado, let's get started. 2. Using the exercise files: In this video, I'm going to show you how you can start off with exercise files. The exercise files for this course are included with this lecture. The exercise file I uploaded contains a sigma s, It's file. It contains all the S it's used in this course. Please download this file so we can continue our journey by creating a real-world app in sigma. This exercise file does not contain a figure file. So for that, just follow along with me through this clause. So you guys know how you can create your own Fichman project. That's all for this video. See you guys in the next video. 3. What is Figma?: Sigma is a browser-based UI and UX design application and primarily web-based prototyping tool with additional off-line features enabled by desktop applications for Mac OS and Windows is currently the leading interface design tool in the industry. Here's the question. Is there are many other tools like Adobe XD, sketch, Marvel, and many other than why we are using sigma, the answer is that the other software licenses are expensive as compared to sigma. Because sigma is freely available, you can just simply go to the demo website, sign up, and now you can easily use sigma anywhere and anytime as it's a web-based application, although it's desktop version is also available, but it depends upon the choice. And also sigma is very easy to learn. And if you try, you can just learn Friedman within today's and within seven to ten days, you can master FISMA. The best thing about FDMA is suppose you are traveling to some other country and you don't have your laptop, you can easily access your files by signing in to the web portal through some other laptop and access all of your files easily. So now I think you guys have some knowledge about FDMA. See you guys in the next video, we will see how to create a sigma online account. 4. Signing Up For Figma: To sign up for fema, just go to www.sigma.com and click on Sign Up. Here. Just enter your email and password and hit create account. You can also sign up with your Google credentials. After clicking on signup, it is asking about my name and my work. Enter some data. And if you want to join the mailing list of sigma, you can check this check box for right now, I'm living it. And after that hit Create Account. Now our freed my account is created. It's time to edit team to my Fichman. I'm going to write you axles team member. A team has many members. You can easily collaborate with them. We will discuss that later. Now just hit Next. You can also do it later. Right now, there are two plans for Pittman. Choose the plan, that's SU two. But if you are a beginner, I suggest you choose the startup plan. And now a fema account is setup successfully. That's all for this video. See you guys in the next video where we're going to understand the FISMA workspace. 5. Setting Up fonts in figma: In this video, we are going to enable local phones in our freak MOM. Otherwise, if you want to work with fonts, you won't have a large selection. And also, if you import things like sketch files, that text may not work. It may not look right in sigma. When you are on sigma.com, on the web site, you're already logged in. Come to the upper left corner here with a menu is, and come to account settings. Here you're gonna see a lot of things we can do, including things like working with the API, which you can expand. Fisma, do all kinds of things, connected apps, et cetera. Down here, you're going to see that we have local courts are currently not enabled by default. Click on Download installer to enable a local forms. There's gonna download this depending upon your operating system, which cannot download a small file. And what you're gonna do is you're going to essentially open that up and install it. I can see that I have got the package right there. I'm just going to click on that. You have to click continue, go and install that. Make sure it's installing. I don't need the installer anymore. And you'll see now that local fonts are enabled. I have this many force available in Pima. Otherwise, you will be working with fewer phones. There's something I want to make sure that we did before we jumped in here. Now you can come back to recents and see all the files. The next step is we're going to understand the FISMA workspace. So see you guys in the next video. 6. Understanding the workspace: Welcome back. In this video, we are going to understand the workspace or Fichman. This is our homepage. By default, pigment gives us three projects. You can keep it are deleted. It's totally based upon your choice. Next here on the top right, we have two options. This import option is used to import different fema projects directly to fit ma. You can also import your sketch files by clicking this import item. And on the right we have a plus. I can just click this icon to create a new file. Here, on the top left, we have a toolbar. It contains tools like Rectangle, Ellipse, Pen tool. You can draw different shapes by using these tools. Underneath it is the layered tab. Here you can see all of your layers. That next step is the asset step. Hey, you can store all of your assets that you are using throughout the project. And later on, shade with your team members. In the center, we have our canvas where we can create and work with our outputs. Remember, our airports are now called frames in Fichman. So in the upcoming lessons, whenever I say frame, it means I am talking about art quotes after that. But the right side, we have a Properties panel. You can change the properties of different elements. Currently, it's not showing anything. But when I draw on the canvas, you see all the properties are now visible. We will discuss all of these in the upcoming videos. Next on the top right, we have a Share button to share this project with other team members, part with clients. We have also a play button to preview or a design and a zoom button to zoom in or zoom out of the frame. And this brings us to the end of this video. See you guys in the next video. We're going to see how to set up our first file in FISMA. 7. Setting up first file in figma: Welcome back. In this video, we're going to set up our first file in pragma to setup a file. Firstly, did a new file. And here in the center top rename the first project to your team project. After that, rename this entitle file to Nike app by clicking on it. Sigma projects are created in frames. So to create a frame, just press the f key from your keyboard, or click here at the top left. After that, here on the right side, we have a lot of options for frames. We can create different apps for phones, tablets, web, and social media posts as well. But for this course, we are going to work with iOS apps. So we need to choose iPhone 11 pro max frame suggests click on it. And now a frame is created and test how you set up a file in Fichman. I see you in the next video. We're going to see how to work with pages. 8. Working with Frames: Welcome back. In this video, we are going to see how to work with frames are pages. Basically, frames are screens for your app or website. You can add as many frames as you need it in a project. So just past the F key. And here are a lot of options for your friends. Suggest that iPhone 11 pro max frame at another frame. And now if we see in our Layers panel, the layers of the frames are stacked. If we hover over those layers, we see we have two options. We can locked up in him or height the frame. By locking the frame means you can not move it. Now to rename a frame, just double-click on the layers and rename it to whatever you want. By naming the frame, it's easy for us to find the specific output. Now, if I click on the frame, we will see all the properties of that frame. Starting from the top, we have alignment options. Then we have x and y coordinates option. Here are rotation and corner radius options. Then we have layout grid, fill, and effect options as well. We will discover all of these options as we move forward in this course. See you guys in the next video. We're going to work with different shapes in sigma. 9. Working with Shapes: Welcome back. In this video, we are going to see how to work with different shapes provided in sigma. You can use shapes to make different elements of a design. So firstly, draw rectangle over this first frame. You can change the border radius of this rectangle by adding a value in the corner radius tab. You can also change the corner of independent sites by clicking here and entering some value here. Let's undo this by pressing control C. And now from the Properties window, you can change its color here and a lot of color options. In this dropdown, you can add linear color, gradient color, angular colors. But for now, let's stick to solid colors. Here you can add a hex color by copying Xcode. Or if you want to work with RGB color, you can choose that as well by clicking here. This a 100% is the opacity of color. If I change this, you can see that opacity of our rectangle changes as well. And here at the bottom, we have our local colors that we have used in this file. Now, if we close this, we can add more filled to this rectangle by clicking on this plus icon. After that, let's move to stroke. Here you can add stroke to the rectangle. You can increase the size of the stroke and also change its orientation to inside, outside or center. If we click on these three dots, you can change caps, chain the shrine in the border, or add dashes to that border as well. Not just lit the stroke by clicking on this icon. After that, let's work with ellipses. So for that, just draw an ellipses here. And if you don't press the Shift key, you can not draw a perfect circle. So press the Shift key or vesta art and shift keyed together to maintain that proportion of that lips. Now, if we select this ellipse, you see this white circle. You can move it towards the left to draw charts and grab this center point and move it down to draw a perfect shape. Per charts. After that, draw a polygon. And, and here in this polygon, you can change the corner radius of this polygon by grabbing it from the top and moving it towards the center. And if you want to increase or decrease its corners, you can just grab it from this right corner and move it towards the top to change its corner. You can also do that by adding a value here in the properties panel. Next is the star. So just choose and draw a star on this frame. Now there are three white circles on the star. If you hold over these circles, you will get to know first their purpose. The first one is the corner radius. Second one is the ratio. And the third one is for increasing the count in the star. Let's fill this with some color. And it looks nice. And test how you can play with shapes and taught different things for your design. In the next video, we will see how the pen tool is used in Fichman. So see you in the next video. 10. Working with Pen Tool: Welcome back. In this video, we are going to see how to work with the pen tool. The pen tool is the most important tool in graphics. By using the pen tool, we can design graphics, make shapes and icons, and many other things as well. So firstly, just like this pen tool on the top are passed up peaky from your keyboard. And here you see we have a pen like sine. It's moving freely. But if you press the Shift key, it will move in proportion. Now when we click it, it creates a path. Then another click it again. Great support. And when we click at the starting point, press enter, it will close apart and the ship is creating. Now by clicking on this film, you can add a fill color to this shape. Or you can increase or decrease the border by clicking here. Let's make our enum design by clicking with the pen tool. And here you see, you can draw even complex shapes with a pen tool. Now, these are flagships less land, how you can draw curves with the pen tool from onwards. Please watch the video carefully because this is the most important tool, not only sigma, but also in Photoshop. Illustrator, XD as well. It's a little difficult tool, unit practice to master this tool. So let's start curves by tranquil or Nike logo. So firstly, select the Pen tool and here, just click again, click it underneath it, and don't release the mouse. Left-click and move your mouse towards the right to give it a curve. And now it's curving the part. But from here we need a straight path. So come back and click on this circle to pick the curve path. And from here, click here and close apart without releasing the mouse button. And move your mouse upwards to draw an perfect Nike swish. Remember, if you accidentally creates a wrong path, don't panic. You can still at just the path by clicking on these white circles and getting the handles and move them, you want them to be. It's very simple and easy. And after you get the shape, press enter to change it to a proper shape from a path. And now you can play with it at a color removers. Porter gave its a shadow as well. So now you guys have some knowledge about the Pen tool. Please practice this tool as much as you can because it will help you in designing your complex designs. That's all for this video. See you in the next video. We're going to see what is masking and how we use it in our design. 11. Working with masking: Welcome back. In this video, we are going to see how to work with masking. Fisma allows us to import a bunch of images types in your design project. We can import PNGs, JPEGs, SVG, gives, and many others. In this video, we are going to see how to import images from your PC to FISMA and how to mask images with chips. So firstly, to place an image on this second frame, come up here. And from here, choose place image under this rectangle dropdown. You can also press the hotkey control Shift and k. And now a pop-up will come. Choose your desired image. I'm gonna choose this one image. And now you see a cursor is changed into a plus icon. So just click where you want your image to be placed. Now our image is placed. Let's resize that image. To resize this image, just press the ALT and Shift key to whether from your keyboard and move it towards the center to scale it down. Now place it properly. Here. Look at the right side. When we import an image, we can change its blending mode as well as we did in Photoshop. And sigma. Image is just a fin. You can delete it by removing its spill. You can add different effects to this image, like stroke shadows. And if you want to change that image properties, just click on the image. And from here, you can adjust the exposure contrast and you can change its fit in properties as well. And now we are going to add some images. But before that, let's click this layout grid and add two columns, could it, and change its margin to 16. Now, we are going to place some rectangles here and then place images to that rectangles. So firstly, draw three to four rectangles here. By grabbing the Rectangle tool. Align them properly. Now we're going to add four images to these rectangles. So collector, place, image tool or press control shift key from your keyboard. And from here, select for images. And now you can just click, click, click, and click into these rectangles to place the images automatically. And now that images are placed, but they're oversized to shrink them down. That's the ALT key and double-click on the image. Now, grab it from the corners, shrink it down to place it properly. And now let's add an ellipse here. And after that, place an image here by pressing the up place image tool. And now this image is placed in front of this ellipse. It's time to put this image into this ellipse. So just click on this mass button at the centre top. And now I will show is placed inside that lips. So that's how you mask images into the shell. And if you want to remove this mask, just press the mouse button one more time to remove this mask. And this brings us to the end of this video. See you guys in the next video, we're going to work with the text and fonts. 12. Working with text and fonts: Welcome back. In this video, we are going to see how to work with text and fonts into sigma, you can use all the Google fonts. But firstly, you should enable local fonts in sigma. To enable local fonts in FDMA go to help an account. And from there, choose account and setting. And now scroll down. And here, enable local forms. After you enable the local phones, you will have access to four plus fonts, which are by default available in Fichman. So it's time to play with text. Firstly, grab a text tool and write some text here. Say hello word, how're you? And now on the right, you have all the text properties. From here, you can change the font to different phones provided do I pick my underneath it, you can change the font weight and font size. If you click on this font box, press the Shift key and up arrow on your keyboard. You can increase the size of the font with an intimate of ten. And if you don't press the Shift key, the font will increase with an increment of one. After that will have line-height and Character Spacing. Next, we have paragraph spacing and different alignment options we will see as we move forward in this course. And here you see these three dots. If you click it, you have many other text editing options. We will explore this when we create our nike app in the upcoming videos, The most important tip I'm going to give you a relative test is that let's suppose we have three texts layers here. When I click on this left text, you see it is aligned right. So change it into aligned left. Similarly, chain the center text alignment to center and right next to right line. So that tests look nice when ever you put it on a button that is either placed in the center, right, or left. The last thing I'm going to tell you is about Layers panel lives at the most important part of every design. So here in the layers panel, always organize your layers. So you can easily find your layers when ever you need them. Suppose if you select two or more than two layers and press control G, You can group these layers and rename them whatever you want. Let's say button group. And remember, layers are an important part of working with web and app designs as it's keep your content balkanized. And it makes it easier to final layers and who work, and that's how you work with text and fonts in FISMA. See you in the next video. We're gonna work with components. 13. Working with Components: Welcome back. In this video, we are going to see what our components and how to work with components. The elements that are usable in the design system are called components. In most programs, it's also called symbols. But in FISMA, these reusable elements are called components. So in this video, we will explore how to create an edit components. Firstly, let's make a status bar at the top and a button at the bottom of our second frame. After that, select these top Status Bar, and from here, click on this Create Component. You can also press the hotkey control alt and K. And now you see it's our master or parent component. Remember, there are two types of components. Master, our parent and a child component. Currently we have master component to create its child component, copy and pasted onto the third frame. And here you see this empty component, meaning that it's a child component upward first Status Bar. Now the best thing here is that if I change the properties of the master component, let's say color to red. This change will also reflect on its child. Whereas if I change the color of the child, it will not affect its parent. And if you have a large number of children components and you want to know about its parent component. For that, just right-click on that child and from here, just select, go to the main component. So this will directly move you to the parent of that child. It's as simple as that. And if you want that the changes in the parent will not reflect in its child, you can detach the instance, which means this will not update if we update the master instance. So to do that, just right-click on the child instance and detach instance. And now all the mater component changes will not reflect on the child. Distance. Components in sigma can be really powerful just because they allow you to reuse content. So I will suggest that if you have things that you are going to reuse again and again, create components from them. The next thing we will take a look at is we will look at something called constraints. So see you guys in the next video. 14. Working with Constraints: Welcome back. In this video, we are going to see how to work with constraints at 1000 of devices in the market. Each device has its own resolution. Designing for all these screens would be a hectic task. Instead, we want our design to be flexible and responsive so they can adapt to new screens. Let's test it out. First of all, add an ellipse of 200 by 200 and place it in the center. Now here in the properties panel, we have different constraints option on the x-axis. We can add left, right, left, and right, center and scale constraints. And on the y-axis we can add top, bottom, center scale constraints. Currently, our ellipses set to default. If we check this, let's kill this frame up. Here you see as we scale the scream up or ellipse will stretch with it. Whereas if we stretch this frame to the right or ellipse will not stretch with it. If we change the left constraint too, right? You see, it stretches to the right when we start the frame and it will not stay to the left this time. And if we check this fixed position when scrolling, it will fix its position whether we studied out or not. And that's how easy it is to apply constraints. This feature is very helpful in designing responsive websites, apps, and other designs. So we're working with constraints is great. If you have to put content on different sized screens or scale are screened, for instance. And this brings us to the end of this video. See you guys in the next video, we're going to see what is Virgin and sigma apps. 15. Versioning: Welcome back. In this video we're going to see what is Persian and variant history in Fichman. Sigma offers very uncontrolled within each of the file you create. And this is a really good way to be able to view up previous saved version, restore a previous version, comment on things. So in this video we're gonna talk about version control to see the version history, make sure nothing is selected. And you can see the name of the file up here, click in the arrow to the right, and you will see show version history. Now on the right, you see the version history. The best thing about this is that as you make moves or changes or things like that, it's going to auto save it for you. If you look back down here, you're going to see all the different times that you have done things. And if you click on one of these previous, you will see is going to show you what it's gonna look like here. Now, this is just giving us a preview. If we really want to make this the version that conversion. If you come to the ellipse here, you can see the restore this version. You can also duplicate it or copy it link or named dispersion. Let say you are testing a new function in an app design and you have named this brilliant say, testing side menu. Add a description if you want to. And let's hit Save. This will let other team members see that Sharia is testing the site menu. Now you can add it this version info. Let's say the hamburger menu is done. And now you complete this version info as well. So it's just a way for us to kind of if we wanted to collaborate with people and tell them what we're doing and what we are looking at. And this brings us to the end of this video. See you in the next video we're going to see what our iOS guidelines and how to use them in our upcoming Nike app project. 16. Understanding and Creating guidelines For iOS: Welcome back. In this video, we are going to see what a guidelines and how to use them in our upcoming Nike app project. Guidelines are set of recommendations on how to apply design principles to provide a positive user experience. Designers usage guidelines to create compelling designs and meet and exceed the user needs. This course primarily focus on iOS guidelines. So we are not covering the material or Android guidelines in this course. So let's start this video by creating a design guideline system for our upcoming Nike Air project. To create a design guideline. First of all, create a frame. Now we are going to add rulers in this frame. So to add rulers, pester, hotkey, Shift R to enable rulers. And now grab two rulers from the left and plus one to the right and one to the left with an equal spacing of 16 pixels. To add accurate rulers, draw a rectangle here, change it's color to black so it visible. And now change its width to 16 pixels and align the rulers with this rectangle. Similarly, move this rectangle at the top center and change its height to 44 pixels. And now plus another ruler here. Move this rectangle down and add another ruler here. This first portion is for the status bar of the iPhone. And the second portion is for the title and back button. Now move this rectangle town and add two rulers here, one for the home indicator icon and one for the tabbed menu. Bless it, with the same spacing at the bottom. And now our guidelines for iOS is created successfully. I have provided this file with this course, kind of download it and use it. It also includes the font, images, icons, and colors that we are using in our project. So please download this file and in the upcoming videos, we will start getting the Nike app in Fichman So that you guys know how to get a real buildup in FISMA. That's all for this video. See you in the next video. 17. App Overview: Welcome extra minutes. From this video onwards, we will start creating our real-world app in FISMA. The app that we're going to build is Nike shopping cart app from where you can buy different kinds of shoes. And also, we're going to link the screens to create interaction between the screens of the Nike app. So it looks like a real-world app. So in the next video, we're going to create our app splash screen. That's all for this video. See you in the next video. 18. UI Splash Screen: Welcome back to this. In this video, we're going to create our app splash screen. The Exercise Files I provided contains all the font and typography. So firstly, let's set that in our demo file. Select the color one-by-one. And here on the right side, click on these Phil colored dots. And from here, click on this plus icon to create our color styles and give it a name as well. Let's say hash triple to triple to. Now click on this Create style button. Similarly, again, press the plus button and add the remaining colors to this list. Now, our colors are placed in the local styles. Let's add font to the local style as well. Similarly, do the same as we did with colors. This time at the name of the font with their size, S name. Copy the name of the font. Click on these doors, click on the plus icon, and now paste that text so that we know that it's a headline of 49 points. The same process with all the other fonts as well. From here, I'm speeding up the video. And now, if I select this text here on the right, we see all of our local styles that we're going to use in the Nike app. And now let's start creating the splash screen for our app. Firstly, popular frame that is provided with this course Exercise Files. And now we are going to change this to splash screen. First of all, lead the title bar and the tapped menu. After that, double-click on the frame in the Properties panel and rename it to one splash screen. It's a very good technique to rename your frame so that you can work with it easily. Now here, select the Rectangle tool and draw rectangle over this frame and change its color to dark color. And here the Properties panel, move this rectangle down and change its name to Packer. How did that change the color of the indicator and Status Bar to white? So they look visible. Hotter that import the Nike logo from the exercise files and paste it here and align it center horizontally and vertically. Now, blessedness created, there's hope for this video. See you in the next video. 19. UI Login Screen: Welcome excellence. In this video, we're going to create a login screen. Firstly, copy does setup prim and move it to the right by pressing the all key. Now just copy the Nike logo and move it here. Shrink it down to around 78 by 28. And now Cellectis title bar and this local by pressing the Shift key and align its center horizontally and vertically. Now just delete this title par. And after that, make an ellipse of around 220 by 220. Out of that the art and shift it together and make a copy of this ellipse and shrink it down to around 166 by 1-6, 5-6. Now just let both of them and align them Center. And just change the color of both the ellipses to this third color from our list. After that, change the opacity of the outer ellipse to 20%. So it looks nice. And also group them together by selecting both of them with the Shift key and press control G. Now just place them minus 90 at the exit and minus 80 at the y-axis. And after that in the Properties panel renamed this group to Ellipse Group and move it down in the Properties panel. Now just pressed at Tiki and dried sign-in and change his phone to know Nieto and its size to 40 semi board. And here change its width, 23 AD2 and its height to 109, and place it in the center. After that, align the text to centre as well. And now move it up with a top margin of 25 pixels. After that, edit text layer, right. Enter your email and password. Changes font, tour, app font, and its size to 16, semi bold, and place it with a top margin of 0. Now change its width to 382 and its height h2, 44, and its color to third curve form of library. After that, let's add sign-in fields to save our time. Just copy that from the exercise files and paste it here. And just arrange these fields properly and tease the font to know nato and font size to 16 and group these fields as well. After that changed the color of this forget password text, fluid theme color. Now it's time to add a sign-in button. So draw a rectangle of around 350 by 44, change its border-radius to 20. Align its center horizontally, and fill it with a dark color for our library. Now press that Tiki and write, log in on this burden and change its phone to 16 extra bored. After that, change the text color to white color. Now displays this button with a top margin of 50 pixels. After that, press that Tiki and dark text area. And here, right, don't have an account sign-up. Changed the font of this first text to 16, semi bold. And this signup text2, 16, extra bold. And also change its color and give it an underlying, NOT just a line, this whole text center vertically and place it with a top margin of 20 pixels. Now, make a copy of this text, move it 30 pixels down, and rename it to sign-in width. After that dot equal lines of 116 pixels and place one line to the left and one to the right with a spacing of 16 pixels from the sites. And now select these lines and this text and align them center vertically. And also change the stroke color to this C6 color form of a list. And here and its social media items, cobia social media icons from the exercise files and pasted here. After that, place them with a top margin of 30 pixels. Lastly, move this text down and replace it with skip. Now text, align center and and changes color, blue light color. And rename this frame to login screen. And this brings us to the end of this video. See you in the next video. 20. Account Recovery Screen: Welcome extra minutes. In this video, we're going to create a account recovery screen. Firstly, copy the previous frame and move it to the right by pressing the all Qis. And after that, rename this frame to account recovery screen. After that, rename this sign-in to account recovery. And this second X2 I reset link will be sent on your email. After that, delete this e-mail field and this folded password text, and now just renamed this deaf to enter your email. After that, let's move down. And here, just lead all of this except with this button. And lastly, rename this button to send. And now our screen is completed. See you in the next video. 21. Reset Screen: Welcome back students. In this video, we are going to create reset screen. Firstly copy the login screen and move it to the right by pressing the ALT key and rename it to reset screen. After that, rename this sign-in to reset and this second text to enter your new password. And now renamed this email field to enter new password and password Tx2 and confirm password. Now just laid these forgot password and all of this below this button past letting all of this and hitting delete key from your keyboard. Lastly, rename this button text to reset. Align its center properly. And now our screen is completed. See you in the next video. 22. Sign Up Screen: Welcome to exponents. In this video, we are going to get a sign-up screen. Firstly, copy the previous screen and move it to the right by pressing the ALT key and rename it to signup screen. After that, rename this reset to signup. And this second text to first create your account. Now, we are going to add two more fields here. So move this button down here. Just move this second field down by passing the ALT and shift key together and make two copies of it. After that, rename this first field to fullname, second field to email. Third field to password. Don't change the fourth one. Now we're gonna add an icon with these password fields. So just grab the icon from the exercise files and push it here. And now flying them properly. After that, copy this text line from the logins and patient here, move it under this button and change the text to already have an account. Login. Lastly, just change that text and button spacing to 20 pixels. And move these two up. And move these two up with a top margin of 50 pixels. And now our screen is completed. See you in the next video. 23. Home Screen 1: Welcome back. In this video, we are going to create home screen one. This is the home screen before a user logs into the app. So firstly, copy the previous screen and move it to the right by pressing the ALT key, and then rename it to home screen one. After that, just delete all of these except this logo and top bar. And now just press that Tiki and write categories. It's 0.222 and place it with a top margin of 20 pixels. Now, just let that particular tool and draw a rectangle of around 85 by a 100. After that, draw an ellipse of around 66 by 66. Align them center vertically and horizontally. Now make three copies of this and place them with an equal spacing between them. Now pester Tiki and right Snickers. Tin is phone to 12, semi bold. And place it inside this first rectangle with a top margin of ten pixels. Then make four copies of it as well. After that, it's time to add images to these ellipses. Select these four ellipses. And from this Toolbar, choose place image, and from the exercise files, choose your desired images. And now here, click on this circle to place your desire image into that circle. To fit this image into this lips. Pressed up and double-click on this image to get into this image. And from here, properly. After that, select these four ellipses and give them a stroke of light colour. Change its size to two. And here ten names as well. Now, change this first ellipse and text color to a theme color. So it looks prominent and the user knows that this category is currently selected. And now just let all of this and place them with a top margin of 30 pixels. After that, hide these rectangles by clicking on the icon in the Properties panel. Now we're going to add products here. So firstly, move this above text down. The top margin of 30 pixels and rename it to draining footwear. After that, draw rectangle of around 181, but 211, change its border-radius to 20. Draw another rectangle of around 139 by 107, place it with a margin of 15 pixels and change its border-radius as well. After that, copy, the heart icon from the exercise files. Make it apparent component by clicking on this component button and make a copy of it and place it here. After that, geeky allied to product name changes, phone to 16 Board. Bless it, with a left margin of ten and a top margin of five pixels. After that, make two copies of this text. Hold him down and tin the second dx2 category name. And the third text to price. Also changed the second x phone to dwell bold, and change this first rectangle colour to a light color with 30% opacity from our list. After that, we're going to add a cart button. So draw a rectangle of around 41 by 41. It's border-radius to five from three sides, but 20 from the bottom right. Place it properly. And it's going to go. Tim Keller. Also add up plus icon over this button. Copy the icon from the exercise piles and place it over. This put him properly structured Israeli, make three copies of it and place it on this frame properly. Here at the bottom. Let's add our ten menu. Copy that from the exercise files and paste it here. Lastly, we're going to add images, go rectangles, and chained up prices and names of the articles. So this is a lengthy process. So I'm speeding up the process here. And now our screen is completed. Decimal for this video. See you in the next video. 24. Profile Screen 1: Let them extra minutes. In this video, we're going to create a profile screen, one. This is the profile screen before a user logs in or sign up to the app. So firstly, copy the previous screen and move it to the right by pressing the ALT key and rename it to profile screen. One. After that, just lead all of this except this top bar and these tabs. And now just draw rectangle of around 404 by 100 to change its color to fourth filler with 20% opacity and change its border-radius. Bottom-left and right corners to 40. After that senate behind this top bar in the layers panel. After that, press that Tiki and right plug-in clash, create account, change its phone to 18 and place it with a bottom margin of 25. Now made two copies of it, moved them down. Tinder phone to 16, regular and rename the first two, my orders. And the second X2 Help Center. And now we are going to add icons here. So just grab the items from the exercise files. Or maybe you can just add this flat. I can plug-in in your frequent and import icons from there. After you import the icons, it's time to place them properly. So just grab a rectangle of around 33 by 29, make a copy of it and move it down. Now place the items over these rectangles. Print the icons to the front, and align them properly. Now group these icons with these rectangles and align that text with these icons properly. And change the internal spacing between text and rectangles to 20 and the horizontal spacing to 40 and less pressing to 24. Lastly, make a copy of the above text, Moby down, rename it to terms and conditions. And these rectangles by clicking on this icon in the Properties panel. And now change the color of this bottom tab profile item to a theme color so that a user will know that the control is on the Profile icon. And now our screen is completed. That's all for this video. See you in the next video. 25. Home Screen 2: Welcome back students. In this video, we're going to create a home screen too. This is the screen after user logs into the app. So firstly copy the screen number four and move it to the right by pressing the ALT key. And now rename it to home screen. To. After that, just add a cart icon, copied it from the exercise files, and paste it here, align it properly. And now here, change these two fierce icon color to a theme color. And that's our user. Add these items to his favorite list and our skin is completed. That's all for this video. See you in the next video. 26. Product List Screen: Welcome back. In this video, we're going to create a product list screen. So firstly copy the previous screen and move it to the right by pressing the Alt key, win him into product list screen. After that, delete this category section and these steps. And now just move the remaining up with a top margin of 20 pixels. Not just renamed this heading two sneakers. And here, just fill this empty space with these above articles. Lastly, just add a back arrow here. So just copy that from the exercise files and paste it here and place it properly. And now screens completed. There's hope for this video. See you in the next video. 27. Product Detail Screen: Welcome extra S. In this video, we're going to create a product detail screen. So firstly copy the previous screen and move to the right by pressing the ALT key and rename it to the product detail screen. After that, delete this Snickers section, and fill the background with fourth color from a list with 20% opacity. After that, at rectangles over this frame. Senate behind the topper and fill it with white radial color. After that, move it from these handles and place it here properly. Not just import the image of the shoe here. Copy that from the exercise files and place it here properly with a top margin of 20 pixels. Not just draw for ellipses of 15 by 15. Bless them with 15 pixel spacing and with a top margin of 20 pixels. And group them and align them Center properly. Not just removed a fill of these three ellipses and give them the same stroke color. After that, let's draw a rectangle around 414 by a 5.3.2, change it's color to white and its upper corner radius to 40. And place it here with a top margin of 30 pixels. Now, we're going to add some details about the product here. So for debt, firstly, write size, make 13 copies of this text. And now chain the first text to 18. For. Now, I'm going to change these texts layers. It's a lengthy process, swam speeding up the process here. Now, I have changed that text layers. Let me tell you that we are not using pure black color. So just replace the black color with our takeaway from our list. And this paragraph text to this third curve from our list. And now we are going to arrange all of this. So it looks nice. First of all, draw rectangles around 55 by 25. Change the border radius to five and place them behind these text layers. After that, align these texts layers with these rectangles. Now change the second rectangle color to a theme color, and its text color to white. After that, align these rectangles within internal spacing of 20 pixels between rectangles and 30 pixels. From this test heading, a top margin of 50 pixels as well. And now just hide the remaining rectangles. Now we're going to add up quantity counter. So draw a rectangle of around 150 by 35, changes port radius to five. And it's colored to light color. Now draw two rectangles of around 46 by 33 hour. This rectangle change their border-radius to five from all sides and their color to fight. Align them properly. Now made two copies of this text and change them to minus and plus. With a size of 30, regular at this center text to 22 semi boat. Noticed like this whole button and group it as one. And after that, align its center vertically with this text and place it with a top margin of 20 pixels. Now I'm speeding up the process here because I'm suggesting that text spacing to 2030 pixels. After that spacing, it's time to add rating stars and a button here. So just copy the stars from the exercise files and paste it here. And also the button, because this is a pre-defined button provided in iOS Guidelines. Lastly, I'm going to copy this button, shrink it down to about 160 by 44, and place it behind this favorite text. Change. It's color to light-colored with 30% opacity. And add a favorite icon with it. Copy the favorite icon from the previous screen and place it here properly. And now our skin is completed. Their sought for this video. See you in the next video. 28. Cart Screen: Welcome extra minutes. In this video, we are going to create a cart screen. So firstly copy that previous screen and move it to the right by pressing the ALT key and rename it to the current screen. Onto that, delete all of this, and add two rectangles of around 382 by 147 and changed their border-radius to 15 and their color to white. After that, copy, the third rectangle from the previous screen, shrink it down to about 404 by four foot five. Now we're going to place things over these rectangles. Firstly, dot two rectangles of around a 100 by a 100 over these vital tangles. And now insert images of the products into these two. And mascot with shape. Now, just copy the product in full text from the previous screen and paste it here and align it properly. After that, align these texts layers left with a left pacing of 20 pixels. And here the spacing is five pixels from the right. Similarly, add another product. Here. I'm just speeding up the process here. Now let's move to the lower portion here. First of all, pester Tiki and right shipping address. Place it with a top margin of 30 pixels. After that, make nine copies of this text and move them down. Now let's replace all of this text layers. So from here, I'm speeding up the process. So you don't get bored. Now I'm back. After that. Dot two dotted lines of around 150 pixels here. And here in the properties panel, click on this stroke, changed its dashes to, to do give it a nice look. Out of that. Copy the Favorite button from the previous screen patient here and change its text to change and align it properly center. This ship. After that ellipse of around 16 by 16. Fill it with our team color. Dendrite. Change font size to ten, and place it over this ellipse and align it properly. Also group it together. And here, just place this over this cart icon properly. Lastly, just copy the burden from the previous screen and paste it here and rename its text to continue to checkout. And now screen is completed. That's all for this video. See you in the next video. 29. Payment Screen: Welcome back students. In this video, we are going to get a payment skin. So firstly, copy the previous screen and move it to the right by pressing the ALT key and then rename it to payment screen. After that, delete all of this upper portion. And now just draw rectangle of around three by 70. Qaeda border radius of around 20. And Kavita white color. Now just best at Tiki and ride payment method. Its font should be 22 bold. Not just place it with the top and bottom margin of 20 pixels. After that, let's make a copy of it by pressing the ALT key and move it down, change its font, and rename it to graduate slash debit card. Please it with the left margin of ten pixels and align its center vertically. After that, draw an ellipse of around 44 by 44. Change it's color to light color with 30% opacity. After that added checkmark over this Ellipse. Copy that checkmark from the exercise files and place it here. Also change its color to third color from our list API that lets me copies of these rectangles, move them down with a spacing of 20 pixels. And now just Tinder colors and text. Here. I'm speeding up the process. Now let's move down here. First of all, bleep this shipping address portion and change the height of this rectangle, 2469. Here. Let's move these price details up with a top margin of 30 pixels. Lastly, rename this button text to place order. And now scan is completed. There's hope for this video. See you in the next video. 30. Place Order Screen: Welcome back students. In this video, we are going to create a place order screen. So firstly, copy W skin. And when we do the right by pressing the ALT key and then rename it to place order screen. After that, delete all of this except this text and one shape. Now, let's just change the background color to dipolar and this text color to light color. And then move it down in the center. After that, just delete discard item and add a rectangle of around 28 by 28. Changes border radius to ten and its color to white. And after that, add a gloss icon over it. Copy that glows icon from the exercise files And visitor, and align these two properly. Now let's move down. And here. Firstly, draw some random ellipse and arrange them randomly so that the screen design looks good. After that, let's move this checkmark here. And now middle copy of this ellipse. Scale it up to about 104 by 74 and place it behind this ellipse. Now, the first, second ellipse, color, theme color. And here changes first ellipse size to 72 by 72. Now align them centered vertically and horizontally with each other. After that, bring down the opacity of the outer circle to about 20%. So it looks nice. Known as smooth down. And here, rename this dex to order placed and place it for the top margin of ten pixels. After that, change, this ship color to this third color. With 20% opacity. Also changed all the ellipse colors to this color. Here, please, this rectangle with ten pixels, top margin. Lastly, rename this dx2. Expected delivery to hear. Hear changed the font of the first texts to 1870 volt and this second half to 18 volt. So it looks prominent. After that. Align it to centre with this rectangle properly. Here also change this home indicator and status bar color to white so it looks visible. And now our screen is completed. That's all for this video. See you in the next video. 31. Search Screen: Welcome back students. In this video, we're going to create a set screen. So firstly copied up your screen and move it down by pressing the all key out of that, delete all of this except the Nike logo and topper. And after that, change the frame color to the fourth Khaled from our list with 20% obesity. And now just copy the predefined search bar from the exercise files. Basically it here with a top margin of ten pixels. And now we're going to add recent searches, so forth dead, draw a rectangle of around 404 by two H6, then change its color to white and it's border-radius 25. And then place it with a top margin of 20 pixels. After that, draw a vertical rectangle of around 48 height. Prof, five to six sections with a separator line between them. And after that, press that dp and right Nike shoes model numbers here and add a recent search icon on the right side. Hobby that I can form the exercise files. So from here, how speeding up the process. And now just change the color of the lines to the fourth 100 follower list with 30% opacity. And our search is almost completed. The last thing I'm going to add is to add a keyboard. So copy the keyboard from the exercise files and base it here with a top margin of 20 pixels. And now our screen is completed decimal for this video. See you in the next video. 32. Favorite's Screen: Welcome back students. In this video, we're going to get a full screen. So firstly, copy the scheme number eight and paste it here. Then rename it to fears screen. After that, just delete this lower portion, and then change the color of the frame to white colour. And the product color do light color with 30% opacity. After that, move these rectangles down and press that Tiki and dried favorites. Place it with a top margin of 20 pixels and bottom margin of 30 pixels. And now let's move down here. Just delete these counters and add to cart button from the home screen and resize it. After that, add a cart icon over it. So copy that cart icon and delete icon from the exercise files and visit here, align it with the burden properly. Harbor that. Align these text layers probably after that, do the same with the second rectangle. So for that, I'm just speeding up the process here to save time. Lastly, copy that tab bar from the home screen and paste it here. Lastly, the focus to favorite tab. And now our screen is completed decimal for this video seemed the next video. 33. Profile Screen 2: Welcome back students. In this video, we are going to create a profile screen to. So firstly, copy the profile screen one and paste it here, and then rename it to profile screen to after that, draw an ellipse of around 80 by 80. Then add a random user image to that lips. I have installed a plug-in named and splash. And here, just click, just right-click to open it. And then here, search for men. And after that, add a random image to this ellipse. Mass this image into this shape. And now let's make a copy of this text, move it down, replaced these two texts layers. And after that, Jane, the first text tool, that username and the second two location. Also change the font and color of these declares. Notice group these two layers and align them Center with this image. After that, add an edit button here. So just draw a rectangle of around 109 by 44, changes border-radius to 20. And after that, add a text of around 16 regular audit and align it to centre, properly. Known as move down here. First of all, align these headings left with this ellipse. And now make four copies of these and move them down. I know I'm going to replace these declares and icons. All the icons are in exercise files. So from here, I'm just speeding up the process. And now it's time to add separate lines between these menus. So it looks nice. So draw a line here and change its color to light color with 50% obesity. And now the line, these lines with an internal spacing of 20 pixels. And now screen is completed. That's all for this video. See you in the next video. 34. Edit Profile Screen: Welcome back students. In this video, we're going to create an edit profile screen. So firstly, copy the screen number 12 and paste it here, and then rename it to edit profile screen. After that, did eat all of these except this text. And now replace this guard icon with a checkmark icon. Copy the check my icon from SKY number ten, and then paste here. Change it's color to dark color and place it here properly. After that, rename this text to contact info. And now we are going to add fields here. So firstly, make some copies of this text and move them down. After that, add two lines of about 382 here at two more lines of 155 grit. And now move that text field here. Change its font to 14, semi bold and its colour to a list. Rename it to firstname. Out of that, move this second text up. Green m it to Alex, and changes font to 16, irregular. And place it here properly. And now just make a copy of this text field. Move it to the right, rename it as well. And now just move this first field tests down with that drop margin of 20 pixels and rename it as well. So from here, how speeding up the process. And now our fields are created perfectly. Here, change these lines, colors, do that fourth color from our list. And this first line curve to a theme color to make it a focus field. Edit text line here, and change its color to a theme color aswell. Lastly, added keyboard here. Copy that from the previous screen, and paste it here properly. And now screen is completed. That's all for this video. See you in the next video. 35. My Orders Screen: Welcome back students. In this video, we are going to create my Orders screen. So firstly, copy the screen over 12 and paste it here. And then rename it to my Orders screen. After that, delete this cart icon and change the background to fourth color with 20% opacity. And this rectangle colors to bite out of that, change these rectangles size 2414 by 246, and the border-radius to 0. And now just move these texts layers down. And here, best at Tiki and write the ordered number. After that, made two copies of it, move them down, change their phone to 12, bold and their color to third pillar. And after that replaced the first with a place on date and second with paid on date. And now place them with an internal spacing of five pixels. Applet that make a copy of this above text, move it down, and then replace it with total. And add our delivered message here. So draw rectangle of around 96 by 27, change its border radius to 20, and its color to our theme color. And also Jane, the amount color to a theme color. After that ad text, say delivered. It's font should be 14 semicolon and then change its color to white. So it looks visible. And then move this total text under this, delivered with an internal spacing of ten pixels. And here a first rectangle is done. Let's move to second. Now speeding up the process to save time. And lastly, changes favorite text to my orders. And now our screen is completed. There is hope for this video. See you in the next video. 36. My Cards Screen: Welcome back students. In this video, we are going to create my cards screen. So firstly, copy the previous screen and paste it here, and then rename it to my cards screen. After that, delete all of this except that this text. And then change the background color to white color. Now just renamed this text to my cards. And after that important god image from the exercise files and paste it here with a top margin of 30 pixels. And now make a copy of this text. And while we don't change the font to 14 semi bolt, and then rename it to add a new God. And now just add a rectangle of around 25 by 25. Change is border-radius to five and its color to our team color. Now add up plus icon over this rectangle and align it properly. Copy the plus icon from the exercise files and pasted here properly. And now just place this text and this plus icon with a top margin of 50 pixels. And now our screen is completed, and that's all for this video. See you in the next video. 37. Add Card Screen: Welcome back to minutes. In this video, we are going to create add card screen. So firstly, copy the screen number 14 and paste it here. Ten, rename it to guard screen. After that, delete these placeholders texts and move these upper face down. And these two are fields up and place this first field with a top margin of ten pixels and these other with a top margin of 40 pixels. After that, rename this first place holder to name on card. After that, rename the first field to username. Second field to card number, changes color to light color so that a user knows that it's not the focused field. Change the third to expire IT, genius line color. And after that, change the fourth field to Cv. And now just copy this text from the previous screen and paste it here. Replace this plus icon with a check mark icon and this text with saved my card and place it properly. Lastly, add up button here. Copy that from the previous, copy that from the previously created screen, and paste it here and rename that text to apply. And now our screen is completed. That is all for this video. See you in the next video. 38. My Address Screen: Welcoming students. In this video, we're going to create my address screen. So firstly, copy the previous screen and paste it here. Then rename it to my editor screen. After that, delete all of this except this button. And now add a map and a map icon for the top margin of 20 pixels. Copy the map and map icon from Exercise Files and place it here properly. After that, press the Tiki and write, edit your address, place it with a top margin of 30 pixels. And now draw three rectangles here. First should be 382 by 80, and the other should be 382 by 50. Chain. Third, rectangle's color to light color with 20% opacity. Now, align these three rectangles properly with an internal spacing of 20 pixels. And now let's move to first rectangle. Here. Add a location I can first. And after that, add this text. Align this to properly here on second rectangle, floor unit. And on this third right slash zip code. And then the line these texts layers with these rectangles. And lastly, Changes button text to save. And now our screen is completed. That's all for this video. See you in the next video. 39. Help Center Screen: Welcome back students. In this video, we're going to create Help Center screen. This is the last week of our nike app. So firstly, copy the previous screen and paste it here, then rename it to help centers green. After that, delete all of this except this rectangle. And now change this rectangle size to 382 by 580. Give it a border radius of five and swept its color with background color. And now first at TV. And right, how can I help change its phone to 22 gold and its color to our theme color. And then place it with a top margin of 30 pixels and a left margin of 16 pixels. After that, make a copy of it. And chin is fond to 16 semi-public and scholar to dark color. And then rename it to this text. And then gent does text to multiline text with a width of 250. Now add a line of about 350 pixels under it. And after that, add an arrow in front of this text. Copy the arrow from the top, and paste it here by changing its position. Now, just group these together and make four copies of it with a top margin of 20 pixels and move them down one by one. And after that chain that text lives. So from here, I'm just speeding up the process to Sierra time. And now all her screens are completed. That's all for this video. See you in the next lesson. We're going to link their friends together to make a prototype of our app. 40. Prototyping: Welcome back students. This is the last video of this course. In this video, we are going to take a look at how we can link the frames together. So it looks like a real-world ad and then share it with other team members and stakeholders. So here at the top right, you see it is divided into three views. Design you, prototype you, and inspect to you. This prototype view is used to create connections between friends and to define the connections between them through interaction. So just click this prototype view, zoom in, and click on the first frame. And hey, you see if a plays this Play icon, it will consider it as home frame. Leave it as it is. Because this is not her home screen. And here you see this arrow. Just drag it and drop it onto the second frame. And on the right, we have properties window. In the Properties window just choose. After delay. That time should be 400 millisecond and the animation should we dissolve and the eating should be 0s. After that, on our next screen, connect this send with next dream with auto animate and 400-millisecond. Do the same with the next screen. And here, protect this reset button with login screen. And now let's move to signup screen. Here. Connect this sign-up with home screen after login with moving animation. And connect this login with login screen with smart animate. And now let's move to home screen. This is the home screen before a user logged in or sign up to the app. So here, just connect this search tab with screen number 11 and this field step with schema 12 in moving animation. And lastly, correct this profile with profile Screen1. Also check this smart anyway it matching layers checkbox. Now on Powell Screen1, connect this login and create account with login screen. And the animation should be moving from the right side. And here, connect this my orders with sign-up screen because our user cannot see the order unless he signed up to the add. And this help screen with help set the screen. And after that, connect these depths as we did on the previous screen. So from here, I'm just speeding up the process. And now stern told us move to home screen outer user login to the app. Here. Firstly, connect this sneaker with the next screen. And this fourth shoe with a detail screen. And its animation. Should we smart anyway it here connect these steps as we did on pure scheme. But this time connect this Bhopal ICOM with Provost skin after login. Screen number 13 with woman from the bottom end emission. Now let's move to screen number six here, correct this back arrow with previous screen. So just choose this bag from struck down. Now on screen number seven. Firstly, make a copy of this screen, move it up here and rename it to seven into two. And after that, ten, The first got icon to symbol icon. And now just connect these two screens together with smart animate. No screen number seven into two. Connect that cart icon, screen number eight. And its animation should be smart animate as well, known as mu2 skene operate here, connect this back arrow with FactoryGirl. And after that, connect these change button with screen about 18 with moving left animation. And connect this continue to Checkout button with screen number nine, the smart animate. After that. On screen number nine, connect this back arrow with previous queen and is Place Order button with next cream. Now let's move to screen about ten. Here. Connect this close icon with screen number five into one, which is home screen. And its animation is smart anyway, it now we have linked ten screens in our app. Let's test it out by clicking here. And these are working perfectly fine. Now screen about 11, connect better with bacteria and leave the rest as it is. And on screen. And we will do the same with the back arrow. And now just connect these steps as we did on the previous screen. Now on screen over 13. Firstly, correct this edit button and this username with screen number 14. And this address with screen over 18, where a user can easily update his address. Also change the animations to move in from the left side. Half of that. Let's move down here. Connect this my order with my order screen. Put it this my card with my current screen, parenths address. With address screen. Leave the notification as it is. And here, connect this Help Center with health center screen and this logo with home screen before user login. Also join these tabs, simply delete them and paste the tabs from the previous screen to save time. Because they are already connected on previous screen, we just need to copy them and paste them here. Now on screen number 14, correct this back arrow with that trigger. And this checkmark icon with profile screen with slide right animation. Here. Couldn't the rest of these screens, back arrows with back arrow trigger and also these depths. To save our time. After that, let's move to ski number 15. Here. Don't change anything. And now cinema 16, grip this, add a new card with screen above 70 with moving left animation. And now onscreen over 17, connect this Apply button with screen above 16 with moving from the right and emission. And Nowinski number 18. Connect this save button with screen number eight with auto animate. And now lethal scannable 19, hazardous. Finally, all our frames are linked. To check this linking, just press control a. And here you see that network of interaction. It's time to run our app. So it just click this Pigou button. And now you see that all of our screenings are linked together. And it looks like a real app. Now to share it with other team members. Just click on the Share button. And here you can share it for design review, hardware developer and many other options as well. I'm just going to choose anyone with a link can add it. And lastly, click on Copy Link and just share this link with your team members or stakeholders. You can also share this file by entering their emails. And this brings us to the end of this course. I hope you guys liked this course. And if you have any curious regarding this course, please feel free to contact me. See you guys in another course of treatment.