User Experience Design - Adobe XD Mega Course | Alan Ayoubi | Skillshare

Playback Speed


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

User Experience Design - Adobe XD Mega Course

teacher avatar Alan Ayoubi, Motion Graphic Designer and Photographer

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

58 Lessons (8h 42m)
    • 1. Adobe XD Mega Course Introduction

      4:12
    • 2. Difference between UI and UX designer

      2:49
    • 3. Basics Design Mode

      1:12
    • 4. #1 Download Adobe XD, First time opening it

      4:01
    • 5. #2 Working with Artboards

      4:50
    • 6. #3 Working with Shapes and Lines

      13:17
    • 7. #4 Working With Text

      6:43
    • 8. #5 Working With Images

      6:51
    • 9. #6 Alignment Tools & Boolean Operations

      6:33
    • 10. #7 Assets & Components

      7:35
    • 11. # 8 Repeat Grid

      5:21
    • 12. #9 Responsive Resize

      11:15
    • 13. #10 Plugins

      12:13
    • 14. Finance App Homework

      0:17
    • 15. #1 Background and Credit Card Design 4K

      19:30
    • 16. #2 Buttons And The Rest Of The Screen Design 4K 2

      30:15
    • 17. #3 Second Screen Design 4K

      15:03
    • 18. Everything About Prototyping

      0:37
    • 19. #1 Basics and Time Transition

      10:47
    • 20. #2 Component States

      14:30
    • 21. #3 Overlay, Scroll and Drag Prototype

      6:45
    • 22. #4 Voice, Sound, Gamepad Key Prototype

      5:50
    • 23. #5 Auto Animate

      13:20
    • 24. Prototype Homework

      0:13
    • 25. Some Advanced Techniques

      0:17
    • 26. #1 Color & Number Scroll Effect

      10:50
    • 27. #2 Character Input Prototype

      16:57
    • 28. #3 Glassmorphism

      11:03
    • 29. #4 3D Transform and Prototype

      13:54
    • 30. Advanced Section Homework

      0:14
    • 31. Wallet X Website UI

      0:45
    • 32. #1 Menu Bar and BG

      13:07
    • 33. #2 Landing Page P1

      11:52
    • 34. #3 Landing Page P2

      17:35
    • 35. #4 Benefits

      10:06
    • 36. #5 Credit Card And More

      14:40
    • 37. #6 Prototype

      16:08
    • 38. E Commerce App

      0:27
    • 39. #1 Onboarding screen design

      11:27
    • 40. #2 Login and Signup Screen Design

      13:35
    • 41. #3 Nike Home Screen Design P1

      29:26
    • 42. #4 Nike Home Screen Design P2

      9:55
    • 43. #5 Puma & Adidas Home Screen Design

      8:25
    • 44. #6 Single Product Preview Design

      12:52
    • 45. #7 Favourite Screen Design

      6:56
    • 46. #8 Profile Screen Design

      5:39
    • 47. #9 My Cart Screen Design

      4:22
    • 48. #10 Search Screen Design

      11:01
    • 49. #11 Prototype Onboarding, Sign in & Sign up

      9:51
    • 50. #12 Prototype Scrolling Effect

      2:34
    • 51. #13 Prototype Between Nike, Adidas and Puma Screens

      6:48
    • 52. #14 Prototype Single Product Preview

      4:09
    • 53. #15 Prototype Favorites Screen

      11:49
    • 54. #16 Prototype Profile Screen

      4:20
    • 55. #17 Prototype My Cart Screen

      7:03
    • 56. #18 Prototype Search And Finalize

      16:50
    • 57. #19 Prototype Running your App on Mobile

      2:18
    • 58. End

      0:25
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

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.

747

Students

1

Project

About This Class

UI Design, User Interface, User Experience design, UX design & Web Design

Hi everyone welcome to Adobe XD mega course.

Before I jump into the details of the course I want to quickly tell what adobe xd is used for.

Adobe XD is a simple easy to use application dedicated to UI UX design we can call it user interface or user? basically, we use adobe xd to design mobile apps and websites 



Just like our other mega courses this course is designed to take you from absolute beginner to advanced level in UI design. 

This course is divided into 4 main parts, basics of design mode, basics of prototype mode, advanced technique and finally working with real projects. 




In the design mode basics. We will start with downloading Adobe XD and installing then we will open it for the first time. 

I will show you how to work with artboards, shape tools line tools, I will teach you how to use text tools, how to use images easily and effectively. After that, we will cover alignment tools and boolean operations. Then I will show you how to work with components and assets inside XD. later, we will cover a very exciting feature in XD which is a repeat grid. After that, we will cover responsive resize I will show how to use it and how to get  advantage from it for your designs. The last thing we will cover some free Plugins, we will cover the most useful ones. When you finish this part you will have a complete understanding of Adobe XD design tools, you will be ready to use what you have learnt to create some professional design. Together we are going to design two screens of a finance app, we will use all that we learnt in the design mode basics part. 

After we covered and practised everything about design mode we will move to the prototype model. We will start with the basics and then we will cover all of the tools and settings in the prototype mode. We will cover time transition, component states, scrolling groups, overly animation, drag animation, sound, voice and keyboard triggers and much more. At the end we will cover an exciting prototype feature which is auto animate, we are going to animate the design we made in the design part with auto animate. 

After we covered both design and prototype mode we will cover some advanced techniques. Like 3D transform and animation, Glassmorphisms, input prototype, scroll number scroll colours. 

At the end of the course, we are going to create two projects together, the first one is a website homepage for a financial company, we will create it from scratch, we will start with the brainstorming and written form then we will design and prototype it. 

The second project will be an e-commerce app, we will start this one from the brainstorming to the design and then to prototyping. 

After you finish this course you will have a full understanding of Ui design and Adobe XD. You will be ready to use Adobe XD effectively and professionally. You will be ready to start your carrier with UI design.

Meet Your Teacher

Teacher Profile Image

Alan Ayoubi

Motion Graphic Designer and Photographer

Teacher

Hi, I am Alan a motion graphic designer and a photographer with  11 years of experience. I have worked for many international Organizations and TV stations. During my work, I have learnt a lot from my mistakes and experiences.

Today I have more than 100K followers online, who learn from my online teaching and use my products in their creative project.

Here in Skillshare, I am going to share my knowledge with you. I will teach you from the basic level to professional.

 

Enjoy every course, watch carefully and please always contact me I am happy to help you in person.

See full profile

Class Ratings

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

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

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. Adobe XD Mega Course Introduction : Hi everyone, welcome to Adobe XD mega course. Before we jump into the details of this course, I just wanted to quickly tell you what Adobe XD ASUS for. Adobe XD is a simple, easy-to-use application created by Adobe, and it's used for a UI UX design. We call it user interface or user experience design. Just like our other courses, this course is designed to take you from absolute beginner to advanced levels in Adobe XD and UI design. This course is divided into four parts. The first part is basic of the design mode. The second part is basic of prototyping mode. And the third part is the advanced techniques. And the last part, you are going to create some rail projects with Adobe XD. In the first part, which is the basics of design mode, we will start with downloading Adobe XD. I will show you how to download it, and then we are going to open Adobe XD for the first time. In this part, we are going to cover all of the design tools. We will start with the shape tools and line tools and then Image.all text tools. Then you are going to cover the alignment and Boolean operations. And after that, I'm going to cover a very important feature in Adobe XD will just repeat grid. You are going to cover that. And then we are going to cover the responsive resize. I will show you how to use this responsive resize for your designs. And then we will cover assets and component. I will show you how to work with the assets and component and other aid. We are going to cover some of the best slogans for Adobe XD. And for sure there will be free polygons. When you finish this part, you will have full understanding of Adobe XD design mode. And you'll be ready to use this design mode to create some professional looking applications. And together, you're going to use everything that you have learned to create this professional app, which is a finance app. We are going to create two screens of this app. After you've finished and practice design mode, we will move to the prototype mode. In this section, we will cover everything about prototype mode. We'll start with the basics and then we will go to the timed transition component's state. Scrolling gropes, overlay animation, drug animation, sound, voice and keyboard triggers, and much more. At the end of this section, we will cover the most interesting feature in Adobe XD prototype, which is auto animate. We are going to animate and prototype with the application that we created in the previous section. After we covered both of the design mode and prototype mode, we will move to some advanced techniques. In this section, you are going to cover 3D animations and three transparents. Then glass morphism, character input, prototype, number, scrolling and scrolling. After you've finished design mode, prototype mode, and advanced techniques, you will be ready to go one step farther. And in the coming sections we are going to create two projects from everything that you've learned inside this course. The first one will be a website for a financial company. We will start from the scratch from the written form and brainstorming to design, to prototyping. At the end, you'll be creating a website like this. The second project will be an app for e-commerce. For this app, just like the website, you are going to start from the written format and brainstorming. Then we are going to create our design, and then we are going to prototype it. And at the end you are going to play this application or to run this application in our mobile. After you finish this course, you will have a full understanding of Adobe XD and UI design, and you will be ready to start your career in UI design and Adobe XD. If you think this course is for you, enroll now and let's start together with Adobe XD. See you inside the class. 2. Difference between UI and UX designer: Hi everyone, welcome back. In this lesson, I'm going to show you what is the difference between knew I designer and UX designer to make things simple for you in order to create a design for a website or an app, you have to go through some of the steps, and we call these steps UX. Ux consists of research, brainstorming, implement, and reporting. In the research stage, which is the first stage, there are a couple of things that we need to do. The first thing is understanding our client what they want. For example, we are going to conduct a bunch of interviews with them to understand exactly what they are looking for. The next thing that we need to do is user personas. We are going to create some imaginary persona's and you are going to identify their goals, their frustration, and anything that they want about this app. And then we are going to cover the use cases of our app or website. For example, what different people are going to use our services, like we want to know what people are going to use it for. The last thing is journey maps. They're like brainstorming. We want to create the experience for the user. But this is not the design stage. This is only are on the papers and on the documents. The next stage is brainstorming. In this stage, we create user flows and wireframes. User flows are like brainstorming or like the boxes. We are going to show the app from one screen to another screen. And also wireframes. We're going to create the skeleton of our app before we actually create the design colors and icons. After these two stage, we will go to the implementation stage. This stage, the role of UI designer comes in. The UI designer will design the application or a website. And then he will do the prototyping Fred and interactivity. And he may work with developers to work on the front and back-end to make the application or a website, a working product. After all of these stages, we will finish our product and the last stage is come in, which is reporting. In the reporting stage, we can do usability reporting, for example, observing real users using the product through variety of means. We can also do split testing, for example, providing to the user to different designs. And then you will see which design is doing better. And at the end, we can also do an analytic reporting. With analytic reporting, we can get some extra insights about our app. For example, the time spent on each page, bounce rate and more. And we can do all of this in the back end of our app or through the dashboard. Okay guys, hope you enjoyed this lesson and learned something new. I'll see you in the next lesson. 3. Basics Design Mode: Hi everyone, Welcome to the first section. In this section, we are going to talk about the basics of design mode. We are going to open Adobe XD for the first time, and then we are going to work with the art boards. After that you are going to cover the shapes and lines. I will show you how to work with these and how to use them for your designs. After that, we will work with the text. I will show you everything that you need to know about the text tool and how to use it for your designs. After that, I will show you how to work with the image. We will start with importing the image and then adjusting these image for our designs. After that, you are going to cover the alignment tools and Boolean operation. And then we will cover assets and component. I will show you how to work with the assets and component. After that, we will cover the most important feature in Adobe XD, which is the repeat grid. I will show you all of the things that you need to know about the repeat grids and other ain't you are going to cover responsive resize and plugins. This is going to be a very exciting section. I can't wait to see you inside the class. See you there. Bye bye. 4. #1 Download Adobe XD, First time opening it : Hi everyone. This is the first lesson and I'm going to show you how to download Adobe XD. Adobe XD is a free product. You will just go to those website and then get XD. It will open this window for you. If you have Adobe Creative Cloud, it will ask you to open it. If you don't have it, will ask you to download it. In this case, I have it. I'll just open it. So right now we have Adobe Creative Cloud opens. Sorry, I have XD open already. And you will, over here you'll see Adobe XD and you're going to download it. By the way, don't forget that you need to register and create an account. It's for free. So when you are downloading Adobe Creative Cloud or just before you download Adobe Creative Cloud from the website, you will need to sign in or register an account. So over here you can do that. Just click on it. And if you have an account, just sign-in. If you don't have, you can create a new account over here. Alright, now let's go and open Adobe XD. Me, move it up. Okay, So you will have something like this. When you first open Adobe XD, you have home learn and Cloud document. And over here you have all of the recent projects that are created. And here you have some of the templates that you can start with. If you click on these arrows, you will have more options, more presets for the fonts. You have more presets for the web, more presets for the story and social media. And over here you can create your own dimensions, custom size. You can open your projects if you have them on the computer, but usually they are saved inside the cloud if you have Adobe Creative Cloud account. So when you open Adobe XD, you will have something like this. You have this layout in the middle, which is this area. You have the canvas area is the place where you create all of your designs and Artboards. And over here we have all of the toes, the one that we use to create our designs like this rectangle. We are going to cover it later. In the left bottom you have the layer panel and we have the plugins, and then we have the acids. And you're going to cover all of this. I will tell you what each of them is doing. For now. I'll keep it on the layers. And in this side we have the inspector, the properties panel. It will change depending on what you select. For example, if you select the Artboard, you will have the options are the properties for the artboard. And if you create a shape or something, you will have the properties for that one. So we're going to cover all of this. Don't worry about that. I'm just showing you the layout of the program over here. If you just click on this one, you will have this window open the opening window, you can create another project. And now we have the design. We are now in it. We have the prototype side, this one, when we animate our application and use the prototype, we are going to cover this washer. And we have the share, if you want to share your document or your projects with someone. Over here we have the font. You can play your application on the phone. And we have this one prototype to play your application and you're in the computer. We're going to cover all of that later. Of course. Over here we have the menu bar. I'm not going to go over them one by one. We're going to cover the most important one as the course progress. If you have Windows, you will see the meaning of overhead. So don't be confused. You'll have three lines and you will just click on it. You'll see the menu. 5. #2 Working with Artboards: Hi everyone, welcome back. In this lesson you are going to talk about the artboards. So artboards are the thing that you are going to use to create our design inside it. So anything that we create inside Adobe, because D, They will be created inside the artboards. And you can have as many artboards as you want in single project. Let me remove this one. And if you click on this icon, you can create artwork. When you click on it in the right side, you will have all of the presets that we have with the Adobe XD. We have preset for the mobile, for the tablets. And also we have presets for the web and desktop, and we have for the watches and also social media. Now I'm going to create one for the web. And I will show some navigation shortcuts. So if you're using a laptop with the trackpad, you can just, just like a phone, you can zoom in and zoom out. Of course, with the two-finger touch. And you can use Command or Control plus and minus to zoom in and zoom out in both Windows and Mac. If you go to the Artboard tool again, when we click on it, as we said, we have presets here. You can add them just like that. Just click on any preset that you want. And like this, we can add as much or as many as we want. While the Artboard tool selected, you can create custom artboards like this. You can draw them just like this. And if you want to move around and you can presently space and move just like this. And if you have many are boast like this. You can just select any artboard that you want. You can choose to this one or maybe this one and then Control three. Like this. It will fit to the screen. No matter where are you in the Canvas, it will bring you to the art board that you selected with common to 1 or Control 1. When you select it, it will zoom in 100%, but it will not focus on the art board that you select it. And common though it will be 150 zomemim without the foxing on the article that you select it. So only common three will take you to the art board that you selected. As we said, we have prepared this panel in the right side. So if I clicked all of these art boards, we have the alignment. I can align them all to the top. Are in the middle, are I can align them to the left or right. So these are all alignment tools. You can go ahead and play with him and see what each of them is doing. And this is when you have a lot of artboards in your Canvas. You're going to do that. You can remove art board by just selecting them and then pressing Delete. Now I'm going to walk you through the single art-board properties. So we are selecting this artboard, make sure that in the layer and you selected this art board. This way you will see the properties for the art board. And we have these properties and these are the size and also the position. You can change the orientation of the art board over here. And then we have the responsiveness. We're going to cover this later. I'll keep it turned off for now. And then you have the scrolling, it's vertical. So if you go ahead and change the size of the artboard, by the way, you can do that, just click on this one and make it bigger. So you can see, you can adjust the size of the orbit like this. And then we have this blue dotted line. This means anything below the line or above the line will appear on the screen at one time. Anything below it, you need to scroll down to see it. So this is the case. So basically this is your screen. And then we have the appearance. You can change the background over the artboard. And we have the guides. We have the layout, which are these green lines. And you continue the color if you wanted to, and change the number over the lines. And you can also change the layout to make it square. It will be a grid and normal grid like this. Let's make it layout again. Now if we create any shape, it will snap to this grid just like this. And if we want to change the grid, when you click and empty the area of the artboard, you cannot select it. You have to come over here to the layers, go back and select the artboard. And now we have the properties to disable the grid. Okay guys, this was the end of this lesson. Hope you enjoyed and learned something new. I see you in the next lesson. 6. #3 Working with Shapes and Lines : Hi everyone, welcome back. In this lesson, we will talk about the shapes and lines. Before we do that, I want to show you how to create roller lines like this for the guidelines. If you just hover over to the left and up, you will see a white. Think like this. And you can just drag these lines from there. And of course, besides these lines, you can use the guideline on the artboard like this. Let's disable it for now. And we are going over here. So we have a rectangle, circle and triangle, and many of them with the pen tool online. We'll start with the rectangle, just select it and can create square, or we can create a rectangle like this. So if you press on the Shift, you will make a perfect square like this. I'm going to quickly change the color from here. And then if you want to move this around, you need to go to the Selection Tool, which is this one. Click on it and move the rectangle around. You can also press on the V for that. So I'll move it over here and go to the rectangle tool again. And you're going to create a rectangle like this and change the color. Now you have two of them. I'll select this square. I'm using Command Plus to zoom in. So over here we have these points around the box. We can use it to extent or to make the size bigger from each side. And also we have these switches, the corner wages. We can round the corners just like this. Yeah, just like this. We can play with it. And you have all of these settings over here in the Properties panel. You can play with the position and also the size. We are now playing with the size. This one also, by the way, I'm using the arrow keys on the keyboard to play with these numbers. So just like this, you can play with the transforms. And you also have the rotation tool, which is this one. You can also find the rotation if you just hover over one over the corners, you will see the rotation and you can also change it from here. And then we have the flip tools. You will just flip the shape or anything that you have. For now it doesn't show because all of the sides are the same. If we change the color or the shape it will appear, but you'll do that later. For the transform controls, we have the 3D one, which is a new one added to Adobe XD. You are going to cover this in a special section, as well as responsive free size. You are going to cover this in a special lesson. Okay, after that we have the opacity. So this one basically makes it transparent. It doesn't show it like this. Now I'll just move this shape over it and you can arrange them also, the layer panel. So if we move this over here, just click on it and drag it above this above the rectangle. And if you drop down the opacity, you will see the shape behind it. And then we have the corner roundness. Now they're all connected. If you change the number, it will change for all of them. And you can control it with the widget, the corner widget. If you click on this one, all of the corners will separate from each other. You can put different number for each of them and to create a special or custom shape like this. Okay, So just like this, you will make custom roundness for each corner. Let me move this up a bit. Actually, I'll move it down again and we will go and cover the color. We have the color for the fill and color for the stroke. Now for the fail, if you just click on it like this, you can change the tone of the color. And over here you can change the color and here you can change the opacity over the failed. So this opacity is different from the opacity that we just covered. This is only playing with the fill color and not the stroke. So if you play with this one, it will turn down the opacity for all of the shape, stroke and the fill. But here it will only play with the fill. So this is the different. And over here we have the solid color. We had the linear gradient and radial gradient. So with the linear gradient, you will just click on this circle and change the color for this one the same and combine two colors. And over here you can change the color that the one. You can change the gradient like this as well. Just grab these points and move them around to get something that you are looking for. Now since you have two colors, I will just show you the flip tool. So it works like this. Now let's move to the border. Just click over here and change the color. We only have the solid color. We don't have the gradient for the border. Over here you continue the size of the stroke. I will just make the color black so we can see it better. And then we are going to play with the dash and gaps. So OS or you're playing with the other shape. Let's select this one and add dash. We will make some dashes, and when we add dashes, the gaps will be added automatically. And like this, we have this effect on the structure. If we zoom in, you can see that the stroke is inside. Like inside the shape. If you click over here, it will go outside. And if you click this one, it will be inside and outside. And this one went around the end of the stroke. Let's change the gaps and dashes to see it better. Okay, something like this is good. And then we have this one, it'll make it around and straight. This one change the corners. But he cannot say because you have dashes. Let's make this 10. Now if you folks on the corner, when we click on this one, we have this rounded corner and then we have the cut corner. Okay? The last thing we have the shadow. You can add the shadow to your shapes. Let's zoom in to see it better. So over here you can change the position of the shadow. And then this one change the blurriness over the shadow. So if we make it to one, you will see that it's not blurred at all. And if you make it to a higher number, it will blur the shadow. This one also change at that position, left and right. So let me change this 10, make it 10 maybe yet. And over here you can change the color and the opacity of the shadow. So this one is pasty. And over here you can change the color of the shadow. Then we have the background blur and object blur. So we will go over the background, Blair, for the background blur, it will blur everything that is behind it. But object blur. It will blur the object itself. So we have the blur intensity over here. Let me just change the color of the stroke. I'll just change it to white and decrease the size just to make it to like gloss. We're going to cover this in a special section, the glass effect, but for now I'll just show you how it works. Okay, sorry. So we have this one, the intensity over the Blair and we have the like brightness. And over here we have the opacity for the color and the blur. And as I said, the object blur, Blair, the object itself but the background Blair will Blair whatever behind it, as you can see at the other shape is behind it and it's blurred. Okay, I'm going to remove this one. And we are going to cover the circle. Let me remove this line as well. Now we'll just move it like this. And if you press on the Shift, you can create a perfect circle like this. Let's change the color to something. Oh sorry. So you have this cycle of our hair all over the sittings. All of the properties are the same for the rectangle. And only it doesn't have the roundness because he doesn't have corners. So it doesn't have any roundness for the corners. As we say it, with the circle tool, if you didn't press on the Shift, you can create circles like this, but if you press on the Shift, you can create a perfect circle. So basically you create ovals without shift. Let me remove this and we'll go to the triangle. I just like the circle. If you press on the Shift, it'll be a perfect triangle. If it doesn't, if you don't press on the Shift, you can create stretched the triangle, something else with the triangle. If you press on the up and down arrows, you can change the sides. You can add sides to this shape. So you can create hexokinase style shapes and many other types of shapes. If you select the triangle, you will see this point. If you drag it down, you can create a star for this one as well. So now you have two types of stars. Let me create another rectangle like this, and we will go to the Properties panel. Everything is the same, but we have some special stuff for this one, you can change the size or the number of the sides over here. And then you can change the roundness of the corners with this one. This is o means we can see it better. I'll remove the roundness is like this without the wrongness. And if he add roundness, increase the number to 50. We have something like this. And with this one you can make it the star. Let's bring down the number. I'm using the arrow keys. It's basically the same work of this point. It does the same job. Okay, that's what's special about the triangle. The color, and everything else is the same as the other shapes. Now let's go to the lines. I'm going to remove these, just click on them and they let. And then we will use the lines. You will click and drag to create a line. You can click and move your mouse around to change the angle. If you press on the Shift, it will be a perfect line. If you press on the Shift and move it around, it will hit to the 45 degrees, just like this. It'll move 45 by 45. And if you have already created a line, you can grab a point and move it around just like this and do everything else that you want. And this one only have the border or the stroke. It doesn't have the fail because it's only a line. And you can play with the size dashes and everything else that we covered in the rectangle section. On that section, actually, when you're talking about the rectangle, we covered that I can change the color like this. So this is all about the Lions. There is nothing so special about this, but you'll be using these in our designs. Let me remove this. And this one is Pentel. Pen tool. You can create freeform lines. So you can create the straight points like this. If you click and drag, you can make them care of it like this. So you can basically create anything you want with the pen tool. And this one is not very easy. It needs a bit over the practice to play with this one. You are not going to use this a lot in our designs, but it's something that you should learn. And if you are coming from the Photoshop or Illustrator, the Pentel should be very easy for you. Something else with the other shapes. If you double-click on them, you can play with their points like this. So you can customize the shapes that you have. For example, this rectangle. If you just double-click on it, you'll be able to select its points and move it around like this. Okay guys, this is all that I wanted to cover in this lesson. We basically covered all of the shapes that we have Shape Tools and we covered their properties. In the next lesson, we are going to cover the text. So the text on the shapes are the base for any design in Adobe XD. I'll see you in the next lesson. Bye bye. 7. #4 Working With Text: Hi everyone, welcome back. In this lesson we will talk about the textual. So press on this icon which is t or press T on the keyboard and click anywhere on your art board like this, you can write anything. I'll write Adobe XD, and then I'll go click on the Selection Tool. And with this circle, if you just click and drag, you can play with the size. Over here we have the properties for the text. We have all of the transform controls. They are the same as the shape tools. And then we have the text. These are specific for the text. So we have the type of the font. You can change the font to anything that you want. You can use arrow keys to change the font like this. I'm pressing the down arrow key. And over here you can play with the size. It's similar to this one. When you resize it like this is the same. And then each font has some version. Some of them, they didn't have any versions, but let me choose one over the phones that has more than one version. For example, this one, it has regular and bold. There are some that has many versions. I will just choose another one. This one also has the Bolden regular hour right Roboto font task, a lot of versions. So it has regular italic, thin and bold semi bolt, many things. Over here. You can play with the space between the letters. If you increase it, the space between the letter will be increased as you can see. Okay, and then we have the space between the lines and then paragraphs. So right now you are using the point text. We need to change it to the area text PSU these options be available for us because they are not working. We have the alignments and also the space between lines and paragraphs. They don't work because it's a point text. But then if we click on this icon, it will be an area text. Now we can play with the box without a resizing the text itself. So you can write anything and it will be within this box. I'm going to write something. Okay. And now anything that you write outside the box like this, when you click outside the box, it will not be available. So just like this, it can increase the size of the box to be available. And now we can play with the size or the space between the lines. As you can see, just like this, we can play with the spacing. Okay? And then we have the space between the paragraph. For that I will need more paragraphs. I will make the size of the text small, copy all of it, and press Enter and paste it below. Just like this, I'll increase the size of the books. Right now we can play with the size of the space between the paragraphs. As you can see, we can change it. So I love it also is going down because I pressed Enter when I wrote that. So I'll just remove that enter, click on this area and press delete it for this one as well. So now we only change the space between these two paragraphs. Now I can, if I write anything else, I will just write something. So now it's a part of the paragraph. But if you press Enter and write it like this, when you press Enter, you start a new paragraph. So the space between them will be the one that you sit there. By clicking on this one, we can change the point, I mean the area text to the point text again. So right now it's no longer a text area. We can always change it back to the area text. Okay? So over here we have the alignment. You can align it to the left, right, and in the middle. Let me remove this one and we are going to create a new text. It will be a point text. Alright, Adobe XD. Let me change the space between the letters. Okay, you need to select the text first. I will go to the selection tool, select it and then change the spacing between the letters like this. Now let's cover this and this one makes it our case. All of them. This makes it lowercases. And this one makes the first letter uppercase and the other one lowercases. Then we have superscript and subscript. If I select this one, this is what superscript does. And this is what the subscript AS. Then we have the underline. You can put a line under your word. You can also put a line in the middle of the word so that set and then we have the opacity. You can play with the opacity and you have the color, the fill color, and you have the border color, just like the shapes. Here, you can change the size of the border or the stroke and play with all of these settings. We already covered this with the shape tools. So you have this change the corners of the stroke just like the other one. We already covered this in the previous lesson. And then we have the shadow. You can add the shadow just like the other shapes. And you have the background blur. The background blur just the works like the other ones that we covered in the previous lesson. You will need something behind it. Let's create a shape. And I will move it below or behind the text just like this. And then I'm going to change the color for it. Let's move it over here and change the color so we can see it. I'll choose this purple. And now if you move it, you will see that the blair, it blurs what is behind it. Okay guys, this is all about the text. Hope you enjoyed and learned something new. I'll see you in the next lesson and we will be talking about the images. See you there. Bye bye. 8. #5 Working With Images: Hi everyone, welcome back. In this lesson you are going to talk about the images. So first thing how to import images, you'll go to the file and impart. This is on the Mac and the Windows. You have three lines over here. You will see your menu. You will go to the file and then import. Click on the impart are come on shift I, Control Shift I. And then choose the photo that you want. You can find these photos in the resource folder where you can download from the Internet. And like this, we have our photo inside our Canvas and art board. You can make it smaller like this. Let me remove this, and it can do this as well. Just drag and drop, open your folder and drag and drop the photo that you want. And like this, we have imparted a new photo. Let's make it smaller. Move it over here. Photos work like shapes. We have the corner widgets to round the corners. Just like this, we can round the corners. And you can move over here, you have the transform controls, you have flip tolls, then you have responsive very size. We are going to cover that later. And then we have the opacity. And here we have the blending mode to demonstrate that I'm going to create a shape over this photo. And you are going to change the color for the shape. And then we will change the blending mode for the shape. So it will basically blend both of them together, the photo and the shape. These are similar to what you have on Photoshop and Illustrator. Of course, you can change the color whenever you want. I mean, the size now the color. Yeah. And you can change the color as well. And that's it. Let me remove this one. Then we have the roundness. I'm not going to cover that it's similar to the shapes. Then we have the field color. I don't know why we have this. It makes it a normal shape basically. So you're not going to use that. I don't think so. And we have the shadow, let me close like this. You are adding the shadow. And you can play with this. It's sitting if you want to. Then we have the background blur. For the background blower. We need a shape. I will make a shape over this one. And you're going to apply the background blur to this shape. I'm going to show you the difference between the background blur and the object blur. So right now you are using the background blur. Let's enable it as you can see, whatever behind it will be blurred. And it can change the settings, the amount of the blur, and then the brightness. And this one also the opacity. Let me change the color of the border, make it wide like this. We can make glassy credit cards. I'm going to show you this more in the coming sections. Then we have the object blur. The object blend a little below the object itself, not what is behind it. So this is what it does. Okay? Now we have covered most of the properties for the image. Now we will cover the masking. So we'll just create a circle. What do you want to do is to show the picture inside this circle. So you are going to use the masking because you want to show the photo inside the circle. The circle should be above the photo. And now press on the shift and select both of them. Then right-click and Mask with shape. Like this, we are seeing our photo inside the circle. If you want to change the photo or change the shape, just double-click on it. Now you can move the photo around, click outside, see the change. You can double-click again and change the size of the circle, select the circle, press on the shift and change the circle like this. Now we have this. Now both of them are acting like one object. We can resize it like this and move it around. And we have all of these properties for them, the same properties that we have for other objects. And you can use the mask with any type of shape. I will remove this ellipse tool. Just remove it and the mask will automatically will be removed. Now we are going to create a rectangle, I mean the triangle like this. And then select both of them, right-click make with shape. Just like this, we created a mask. Now if we double-click on it, you can change the shape of the triangle. We can change the roundness, the size, and also we can make it the story if you want to, we can move this. Let's click outside and see how it looks like. So just like this, we created the star and it works with other shapes. You can draw something actually, The remove this triangle and I will draw something once the Pentel. Make sure you close it like this. Sorry, I will create another shape that wasn't very nice. This one is not nice as well. I'm just showing you how to work with them. So just like this, we created a mask with our pen tool and then we can go ahead, just double-click on it. You can add new points, remove points are just move them around. Yes. So you got the idea. Okay, now let me remove all of this and I will show you another easier way for the mask. You will just create your shape, whatever shape that you want. And then you will open a folder that has the photos, anything, let me change the color for the circle. Open the folder that you have photos. Just drag and drop your photo over the shape like this. And just like this, we made a mask. So as you can see, it will create a mask automatically. Just double-click on it. You can move it around like the other one if you want to. So here is the same idea, but it's easier. So you can do this with any type of shape that you want. And I think this will be the end of this lesson. Hope you enjoyed and learned something new. I'll see you in the next lesson. In the next lesson you are going to talk about the Boolean operation. I will show you how to combine shapes together and also how to use alignment tools. I'll see you there. Bye-bye. 9. #6 Alignment Tools & Boolean Operations: Hi everyone, welcome back. In this lesson you are going to cover the alignment tools and Bali and operations. So I'm going to create a rectangle and change the color for it to anything that we can see. And I'm going to create a circle. Let's change the color to something like this. And then press on the V for the selection tool and move it up. And then you will duplicate this. You can command or Control D to duplicate like this. Or you can use Control C, Control V. You can also press on the Alt or Option on the Mac and hold on it and then move it like this. You will make a copy just like this. Okay, now let's explore some of the alignment tools that we have. So we have all of our layers here in the layer panel. If you move this one, you will see this pink area is shows you that the distance between the left and the right for the circle is the same. So it tells you that the distance between both sides from the circle is the same. If you move it around, you will see many lines appears. It tells you, like it will show you how to align. For example, if you want to align the head of the square with the circle or the middle of the square with the head of the circle, or the head over the square with the middle of the circle. It will tell you, as you can see, it has all of these lines and it will help you to align the way that you want. So basically you have all of these guidelines to help you align your objects on the art board. If I select all of them and we go over here, we have the alignment tools. You can align them in the middle. You can align them to the top. You can align them to the button. Let me align these vertically. And then I'm going to increase the size of the artboard. I can select the art board. I will just come over here and select it. Then increase the size like this. Let me move this over here, select them. And with the align tool over here, you can align them vertically and make sure that the space between them is the same as well. So we have these alignment tool for horizontal arrangement and also for the vertical arrangement. Now all you have to do is to go ahead and explore these guidelines. They are very easy. They just need a bit of practice and you will be familiar with them. I think I'm going to remove all of this and you are going to move to the Boolean operations or combining shapes. This is definitely more fun. Okay, for that I'm going to create two circles. So you can enable these Boolean operations. So if you create one circle and it will change the color of it, it's this purple. Now if we check the Boolean operation, they are not active because we need more than one object. So I'm going to duplicate this circle. I will press on the Command D to duplicate it and move it over here. Then we are going to change the color for this one. Let's see which color we are going to choose. Okay, I'll make this one. We have four Boolean operation. I'm going to make four copies of these two circles. So I'll move this here, press on the option and move it like this option or Alt to make it doubly Kate. And we will move one over here. And now we are going to experiment with the first Boolean operation, which is at or combining two shapes together. So for that, I'm going to group them together. And now I'll move this above everything else. This is only for the arrangement. Okay? Let's open the group. And you have to select both of the layers, not the group itself. You need to go inside the group and press on the shift and select both of them. Now the Boolean operation are active because if you click on the group itself, the Boolean operation will not be active. So make sure that you select the layers. And just like this, we combine these two together. Whatever you have in the bottom, the top shape will get the color of that. So now we have the purple. When you combine them together, they will both be purple. Now let's move the pink one below, and let's combine them. As you can see, both of them are pink. Now, let's go to the second Bollinger operation. Again, I'm going to select them and then right-click to group them together. By though you have to press on the Shift to select both of them. We grew up them. Let's move the group over here. Sorry, I don't want to be inside the other group. Yeah, let's move it over here. Again. You have to select both of the shapes inside the group, not the group itself. Okay, now let's subtract them. So it works like this. The shape that you have on the top will eat out from the shape that you have in the bottom. And this is called Subtract. If you move them around, Let's go to the group and move that purple one above. And now let's apply the subtract. As you can see, the purple one eat out from the pink one. So this is how it works. Okay, let me add the effect or subtract them again. Okay, now let's go to the third one which is intersect. So only the intersection between these two shapes will appear if you apply that. I group them together now less like both of them. And click on the intersect. As you can see, only the area that they intersect will appear just like this. The third one is subtract. So the area that they interact with each other will be removed. So I just group them and make sure that you open the group and select both of them inside the group. Okay, click on this subtract. Just like this, we applied the effect. The area that they interact with each other has been subtracted and removed. And this is the four Boolean operations. Hope you enjoyed and learned something new in this lesson. I'll see you in the next lesson. Bye bye. 10. #7 Assets & Components: Hi everyone, welcome back. In this lesson, you are going to cover the assets and also the component. So over here you can go to the Assets. Click on this icon. This is layers. This is assets. In the Asset panel you have colors, character style, and component. To demonstrate that I'm going to create a bottom. I'm using the rectangle tool and we'll make it around and change the color to purple. And then I'm going to put a text on it. I'll write sign up. You can write anything that you want. Okay. I'll move it in the middle. And now we can save the colors of this bottom as colors to use it throughout our humans and our projects, we can save the character style for the text and we can make the whole button as a component. So the first thing, I will add the color press on the plus button. Now we have added the colors. We can also add the character style and component. Okay, now we can select the whole button, the text, and the background together, and we can make it a component. Just click on this plus button. Now this button is a component. We can also save the character style if we double-click on this one because you may get a component, that's why it's working as a group. Now, double-click on it. And now we selected the text. And now we can go to the Character Style and add it. Now we have this character style saved. And now I will show you how to use these assets. Now, I'll go ahead and create another button, and I will add this color that you've saved. Let's, you can change it if you want. I will add this color and let's move it up. Now if you go ahead and change the color in the Asset panel, right-click and edit. So when you change the color, it will change the color for everything that you have applied the same color. So this is very useful when you want to change the color in bulk. For example, you've used this color throughout your design. You are making a very long or a very complex application and you've used the same color in many ways or in many places, you can change it easily like this. And the same thing is for the text. As you can see, I just change the text. Let's add another text to the New button that you have are right by now for this one. And now if I add the same character style that we have, Let's add it just like this. And if I right-click and edit, now if you change the color or the font, it will change for everything or anywhere that you've used the same character style. Okay, I just remove those and we are going to create a new component because there are more complex. That's why I want to show you a more in details. I will create another button. Let's make it like this. I'll change the color to anything that I want. I'll make it purple. Okay, now go to the selection tool and move it here. And it will add a text to it. All right, by now, or sign up anything that you want. Okay, Now you are going to select everything together and make it a component. We can come over here and press on this plus button. We can right-click and make a component. We can also come over here in the right side and click over here to make a component. Now it is a component. Now if you want to use the same, put them in different places in our work, we can just drag and drop like this. We can also just doubly located. You can control C, control V, sorry, I made a mistake. Control-c, Control-V, and move it over here. Now I have another copy out of it. And now if you click on the main one, which is this one it calls its main component. So this is the master component and it has this green thing on it. And the other one we call it instance and it's called anastomosis. These are the intestines or the main component. So whatever we changed in the main component, it will be changed in its intestine. For example, the size. You can change, the roundness, you can move the text, you can change the color. It will change for everything. But when you change things in the instant, it will not be changed in other ones are in the main one. So this is the Aniston. If I change the text, for example, I will change it to registration. So it'll only change over here. I can also change the color and anything that I want without affecting the other component that we have. And this is very helpful when you want to easily create your button. And if you want to change one of them, slightly changed the color, change that text. It will be very easy for you to do it. So as you can see over here, I can change the color if I won. Without changing the other ones. There is something else about the component. They have states. Now we have the default state over here. You can add more states. For example, hover over. For the hover over, I'm going to change the color to something else. And this is very useful for the prototype. When you hover over your mouse or your finger over bottom, it will be changed. So now we have a default state and have our overstate. I can add even more stays if I want, for example, I can add a depressed state or clicked like this. And I will change the color to something darker. So just like this, we have three states for the same bottom. You have the default one hover over. And we have the same state for the instance as well. So they will automatically be added to the instance. So the way we were able to change that default state for the instance, we can change the hover over and other states as well for the instance without changing it for the main component. Okay? The instance that you have changed, for example, this one that I just duration if you want to make it like the main one, again, just right-click and reset to the main state. Now, it will be similar to the main component that you have. I just wanted to show you again, if you change the text, it will be changed for everything because this is the main one that you are changing. You can change the color if you want. And that's something else. You can actually use component inside the component, for example, I will create this circle. Let's make it red. And I will make this one component as well. So come over here. Now we have another component. I can move it and put it inside a component that you already have. So just move it like this and drag it inside it. Now as you can see, we have it inside the main component. It's already a component. Inside a component. So we have something like this now. Now if I change something about this one, for example, if I want to change the color over the main one, it will change where everything else. I'm not sure what you're going to use this for in the future, but this is something that's possible. You can put a component inside a component, and this is how you do it. This is all about the component hoop. You understand it and learn something new. I will see you in the next lesson. Bye bye. 11. # 8 Repeat Grid: Hi everyone, welcome back. In this lesson you are going to cover a very important feature in Adobe XD, which is the repeat grid. For that, I'm going to create a profile holder. I will just create a rectangle like this, rectangle or a square. Let's make it rounded. And I think like this. Yeah, let's increase the border. Actually all keep it the same. Let's keep it like this. And then we are going to put a photo inside this one. Go to the folder. In the resource folder, you can find these photos for this lesson. Just drag and drop. We already know how to do this. We covered that. Okay. Now I'll make another rectangle for the name placeholder. I'll create something like this. Let's round it as well. We'll put it in the middle and then you're going to round the corners. And we will change the color. First, I will remove the border, and then we are going to change the color to purple, my favorite, something like this. It'll be good. And then we will put the text on it. I will write the name for her. Maybe I'll name or Mary. And then turning to the color and the size to fit inside the placeholder. Okay, change the color to white. And then we will put the name in the middle. I'll keep it like this, I think. Then let's see how it will look like if we round the corner all the way back? No, actually, I don't like it. Okay. I will keep it like this. We're not trying to make anything perfect. So this is our first profile. And if you want to make more profiles, I will just select this one and Command D or Control D to duplicate. I can use also option and Alt to duplicate just like this. But this process is very time-consuming, especially if you are working on a project that you need. A lot of W case or galleries. And now the repeat grids come in handy. Just select it, right-click and group it. Now we have this one. Now we will select it and use Repeat Grid. Click on it. Now with these handles, just move it to the sides. Like this, we made a grid. This is very useful to create similar stuff in your UI design, especially galleries and profile stories and things like this. You can adjust the space between them like this. It's very easy in handy. Okay, I'll keep it like this. Let's remove this bit that we have in the bottom. And now if you want to change the photos, it's very easy. Just go to the folder that you have photos. You can download this from the resource folder and drag and drop over one of them. Adobe XD will automatically replace them in each grit. So like this, we perfectly replaced all of the photos without taking so much time. Now if you want to change the text, that's very easy as well. You will just write your names in a text file. You can find this text file in the resource folder. And then you will move your text file over one over the text. Just drag and drop. Move over one over the text. Unlike this, Adobe XD will replace all of the text. So this is the magic of repeat grid is very useful and it will make your life very easy when it comes to creating galleries, grass, and profiles. And as you can see, you can edit all of them together like this. You can change the roundness, you can change the position. You can even change the color. And it can also add shadows. You can do all of the things and it will be applied for all of the grids. Okay. Let's try to change the color as well. The color for the names. Yeah. So it's like this. So if you change the color or anything for 1 over them, it'll be changed for all of them. But what if you want to change for one of them only? In this case, you need to ungroup that Repeat Grid. So you'll just select it, right-click and then and grown grid. Or we can go to the layers over here, right-click it over here and ungroup grid, or you can do it over here, actually just ungroup it. Now they are separated. You can change all of them separately. They are the friend groups now. Okay guys. So this is all above the RPD. Great hope you enjoyed and learned something new. This is very important. I hope you go ahead and practice with this. Before moving to the next lesson. I'll see you in the next lesson. Bye bye. 12. #9 Responsive Resize: Hi everyone, welcome back. In this lesson you are going to cover the responsive layout. So this is the responsive layout. You can enable it for the Artboards and also for the objects and groups. I'm going to create bottom. Just for example, I'm going to round the corners and change the color to black. And this I will the border. Now if you check the objects or the texts that we create, the half responsive for every size, make sure it's enabled when you want to use it. We will write by now anything that you create inside your airport, they have responsive resize enabled automatically. So let's put a tear and change the color for the text to white. In practice, we use responsive resize only for the art boards and also for the groups. So we are going to use it for the group. Now, I'm going to group this together and make sure that the responsive resize is open for the group as well. Now if you scale or change the group size, as you can see, everything is taking in their position that takes is remaining in the middle. So it means that everything is working fine because you have responsive re-size open for the text and the background as well. I just double-click in their group to be able to select the text. Now we will go to the manual resize or response re-size. I'm going to stick it to the left side. It means that the text will stick to the left side. No matter what we do with the size of the group, it's not going to change its position or it's not going to move to the left side. Now if I double-click again, this time we are going to stick it to the right side and make sure that you're resizing the group itself, not the background. I was doing it with the background. That's why it was not working. And now it's working. It Stick to the right side. This time let's use the top and bottom. I'm going to click on this one. So now it's fixed on the top. It's not going to change or move. And you're going to use the other one. Let's click on the text and do it. For the bottom. Now at the bottom is fixed. Okay, I'm going to disable all of this again. And now when you are playing with the size of the group, if the response that is going to move from all of the sites. Okay, now I'm going to move this into metal again. I'll just fix the bottom. And you are going to use the responsive resize for the art board itself. Now if I click on the name of the art board, I'll be able to select the artboard. And now we can change the size of it. It doesn't do anything because they're responsive, resize is not enabled. Go to the right side and see over here, enable it. Now if we resize it, Let's select the artboard. And like this, it's moving with the size over the artboard. Now if I click on the bottom and make a memoir resize, if I stick it to the right, for example, now if I resize the art board, it's not going to change its position from the right side, a state it will stick to its position. And we can go ahead and click on the growth and use other sites. We can stick it to the left side if you want. As you can see it. And it shows you see that pink line, it tells you that it's a fixed in that position or that side, for example, now it's fixed in the bottom, you will see a pink line. It shows that it's fixed. And you can do it for all other side. I'm going to remove this one and I will copy and paste one over this. Just control C control V on this art board. As you can see, this one is a group and responsive resize is enabled. Now if you resize this one, everything was take to its position. If you double-click on this text and go to the manual, resize, you will see that it's tech to the left and bottom and the same for the other text. So the automatic think in Adobe XD it works very good. Like it knows which position each object should fix or should stay. But sometimes it doesn't work the way that you want. You can always come to the manual, resize and change the settings and the area that you want each item to stick. Now when we resize this, everything is working very good except the photo. We can double-click on it and move the photo the way that we want. And now we can resize it and we still need to fix the photo. I'll double-click on it again and move it like this. Now you can adjust the size of this profiles for any screen that you want. And everything works perfect. So here, just like this. Let me fix the size a bit, put it in the window, and you are going to show you something else. If I go to the art board, click on it. When you're resizing it, cuz responsive resize is open. It will move with the size or the resizing of the art part. There is something else I want to show you. Click in this group and go to the man. Well, responsive. Resize. If we disable the fixed width and a fixed height. Now if we change the size of the art board, click on it. When you are changing the size of it, it will change the size of the group or the profile that you put inside this art board as well. Because we disabled the fixed width and height. You can also fix one over the size. For example, we want to fix only height. So I'm going to disable the fixed width just like this. And if we change the size of the artboard, the width is going to change the size of the group. But if we change the height is not going to change it because it's fixed. So this is how fixed width and height works. Sometimes the O2 responsive resize doesn't work that way that you want. So we need to fix it. For example, this menu bar, I'm just going to copy and paste it in this art part. And I'm going to change the size of this art board, make it a bit bigger. And now if we change this one, it has the responsive resize enabled. If you want to change the size to the size of the art board. As you can see, the menu items are going inside each other and it's not working fine. So in this case, the responsive resize is not working the way that we want. So we're going to do it manually. What I'm going to do is to select each of these menu items. Let me move this 1 first. I will just move it close to the other items. I'll make sure that the space between them is the same. And now for all of the texts that you have on the minimum, I'm going to select them one by one. And I will disable fixed width and height and also make sure that they are fixed to the right and bottom. Okay, let's do it for the last one as well. We will do it for the first one as well. We forgot to do it for it. Now if you select the group and resize it, you will see it resizes the menu item as well, but the space between them is the same. We need to shrink that as well. So to do that, I'm just going to Control Z or Command Z and select all of the items on the menu, and then make sure they are not fixed to the right side. Now if we change the size of the group, it will change the space between them and also the size. Just like this, you can easily resize the mean use and anything that you want from one art board or from one size to another size without any hassle or without doing everything again. Okay, I'm going to remove this one and I'll show you something else about the responsive resize. It is called stacking. If he's like This menu, you will see it has this stack and padding below it. I'll disable the padding for it for now. When you want to swap between the menu item, for example, you want to swap post a job with the about us. You will do this normally. You will just move them like this manually. But stacking make this one very easy. If you just click on the group, the amino group, make sure you selected and enable the stacking. Adobe XD will automatically know that you want to stack them horizontally. So now you can just move them or swap them between each other like this. Make sure that you press on the Shift when you swap them to make a perfect swap. So we can just easily move this one with anything else that you want. Okay, let's move to another example. We want to stack these together, but first we need to grow them. I'll just select all of them, press on the Shift and select all of them, right-click and group them. And now if you go to the responsive resize and enable the stacking, it automatically tell you that you want to stack them horizontally. And now you can swap between them easily. So as I told you, press on the Shift to make a perfect swap. So just like this, you can move items around without any hassle. Let's test the stacking with this main banner. First, you need to group them together. They are not grouped. Select everything, right-click and group. And now enable the stacking. Select the group and enabled. Now you can easily move between the text and the photo, so easily move the photo to the left side. Just like this is very easy. By the way, you can have a group inside a group, and then you can use S tag for that group that you have inside another group. Let me ungroup these and I'm going to copy them. Control C, control V, move them over here. And I will stack them, or I'll put them under each other like this. So we'll use the vertical stacking. Let me group them together. And when you enable the stacking, it will automatically know that you want to stack them vertically and you can easily change between the vertical and horizontal like this. And then you can click on each of them, press on the shift and move them, swap them with each other. Okay guys, this will be the end of this lesson. Hope you enjoyed and learned something new. Now it's your time to go ahead and practice on this file. You can find it in the resource folder. Please don't forget the Windows user. Always end zip the folder and then open the projects. Don't open the project inside the zip folder itself. 13. #10 Plugins: Hi everyone, welcome back. In this lesson you are going to cover some of the plug-ins that will make your life much easier with Adobe XD. If you click here on the plugin panel and then click on the Plus button or discover the plugins. You will have this window. Don't forget, you need to be registered in Adobe Creative Cloud to be able to access these plugins. So we are going to go to the browse and we will go over here and install some of them. The first one is a UI Faces. And then I can, for design, I'm going to cover each of them individually, but for now let's install this. And then Laurie symposium, this is the text sample and you will have un draw. Okay. And the last one, not the last one actually we will have this one VC charts. And the last one will be colored designer. I think that said you can go ahead and check other plugins if you want. But for now these are the one that I like the most. We can also install this one, web export versus if you are designing for the web or you're sharing it with the developer, is going to help you. Let's close this window and go ahead and discover this. So I'm going to create the circle. And just to be able to demonstrate the plug-ins. For this circle, we can add a color. If you don't know what color to use, you can use this plug-in color designer. And this application has a lot of options. It will give you each of the colors with their shades and different tones of the same color. For example, you can easily add each of them to your assets. So we can add this to the asset if you want. Now it seems the Asset panel, if you go to the shades intense, you will find differentiates over the color that you've picked. This plugin will make your life much easier to find the color that you're looking for. Here we have ten so you can increase their numbers. You can go to the shades. And then you have color harmony. It will give you some motions that some combinations. So I will leave the rest for you to go ahead and discover. But we've saved some of the colors. Now they are in the color asset. If you go to the Assets and then go to the colors, we have all of them here we can easily apply to our objects. So this was the color designer. I recommend you to go ahead and explore more. The next one is icon for design. This one is for the icons, whatever I can you want, you just write the name. For example, we can write car. And like this, we have a lot of icons for the cars we can use for our design. This is a very, very useful plugin because in your UI design you are going to use icons a lot. So whatever you want, you just click on it. It will come over here like this. They are vectors as well. So let me change the background color of the circle. Let's make it orange. And this icon, we can easily change the color of it too wide. And if you go back to the plug-in again and write another name, for example, I will write sent. Just like this. We have this icon for sand, for the message or sense. So like this, you can make it bigger. Let me remove this one. We can move it over here because it's Victor. We can change the border size, you can change the color, we can do anything that you are. Let's increase the border size as well. So yeah, you can search for anything, email, Anything else you want. You can search and you'll find they have tons of icons. Okay, Let's move to the other plugin. This one is very simple, It's only for the dummy text when you don't know what to write in your text. This will help you. If I write over here anything, I will make this text area text and make the box bigger. And then click on one of these to fill the text. Except. And then choose the language and placeholder text. And then insert. Now you have the text over here. So depending on the size of your text area, it will fill the text area that you put there. Okay, now let's move to the other plug-in that we have, which is the UI Faces. And this is very useful for the profiles when you want to make a profile, pictures, it will help you. So for that, I'm going to create three circles. I'll duplicate them, pressing on the Alt, by the way, to duplicate them like this. Okay, let me remove this one. So right now we have four circles, we are going to make them profiles. To do that, I'm going to select them in the plugin. You can choose the source of the pictures. I will choose pixels, and then the gender, female or male. Then we have the emotions, we can make it happiness or neutral. Then we have the color. I'll make it black and you have some advanced options. I'm not going to cover them. You can come over here, click on the Select photo. This is for you if you want to choose a specific photos. But for now I'm going to just to go from here. And then apply randomly. I will apply some random pictures and see how it will work. Of course, you need to wait somehow because it's downloading pictures from the Internet. And now we have these faces or the profiles. So it's very easy to work with this plugin and it's extremely helpful. Of course you can change, I will change the source of the pictures and then filters. Maybe you'll make it female this time, we'll make it happiness. Let's make it belonged. And you will apply randomly. It's taking some time, but it's normal because it's downloading photos. So right now you have to belong this it applied for four of them. There is a mistake. I'm going to change the source and apply again. So guys, right now I just change the source to pixels and all of the other effects. I didn't choose anything, so it will change it randomly. As you can see, we have black loan day, female and male. Okay, I will leave you to go ahead and exploited this plugin MAR. Now, let's go to the next one, which is this one and Vc vector. For this one, you need a shape at least. So we have column, line and green. We can create this three types of charts. Let's try the line. I will just create. So easily created something like this. Of course, if you change the settings of the size of this dye and also the x's. It will change. For example, we change the line style to curve. Sorry, it has been groped with the other one. I'll just fix it. Then we'll click. And right now I have separated them. Let me remove this. And I'm going to add the ring one. So just like this, we created another ring chart. You can double-click on it, of course, and change the color because they are groped. That's why you need to double-click on them to be able to select individual parts. Let me remove this one and we will test the last one which is the column. I'll keep this the same or actually let's change somehow and create the chart. So yeah, just like this, Let's create another line. I'll make it curved and change the size this time. And let's create. So we have something like this. Of course you can go ahead. I can change the background because it's already a rectangle. I can change it to any color that I want. I can resize the chart. We are also able to change the color over the chart itself, for example, the line and the dots also the text. Let me change the color for this one. I'll make it or actually I'll get it from the asset panel. Let's make it this one. And then I will select this line. Makes sure that you click, click until you are able to select the line and change the color. We can change the color for the text as well. And like this, you can go ahead and customize the charts that you want to use in your designs. Okay, I think I'm going to remove this one and we are going to explore the next one. Okay, so the next one is say un draw. Let's go to the login. Over here you have the UN draw. This is a very useful one. It has a lot of Victors like these artworks. You are going to use it for your designs. They are very useful for the opening or the splash screens for the apps and also for the websites. For example, if I want to make finance app, I can use wallets or banks or anything or money. I'm going to use this wall if I want. So when you click on it, it will be copied to your clipboard. You will just Control V to paste it. So right now we have it and it's victory can just double-click on it and change the parts. I can change to this one as well. Let's make the same color. And this one as well. It's strange that I want to change this purple to red because I love pebble. But this is just for the demonstration. So you can use this, for example, for the splash screen. Let's create another artboard. I will make an iPhone 12 Pro. Let me remove this one. And I'm going to move this over here. We can make it smaller like this. And then you can put some information, some texts, and also you can have more than one security for the splash screen. And you can have Botox, for example, get started or register or anything. And this is the end for this plug-in as well and for the whole slogans, the last one is Web Export. I will leave it for you if you are a developer or a coder, it will help you a lot for exporting for the whip. I will leave that for now. But the rest of the plug-ins are very useful. You're going to get benefit from them. Now it's time for you to go ahead and explore these plugins. I'll see you in the next lesson. Bye bye. 14. Finance App Homework: Hi everyone, welcome back. In this section, we are going to do the homework. We will be creating this finance app application. We are going to create only to screen format to practice what we have learned in the previous section. I'll see you inside the first lesson. Bye-bye. 15. #1 Background and Credit Card Design 4K: Hi everyone, welcome back. Now that you know all of the design tools, it's time for you to practice and you're going to create this beautiful UI design for a finance application. You can find this file in the resource folder. I've already created them for you. You can go ahead and start creating it, or you can just follow me. We are going to recreate them from scratch. First thing we are going to do is to download phones. You can go to the Google Fonts and search for this font. It's rhombic. We are going to download it just like this. And then we have another one. Cairo. It's this one. So just click on it and download. And the last one that you are going to download is electrolytes. I think something like this, yet. Electrolytes and this is for the numbers is very good. And then for the icons you can come to this website, it's called flat icon. You can download any eye contact you want, even without registration. But if you want to download more, you can read just there. And if you want premium icons, you can subscribe to their website. It's very easy to download, and I've already downloaded some fonts for you. If you go to the resource folder, you can find this folder, It's called icons. We are going to use the plugin for the icons, but if you want some more icons on different icons, you can download them from this website. So the first thing you are going to do for the design, you are going to create the background. So I'm going to use the rectangle tool. And you are going to create a rectangle that is the size of the artboard, just like this. And then for the color, I'm going to press on the I. And then I will get the color from this sample. So we have the same background. And then you are going to fit the rectangle to the size of the artboard. Just like this. It doesn't need to be perfect because it will not show outside the art board anyway. Now right-click on this background layer and lock it so you don't accidentally click on it. Now it's background. And the next thing I'm going to do is to select the artboard itself, click on the name, and now enable the layout. This is for us to know where to place our items. First thing I'm going to create the text and this plus button. For that, I'm going to use the type tool. And then come over here and write my cart. Click on it. And then you are going to change the font over here, we will write how big we are going to use this font and then increase the size. Yeah, this size is good. Then I'm going to select my and change from regular to bold. Let's try extra bold or black. Now actually make it bold. And that's it for this one, you are going to come back to it and fix it more, but for now you will keep it like this. And the next thing I'm going to do is to play with the size a bit. Of course, the position as well. Now the next thing I'm going to do is to duplicate this text, press on the Alt or option, and move it over here. We're going to make this plus just like this. And then we are going to select it. And then you will change it from bolt to irregular. And then you are going to change the color. So we're going to use the color picker and you will get the color over the cart. To select the color picker again, press on the eye for that and get the color over the cart, which is this purple. Add disable the border. And then we need to create the circle background. I'm using the circle tool. And you are going to make a circle from the middle of the plus, press on the Shift and Alt together to make a perfect circle from the center. On the Mac alt option. Of course we disable the border as well. And now I'm going to move it over the circle in the layer panel. Make sure that the plus is in the middle of the circle. And then you are going to select it, select both of them, present the shift and select both of them, and then right-click and group them together. Now we can name this plus, and we are going to move it to its place, which is this area. And then you can move it around until you see it is aligned with the text. I'm going to change the cart. I will make it light from the regular. Just select it and go to the font. Make it light like this. And we are good. Now the next thing we are going to create, the carts. So I'm going to use the rectangle tool for that. And you are going to make something this size. Yeah, we are going to use the guidelines or the guys for that. Make a rectangle just like this. And then you are going to round the corners. It doesn't need to be exactly the same size, but if you can make it the same size, it will be better. So round the corners like this. I'm not going to move it a bit to make sure it's in the right position. I'm going to disable the guides so we can see the design better. Click on the name of the artboard to be able to select it and then disable the layout. Right now we can see it better and we are going to work on the design more. So the first thing I'm going to do is to press on the eye and change the color. We will get the color from here. And I means I drop a color picker. Basically, I'm going to adjust here a bit, make it a bit down like this. And then you are going to use the pen tool to make the lines. These lines will be like patrons inside the cart. So I'll just create it like this. And you know how to use the pen tool by now. If you want to make it round, you will click and drag. Okay, this one. Let's create the other one. Okay? By the way, I'm pressing on the escape to disable that pen tool. So if you want to create a new line, you will press on the escape. Okay, Like this is good. I think I'll just adjust this one. Double-click on it until you are able to select the points. I'll move this down a bit. Okay, I'll keep it like this for now. Now. Select all of the line, press on the Shift and click on all of them like this. Press on the eye and get the color from here. So you want the line color, make sure that you're selecting the line. As you can see it choose the color for the fill. We don't want it for the field, we want that for the border. So I'm going to the fill. And then I will press on this Plus to save my color, I already have it. And then we are going to disable the field, select all of them, disable the fill, go to the border and use this color. So now we have the color on the border. Okay, I'm still not satisfied with this line. I'm going to double-click on it and I'm able to select the points and then I'm going to fix it. You just follow me and see what I do. And then you can do the same thing. By the way, you can remove the points, just click on them and press on the Delete on the keyboard. Okay, I'll keep it like this. The next thing I'm going to do is to duplicate the shape of the cart, which is this rectangle. Duplicate it. We are going to use this to mask the lines, put it above the lines, and select the lines with the new copy over the shape of the cart, right-click and make the mask. Now the lines are appearing inside the card just like this. Okay, the next thing we are going to do is to create the MasterCard logo. For that you are going to create a circle. So press on the Shift and Alt to make a perfect circle like this. And we are going to disable the border for it. And for the field color, we are going to give it the gradient, linear gradient. We will use white in the both side actually. So one of the sides has opacity. So we need this side. We will make it white first. And then we are going to bring down the opacity just like this. Something like this will be good. And then I'm going to duplicate it. Press on the Alt and move it to the site or Command D to duplicate it if you want. So you have something like this now. I can now move them up. And of course we need to make them smaller. They are a bit big. Okay? As you can see, you will need to move some of the lines a bit. So I'm going to double-click on it until I'm able to select the lines. So this is the one. I'm going to move it just like this. You can also play with the points if you want to. Okay, I think I will move this line also a bit down. Okay, click outside to see the results. Now we are going to write MasterCard. We are going to change the color to white. We will need to change the font, but let's keep it like this for now. I'm going to bring down the size like this. And then the space between the letters. I'm going to make it 0, just like this. And we are going to move it over here. Let's make the m small like this. And you're going to change the font. We're going to make it Cairo. Just write the Cairo. This is the form that you're going to use. Okay? We are going to change it to semi bolt. And then we need to move it just like this. And we are good. Now I'm looking at my cart tickets. I can see that the space between the letters, he's a bit too much. I'm going to make it 0, click on it and make the space between them 0, and make it a bit bigger because it's smaller now. Actually I'll keep it like that. It's good. And now the next texts you are going to create a nice balance. So I will use the text tool. Of course. Go to the Text tool and you're going to write balance. We're going to use aerobic or actually let's use Cairo. Okay, we are going to use the light version of it and make it smaller just like this. Okay. Let's change this to the regular actually. Okay. Let's move it around. I'm going to change from regular to light again. Okay? Like this is good. Sorry. Now you're going to create the number, the amount or the money that you have in our cart, which is 50000. That sounds a lot. Okay, now select the number. We are going to increase the size. And of course we are going to change the font as well. We are going to use the robotic and I think are going to use medium or regular. Let's see. This is too much. Medium is too much as well. Let's make it regular. Okay, this is good. And we're going to move it to the right position. Make sure you align it with the other things. Okay? So the next thing is the number for the credit card. I'm going to use the text tool, of course. And you're going to use the stars, press on the Shift and then click on the eight. This is on the Mac, you have the stars. I don't know how, what is it in the Windows, but you should see the stars. So now you are decreasing the size and you are going to change the font. We are going to use the electrolytes. Let's make it smaller and move it over here. And then I'm going to duplicate this. Actually. This size is good. We're going to duplicate, press on the Alt. You can write the numbers just beside it, but this is not what you are going to do. So I'm going to duplicate it. Common D or press on the Alt or option and move it to the side like this and write any number that 1D. Like this, you are good. Make sure it fits or it's aligned with the stars. For the stars, I can see that they are very close to each other. I'm going to increase the space between them and make sure that you select it. And we are going to change the space between them. You can press on the Shift to make it go faster like this. Okay. Let's move this to the side. Something not to forget to mention the stars, they have border and the color is white because they are very thin. That's why I add some over the border, 0.5 to make it a bit thicker. Okay, now we are going to add the date. Sorry, I'll duplicate this one. I'm pressing on the Alt and move it to the side. And you're going to add the date. I'm going to use the same numbers, 8, 23. I hope in 2023, life will be better than now because we are selling the pandemic into 1021. Hopefully everyone is safe. Okay. Okay, perfect. We are almost done with this one. I will just select the background of the cart and we are going to add the drop shadow. First thing I will disable the border. I forgot to disable that in the beginning. And then you are going to add the drop shadow. Let's make it closer to see the shadow. As you can see, this is the shadow. Anyway, I'm going to play with it. I'll just move it like this. Yeah, Let's keep it like this. Actually. I'm going to make it a bit darker. Like this is good. The next thing I'm going to do is to go to the layer panel and I'm going to group everything together, anything that I used for the cart, I'm going to select them and group them together. So it's from this number. All of these, these are all of the text. And then you have these four, the MasterCard. So basically from here, press on the Shift and click on the first one, right-click and group. Now we have everything in that folder. I'll call it card or credit card. And just like this, we have our cart. So the next thing I'm going to do is to use the repeat grid to make the next step credit card. So make sure that you select the group for the credit card. Click on Repeat Grid then, and move it like this. Now we have our second credit card. And then I'm going to decrease the size or the space between them like this. Okay, now we have this. The next thing we are going to do is to ungroup this repeat grid. Just click on it. Sorry, click on the whole thing and then ungroup the grid. Click over here. Now they're separated. We can select them like this. They are in different groups. We want to change this one. The first thing you are going to change the background for the fill. I'm going to get this color, click on this one and get the color from here. Then we will go ahead and click on these lines. Click, click until you are able to select them. You can select them in the layer panel like this. And then we are going to change the border color for them to this one. And just like this, we changed. Now I can go ahead and change some of the text. First thing you are going to change the number. So you have something different. I will make this four. And then I'll remove the 0 as well. Just like this, you can go ahead and change the MasterCard or Visa if you want. You can just double-click on it and right visa. But for now I will keep it as master. I will just undo this and make it master again. And like this, we created the background and our credit cards as well. But the last thing I will change this number as well, just to have something different. Okay guys, Now you are done with this lesson. And also we created two credit cards with the background and also the my card and add that button. I'll see you in the next lesson and you will be continuing designing the first page. See you there. 16. #2 Buttons And The Rest Of The Screen Design 4K 2: Hi everyone, welcome back. In this lesson, we are going to continue with our design and I'm going to create this upper part of the background. I'm using the pen tool to create this shape. We will make this maybe later you're going to change it. But for now I'll just put it over here. Okay, Now let's continue creating our shape. Okay, now press on the I to get the color from here. And then you are going to disable the border. Select it and disable it, and then you're going to send it back. This is the one where I'm going to send it. Over here, just above the background. Let's rename the background. I will name this background BG. And the other part, you can also name it anything. I will name it background too. Okay. Now, I'll just adjust it a bit. Move it down. Something like this. Yeah, let's keep it like this. And now let's create the other part which is these lines. You are going to use the line tool. It's very, very easy. I'm actually going to create it. Not here. Over here. Yeah, let's create it here just so we can see what you're doing. Okay, I'm pressing on the Shift to make a straight line. And then you are going to increase the border. Something like this is good person in the eye or use the color picker to change the color. You already know by now. Let's increase the size of the border, but and the size is good. Then press on the Alt or Option to make a copy out of it. Okay, and click on this point and make it smaller. Then you are going to change the color to white. And then you're going to make another copy out of this, press on the Alt or option and move it like this. I think I'm going to make them smaller or shorter like this. I'll remove this one and copy this again, press on the Alt or Option to make another query. Now select all of them and move it up. As you can see, these dots and with the background that we just created doesn't go with each other. I'm going to remove this one and we are going to create another one. So let me move this in the middle, just like this. And then you are going to use the pen tool to create that background again. So I want a curve just like this to be below these dots. Try as many times as you want until you get it right. And move this down a bit. Okay, a thing like this, you are good. I just added a new point over here. By the way, if you have that Pen tool selected and you click on an empty area on the line, you can create a new point. Yeah, Let's continue creating or shape. And press on the I to get the color from here. And then you're going to bring it down again. And you can rename it background to or background anything that you want. So I need to adjust this a bit more. Move it up. And I think I'm going to adjust some of the points as well. Let's disable the border first. And I need to adjust the point that we have on the right, which is this one. Just double-click on it until you see the points. Okay. I'll move it over here. Okay, we are good like this. I'll keep it like this. Now let's create the other part, which is these buttons. I'm going to lock this part of the background as well. So you don't accidentally click on it. Now go to the rectangle tool and we are going to create the other bulletins sent, pay and bails. And to make the size right, I need to enable the grid's actually this is a good size, but I need the grid. So I will select on the name of the artboard over here to be able to see the layout. So we are going to enable the layout. And Then, okay, now we have this rectangle with round borders. I'm going to disable the layout again just to see the colors. I'm going to add the color to this one and go to the field. And you are going to add these gradient color to it. So we are going to make it linear gradient and click on each point. Then use the color picker to get the color from here. So this is one of the colors that the one we obviously need to swap them. And this is the other one. I'm just going to swap them just like this. Move this over here and this one over here. Okay, now we have the color that you disable the border, of course. And I think, I think these protons are big, so I'm going to enable the layout again, click on the name of the artboard and then enable the grid. We're going to remove this one actually because they are pick, you are going to make them smaller. Just to make it smaller like this. And I'm going to make the roundness a bit less. And we are good like this. I think. We are good. Let's remove this one and we are going to duplicate this one. I'm pressing on the Alt or Option on the Mac and distribute them evenly. Okay, now we have three buttons. I'm going to disable that, great again or the layout. And now let's move them. Just move them until you see that pink. Think between them just like this. You can see that they all have the similar space between them. Now we are going to change the color for the other two. We will use the same method. Use the color picker to get the color from here. And for the other side, we will do the same. Perfect. Let's do it for this one as well. Okay? And the other one, just like this. Okay, perfect. Now we have the base for our buttons. You are going to use a plugins, go to the plugins and you're going to use this I confer icon for design. You can also get the icons that you want from the flat icon if you want. And you can also find them in the folder, the resource folder. But I would recommend you to use this plugin, which is the icon for design. It's a really useful one and it will make your life much easier. The first icon, w1 a cent. So I'll just write sin. We will have this icons click on the one that you want, and it will be added to the output. Now move it over here. We are going to change the size. Just like this. Make sure it's in the middle and change the border color to white. Now the second one is a wallet or pay. Let's write the PE. You have a lot of icons for the PE. You can use this one if you want. Or I'm going to write wallet. And you have all of these. Let's see which one you want to use. Okay, I'm going to use this one. Move it over here. I actually didn't like this one. Let's try another one. Maybe this one. Okay, make sure it's in the middle and then you are going to change the color, make it white. Now this one is good, but we need to have consistency because the sand icon, it has the border only. So I'm going to write Send, and I'm going to choose an icon that is felt just like this. So I'm going to use this one in a state, the other one. So we have consistency between the icons that you are going to use. Make sure the size a similar. I will remove this one. Oh, sorry. Move this one in the middle. To make sure it's in the middle. I'm going to select the icon with the background, and I'm going to use the alignment tools, this one, now it's in the middle and change the color, of course, for the white. And then we're going to do the last one, which is Beals. Okay, let's search for the bill and see if we can have a good icon. Know, maybe transactions. We still don't have anything. Nyos, payment. Nope. This try this money. Okay, I will add this one, I think. Great. I will use this icon. You can also use the same icon, or you can change your icons if you want. You can go to the flood icon and use any other guy conduct you want. These are all of the icons that you can see in the resource folder as well. You can use it if you want to. For example, in a state of this wall, I can use this one and change the color to white and to use it for yourself. But for now we will go with this one. Everything inside adobe XD is better. Now let's write the set texts. This is very easy. It should be easy for you. We're going to use the aerobic fund. You should already have this font and change the space between the letters to 0. And of course we are going to increase the size a bit like this. And the color. Pick it from here, we need the same color. Perfect. Now go to the Selection tool. We need to disable the border as well. It's a bullet, move it over here. Let's make it smaller. And I'm going to duplicate it, press on the Alt or option and move it like this. Let's write PE, go to the selection tool and move it over here. Another cookie will be built. Perfect. Now we are good. I'm going to select all of these icons, bring the opacity down a bit. And now we are done with these buttons. They are really good. At. The next thing we are going to do, iss to do with this one, the statics and transaction. For that, I'm going to use the rectangle tool. You are going to make a rectangle just like this. Make sure that you create the same size or similar sizes shouldn't be the same. They're round the corners. And then we're going to change the color of the border first, move it over here. I think I'm going to make it a bit smaller. But before we do that, let's change the color to the linear gradient and get the color from here. The same that we did before the bottom. So you'll do the same for this one as well. Like this, we are good. Okay, now let's make it smaller. Let's move it over here and you are going to duplicate it, press on the Alt and make a copy out of it, and we're going to move it. Let's move it over here. Something like this. Make sure you have the space for the other items that you will create later. Now let's change the color. Here. We'll get this color over here. And for the other point of the gradient, we will get it from here. Now we have over the bottom's. The next thing I'm going to do the icons, I'll copy this text and such it in the icon for design plugin. We don't have any icons for that. Let's write stats. Maybe chart. Now let's see what you are going to use. Make sure that you have this artboard selected. And we're going to use one of these icons. I'll use this one. And this one. Let's see which one is better. I'll move on. Sorry. I'll just select both of them, press on the Shift, select both of them, and move it down. Just like this. So for this one, let's actually move this out. And I'm going to make this a bit bigger. And then change the color to white. This looks very nice. It's nicer than the old icon. I'm going to increase the size over the border a bit. And this one, I want to remove it. So for the other one transactions, let's see what we have over here. So for the transaction we don't see any icons that are going to use. I'm going to write arrow. And we are going to use something that represents in and out. Yeah, we have this one, we can use it. Let's sorry. Make sure you select the other onboard and then do that. So it will add to that port. This is good, but it is not nice actually, I didn't like that look. So that's why I'm going to create my own arrows using the shape tools is very easy. We cannot edit this. Unfortunately, we cannot round the corners or anything. So that's why I'm going to remove this. Or before you remove these, I'm going to create other arrows. So I will use the line tool to make the base over the arrow and then increase the size over the border. Then we will make this one longer bit and make the ends around and change the color to white. Now use the triangle toll. We will rotate it like this. We will move it over here, disable the borders, and stretch it like this a bit. And then we are going to round the corners and we'll make this one a bit taller before we round the corners of the triangle. Okay, you are good. Select all of it and group them together. Now press on the Alt and duplicate it. Go to the flip tool, flip it like this. And now we are going to move them around. I'll remove this one. Now this one is much better. Move it over here. You're going to make it a bit smaller and make sure it's in the middle. Sorry. I'll make it a bit bigger like this. Here. I think we are good like this. Let's make them a bit smaller. Okay, perfect. Now we've made these two bottoms. The next thing I'm going to go east to make this part. So I'll just use the rectangle tool, person in the eye and get the color from here. Okay, we are good. Now, disable the borders. And now we are going to make this circle. We're going to make the text as well for the statistic and transactions. But first let's do this just to know where everything will go. So obviously all of these needs to move up a bit. I just select all of them, press on the Shift and select all of them and I move them up. Now, let's say create the text for now. Our rights statistics. And then we are going to go to the selection tool, move it over here. And we need to make this one bolt or medium. Make it medium actually. And you're going to change the color. Press on the eye and get the color from here. Okay, now we have this, the other texts you are going to duplicate this one, press on the Alt and move it down. And you're going to write income and payments. And you're going to use the same font, but you're going to make it light. Of course, we need to make it smaller first and then we need to make it light. Perfect for the color. I'll press on the eye and get the color from here. Okay, You're good. Okay, Now we will go to the icon for design and search for the arrows. We're going to use this arrow. For this area. I already searched for the arrow. That's why I didn't do it from the beginning. So if you don't have the icon design open, just go to the polygons, open the icon for design and set for the arrows. And you should be able to see this arrow. So I just made a smaller and got the color from the second text. Now we need to do this line. We will just use the line tool and press on the Shift and make a line in this area. So it starts from the beginning of the text and ends with the arrow. We are going to bring down the opacity and the size of the border will be one. Now, click on this text and this arrow, press on the Alt and make a duplicate out of it, just like this. Okay, I'll keep it like this. Let's change this to a transaction. Just write transactions. And for this one, we will write translation. Actually spent translation is transaction ancestor. So in the homework 1, I just write a translation. I'm sorry for that. It shouldn't be transaction. Okay. We are good now. I will just adjust the position of this. Alignment is very important. Make sure that you take good care of alignment. Let's move this down. It should be in the middle of the both texts. Okay, perfect. Now click on the artboard. Click on the name of the artboard, enable the layout. I need to adjust the position of these. So obviously we need to move these two icons to the left a bit to align with the other icons that you have or the bottoms. Ok. Select all of these by though you need to press on the shift just to remind you to select different items. So I will select all of these and move it a bit. And this line obviously needs to move. I need to make it longer. Just like this to fit with the others. Okay. Now click on the art board again and disabled the layout. Now let's create the last part for this one. I'll make it a bit bigger, or actually let's keep it the same or a bit bigger and get the color from here. Now once I above the borders, and we're going to search for the credit cards on the icon for design. I searched for this guy and maybe they can see something similar to our icon, but I cannot see it. Obviously, I'll just write card. We are going to use one of these. Let's use this one actually. I'll just make sure that we have chosen the right one. Okay. You need something similar to that one? I'm not sure which one to use actually, let's try this. First. Let's click on this art board and then add it. This one. Okay? I was not sure what to choose. Make sure to choose the same one. If you want the same results, but you can change it if you want. You can choose different icons if you want. So I just made it wide and brought down the opacity a bit. Actually. Yeah, let's make a line over here and then increase the size of the line. This is to make like a scan for the credit cards. And then round the borders. Move it over here for the credit cards. Well, they'll pass these. Not working actually. Here is not working the way that we want. Well, this is not working. Let's select both of them and increase the opacity. I'm sorry, I didn't select the line. Now we have something like this. Let's select both of them. And I want to change the color to something grayish, like wide grayish. I didn't get the color that I want. Let's change it again. Now actually, I'll just click over here and choose the color like this. And you're going to choose the same color for the line. But before I do that, I will select the credit card, copy the color could then select the line, go to the color, pays the color code over here, so you have the same colors. Okay, now we are good. The next thing that we're going to do is to add the other icons that we want. But first let's group these together. And I'm going to make it a bit smaller. We are good like this. Okay, perfect. Now let's go to our favorite plug-in and search for the icons. We'll search for the home. I'm going to EIA should be something similar to other icons. That's why I'm going to use something that is filled. Maybe we'll use this one. So as you can see, because I have selected the group for the credit card, this home is inside the group. That's why I'm going to remove that. Let's add another icon. Now it's here. Let me remove this home, the one that's inside that group for the credit card. And you're going to move this one over here. Make it a bit bigger. Like this, change the color to this one. And now let's set for the sittings. And let's search for the gear icon. This one is good. Let's make it bigger. Actually this home and this guarantee, they are both have the straight corners. I1, something that's round. Okay. I think I'm going to change them. Let's search for the home again. And you're going to choose something that is around. Okay, This one looks nice. Let's change the color. This one. And then change the size. Let's remove this one and move this. Sorry, I select the background. That's why it's important to log of this things that are in the background and you don't use it that much. But for now, let's keep it the same. Let's search for the Settings icon, something that goes with this icon, which is this one. This is the perfect one. Sorry, let's make it Speaker. Okay. We are good like this. And then you're going to change the color to something similar and replace it with this one. Make sure it's in the same position. Yeah. We just remove the other one and make sure that the space between them is similar. As you can see, the whole thing is not in the middle, which is this one. We need to move it in the middle, just like this. When you're moving it, you will see the line that tells you it is in the center. But I'm going to select all of them, this icon, and the whole thing, and then make sure the space between them is the same. Okay, Let's move the icon as well. Okay, Perfect. Now we're almost done. The last thing I'm going to do is to select all of these icons or bottoms and enable the shadow for them. So if you close, you will see the shadow. I'll enable the shadow and you are using three by six, as you can see. For all of them won't be the same settings. And these are the default settings for this one as well. And I think that's it. This is how we create the first page. I hope you enjoyed and learned something new. In the next lesson, we are going to do the second page. I'll see you there. Bye-bye. Something I know you are watching get which is this one. Before you go, let's move it in the middle. It was not in the middle. And yet k. Now you're good. Don't forget, you need to practice on this lesson before moving to the next lesson. I'll see you there. Bye-bye. 17. #3 Second Screen Design 4K: Hi everyone, welcome back. In this lesson, you are going to create the second screen. At the second screen, these much easier than the first one. The first thing you're going to do is to copy the background from the first one that we create it and paste it in the second one, select the background and click on the Log button to unlock it. Control C, control V. On this artboard, we will do the same for this part. Click on it, click on the Lock button, control C, control V. Click on this artboard and paste it. Now it's in its position. And the next thing I'm going to copy, this takes control C control V. Click on this artboard and paste it. Okay, now we have everything that you want it. I will bring this text down. It should be aligned with the send money. Okay? All right, send. And let's write money. Okay? Okay, now go to the plugins and icon font design. You are going to search for an arrow, something that represents the back, something like this. But let's find what else do we have? Okay, I will choose one of these. This one, just click on it, it'll be added to your artboard. Move it over here. Now I'm going to select the artboard so I can enable that layout. Just innate blood so it can adjust or align your icon just like this. Oh sorry. I'll make it a bit bigger from the corner. Okay. And then we are going to change the color to white. Now, let's search for another icon. This time you're going to search for the menu. We have this burger menu. I'm going to add it. I don't know why came to this place, but it's okay. Sorry. I will just bring it over here. Make sure that the size is similar to this arrow. Let's change the size of the border and seem okay, I'll keep it at three for now. Now we are going to lock this background. Sweden accidentally click on it, so you just need to select it and lock it. Okay, Let's lock this one as well. I'll just align it to the art board. Make sure that it's covering the whole artboard. And then right-click and lock it. Okay. Now let's go back to the burger menu. I'm going to change the color to white. And we are going to move it to the side. Just like this. And then double-click on it until you are able to select the points. I'm going to shorten this. This is just for the design purpose to be something nicer. Okay? Maybe I will make them closer to each other. Like this. By the way, you need to double-click on it to be able to select individual lines because they are group. Okay. I think I'll keep it like this for now. Now. Let's create the bottom. I'm using the rectangle tool, not the circle rectangle. I accidentally select on the circle. So something this size will be good, rounded like this. Let's make it a bit smaller and press on the I to get the color from here. Now go to the icon font design, the plugin, search for an arrow. We will use one of these arrows. Let's use this one. Or actually, let's search more. I'll use this one. Okay, Now move it over here and rotate it, press on the shift and rotate it to have 45-degree like this. Okay, and now I'm going to duplicate this. Press on the Alt or option and move it like this. Press on the eye and get the color from here. Now I'm going to rotate this to be defaced the other side, which is this one because this is to our account. Let's make it a bit smaller like this. And I'm going to select the artboard ends able the layout. Now, let's move this in the meadow, change the color to white. Then we are going to duplicate this one. Click on it, press on the Shift and move it over here. Now select it with the background and use the alignment tool to make sure it's in the middle. Now we are going to rotate it to face the other side. This is okay. So this one is good. You can use the alignment tool to make sure that these icons are in the middle of the bottom. Okay, you're all good now. So the next thing we're going to add this text, it's very easy. You'll just use the text tool and write to your own account. As you can see, both of them are the same to your own account and to your own account. So in this case, you are going to change, went over it. And let's go to the settings for the texts. You are going to make the alignment to be in the middle and change the size a bit. We are using the aerobic font. We are going to make it regular and change the color to this one. I'm using the color picker or eyedropper to change the color. Actually, let's disable the border. Okay. Now we have this, I'm going to duplicate this one and move it over here. And of course you're going to change this text. Okay, that's good. So I just forgot to change it in the sample project, but for this one, I'm going to change it. So you're going to make it to your bank account. Okay, I think like this is good. So the last thing that we're going to do is to disable the border for these two buttons, I'm going to select them, select this one and say build the border for this one as well. This above the border. I'm going to enable the shadow as well. For both of them. Are sorry, not the border, but the shadow. Okay, Now we are ready to create the search area, which is this one. So I've used the same man credit card. I'm going to copy this one. Make sure that you select the whole group. If you go to the layer panel, select this art board, and then go to the layer panel over here and make sure that you have this artboard. Double-click on it. Now we have everything for this artboard. I'm going to find that credit card. I'll just select it over here so I can see it. So it's this one. This card, one cartoon. I'm going to copy went over this. So Control C and come over here, paste control V. Now we have this one. Okay, I'm going to click on the artboard. Click on the name and enable the layout. Now we are going to change the size. So something like this is good. Now let's disable the layout again. You need to select the opera itself. Disabled that layout. Now double-click on this one. We are going to remove everything, all of the text and logos that you have only leave the shape of the card. Ace no longer a cart. This is the area for the search. So I'm going to use the rectangle tool to make this search area inside it. And of course, you're going to fit it in the middle and also rotate the corners. Now I'm going to press on the shift and select both of the search area and the background and use the alignment tool to make sure it is in the middle. It's good like this, but I need to move the search area a bit down. So just move it down like this. And now go to the text. You're going to ride this text sent to your mobile contact. Let's change this to E, Okay? And you're going to move it just like this. And now we are going to write search. I'll just duplicate this one. I press on the Alt and move it down to make a duplicate. We already know by now because we've been doing this from the beginning of the course. I'm going to make this a bit bigger. Like this is good. And then we're going to use our favorite plugin to find a search icon. So good to the plugins. I come FAR design, right, search. You have all of these icons. Choose one of them. I'll choose this one and move it over here. And then for the color, I'm going to use the color picker to use the same. Okay, I think it's very light. Let's use this one. Okay, we are good. Now. Now you're going to create the contacts. We are going to use the same statistic and transaction icon and name everything else. So I'm going to select them, select everything and press on the Shift and select everything like this. Oh sorry. Okay. Control C. I just group them first and then control C and then click on this art board control V. Now we have this one. I'm going to duplicate this. Of course. We will make three of them. Okay, let's adjust them more. I'm going to select this and move it up. Actually, I will select all of them and move all of them together like this. We still need to adjust them. Let's move this up a bit. Make sure that the space between them is the same. Okay, Now I'm going to remove the icons. Sorry, I remove the pancreas. Remove the outcomes. Oops, just double-click until you're able to select the icon. Now what I'm going to do, I will ungroup everything and group this one. Select this one, ungroup it, select this one and group it no longer able to select the profile areas altogether. And we are going to use the UI faces. This plugin. We're going to use the pixels. And I'm not going to filter actually. I'll keep it the same. I'll just apply randomly, click on the Apply randomly and see what we will have. Okay, I didn't like it. I'm going to apply again just to see what you will have. It's taking some time. Again. I don't want all of them to be girls. You can change the settings if you want. Let's change the Unsplash. I will apply randomly. So you can do this apply randomly, but there's another option. You can select the photos yourself. We're going to step after this. Let's see what we will have this time. Again, not what I want. I will apply. Again. You can just skip all of this, applying randomly and go ahead with the selection. You can select the photos that you want, and we are going to do exactly that. So let's go to the Select photo. We'll wait for the photos that come in the side. Okay, now pick any photo that you want. So you need to select three photos because you have three profile areas. These three are good. And now you have these beautiful profiles. I'm going to select all of them like this and change the border color to this color. And then as you can see, this profile is not aligned with the others. I'm going to select it and make sure it is aligned. And now the last thing you are going to change this text to names. You can write any names that you aren't. I will make this one Meghan and the other one myth may get Harry. I know these names sounds strange and familiar to you. Let's change this one to the number I will write plus 96 for. You can write any number that you want. This is just for the design purpose. Copy this one, and I'll paste it over here. Change the numbers, change the country code. This one won't be Emerick and cons recruit. So the first one was Iraqi country could 96, I think it's that. Let's change this one. I'm not sure which country coated with this one, but I'm just writing some numbers like this. Okay, perfect. Now we are done with this screen as well. We have successfully created these two screens. The beautiful finance app, you should be proud of yourself at the beginning in the first section of your course, you are able to create something like this. So make sure to practice on this and I want to see your result over the same homework. In the next section, we are going to cover the prototype and you are going to bring this app into life. But first, I will show you the basics and then we are going to work on this app to bring it to life. I'll see you there. Bye-bye. 18. Everything About Prototyping : Hi everyone, Welcome back to this exciting section. In this section you are going to cover everything about prototyping in Adobe XD. We will start with the basics and time transition. Then we are going to talk about the components. Days. After that, we will cover the overlay scroll and drug prototype. Then we will cover voice, sound, gamepad key, prototyping. At the end, we are going to cover auto animate and we will be animating the design that we created in the previous section. See you inside the class. 19. #1 Basics and Time Transition: Hi everyone, welcome back. In this section we are going to talk about the prototype. And in this lesson you are going to talk about some of the basics and timed transition. You can find this project in the resource folder for the prototype section. So you are going to cover all of these, but in the beginning we are going to cover the basics and also the time transition. So we'll start with this one. And now you are in the prototype mode, but you are usually will be in the design mode when you are designing your art boards. And then we want to prototype them in any made them. You'll go to the prototype over here. And now in the prototype mode, you are going to give actions to each button or anything that you want in our design, we can give it an action. So the first thing is this button, you are going to connect it to this art board. Just click on this arrow and drag it and connect it to this art board. Once you connect it in the right side, you have these settings. We have the trigger. It means what action you should do until this button work. We want to use the top for now. And then you have the action. We have type of action. We have transition, auto, animate, overlay, scroll, Previous Artboard, ODU, and speech playback. We are going to cover all of this. For now. You're going to go with the transition. And then we have a destination. The destination is already said because we connect that is put onto the sign up artboard. And then we have the type of animation. We have all of these types of animation. We are going to use these off for now. And then you have easing. This is how your animation will act. And let's use ease out for now and the duration of the animation, you will make it three seconds. And then you have more actions. If you want to add more actions, you can click on that plasmodium. Let's play it over here in the play button. We are going to play our prototype. And now if we tap on the let's start, it will go to the other artboard which is sign up. We are going to sit an action for this arrow. So from the second art board, when we click on this arrow, it will go to the first one. So just double-click until you're able to select it and then connect it. If you want to remove, just click on any area and drag it out like this, it will be removed. Now if you click on this one without connecting it to any output, you can press on this plus button. Now we can add all of these settings again. We can use tap and then transition. We will make it Previous Artboard. So now when we click on this arrow, it will go to the previous artboard. This is an easy way to set a button or anything to go to the previous artboard without you going and connecting to the previous artboard. So I'm going to click on this connection again. And over here I'm going to change these settings. We will change the animation to see what is the difference. So this is a slide left. If we change it to the slide right, it will be opposite. Let's change it to slide up. So you have all of these types of animations. So yeah, we, I have all of these types of animations. You can go ahead and play with these animations to make yourself more familiar with this animation and also with the introduction section. Okay, I will make this one slide up the animation and then you are going to cover the easing. This changed the way that these art board animates. You can also change the duration. As you can see, it's very slow now, let's make it 1 second. I will make it for a second again. Okay, That's all that I wanted to cover in this lesson. The type of actions you are going to cover them in the coming lessons. Now the last thing that I want to show you is Sarah removing a connection. Now if I want to remove this connection, just click any area of the connection and drag it out like this. Or you can just click on it and press Delete on the keyboard like this. So this is how you remove a connection. Okay, Now we will move to the time transition. I will remove all of these purple ones. With this time transition, we want to create a loading screen. So when you click on the let's start, it will loot and then it will go to the second artboard. So for that, I'm going to duplicate this artboard. I press on the Alt or Option on the Mac. And now you will create a rectangle that covers the whole art board. We're going to change the color over here to purple. And then bring down the opacity to something like this. Okay? That's good. And now we have this loading icon. You can find it. It's over here, it's inside this project, and then it will fit it in the middle of the art. But so when you press on the let's start. It will go to this loading artboard and then it will go to the second orbit, which is this one. I'm going to duplicate this one as well. Press on the Alt or Option, and I will move it over the other side. Now I'm going to duplicate this one. And I'm going to rotate this icon because you want this to rotate or to spin actually. One more time. We need to make more copies. I'll move this over here. Just a tip. Only want to select an art board, you just click on their name like this and then you can select it and applicative. Okay, this one, I'm going to rotate it to go to the first position again. So now we have all of these artboards. You are going to use the time transition between them to make the spinning loading icon. So the first thing I'm going to do is to go to the prototype mode. And then you will click on this. Let's start connected to this artboard. And we're going to use these sittings. We will use Trigger tap transition. And it will go to the second art board, which is onboarding to see you're going to use these sittings transition, I mean, action will be transition. And then the type of animation, I'm sorry, type of animation you are going to make it slide, right? This one will be good. Using the duration will keep it the same. Now between these, say, loading or on-boarding art boards, we are going to use timed transition. So for that you are going to select these onboarding Artboards. You'll just select it and you will connect to each other. One thing to remember, you need to select the artboard itself because time transition only works with the Artboard not and the items inside the art board. Now you have selected this rectangle on this art board. If you go to the trigger, you cannot see time. I will remove this connection and then click on the name of the artboard to select the artboard. And now we are going to connect it to the other artboard into trigger. You have time now. So you'll select time. And then you're going to choose the transition and also the time. So the delay, you are going to make it two seconds. Then you are going to do the same thing for the other art boards. You'll just click on this one. Sorry, I already connected this one to the other one. I'm going to remove it like this. And now click on the name of the artboard and you're going to connect it to this one. You're going to use the same settings for this one as well. We're going to use the same settings. So Adobe XD is saving all of the cities that we've entered previously. Sorry, make sure you select the artwork itself and then connect it. For this one. We will use the time again, and we will use the same thing. Now if you go ahead and play it, I'll click on this one and play. Now click on the let's start. As you can see, we did demonstrate we have used the animation slide left. That's why this is happening. I'm going to select each art board and change the animation to none. Just like this. When you click on the art boards, the settings for the connection will appear on the right as you can see. And you're going to change the animation to none for all of them. Let's play it again. For this one also, I'll make it this off. Okay, let's play it and click on the start. As you can see now we have our loading screen. I'm going to set something for this arrow as well to go back to the first screen again, sorry, I'm using the arrow keys by the way. Now let's go to the last screen. I'll click on this arrow and connect it to the first one. And we are going to use these sittings. Now if you play it again, we can now go to the first screen, just like this. Let's start. And then we can go to the first screen with this one. We can change the animation for the loading screen if we change the type of the action, by the way. So right now I'm going to do that. If I just click on this screen with this onboarding screen, click on it and change the type of the action, make it auto animation. We will change it for all of the onboarding screens. And I'm going to talk about auto animation in details in the coming lessons. For now, just use it. And if you play it. Let's start. As you can see, you have this nice animation. Totally different from the first one. Okay guys, hope you enjoyed and learned something new. In this lesson, we talk about the basic of prototyping and also the time transition. In the next lesson, you are going to talk about the component states. I'll see you there. Bye bye. 20. #2 Component States: Hi everyone, welcome back. In this lesson, you are going to cover the component states and you're going to show you how to use it in the prototype mode. Okay, you are going to create all of these stuff, but the first thing we're going to work on will be this bottom on and off. The first thing we are going to make them component, I will select both of them, pressing on the Shift, then right-click, and then make a component. So now it's grouped and they are component. Over here we have the component state, we can add more states. So this lesson is all about the component states. If you press on this plus you have a new state and hover overstate, we're going to use the new state for now. And I'm going to name this one on. So this switch icon will be on, on this date and on the state it'll be off. Okay. So now for the on-state, I will select it and I will change the colors and positions. We will move this to this side. So in this switch is on, it will be in this side, and the color will be great. You're going to change the color to green. This green is nice. And then the border for this circle, I'll make it green as well. So just like this, we've changed it. Now we have the default of and are. Now we will go to the prototype mode. And you are going to put this in action, click on this component, and then go to the default state. Now you are going to add a new interaction, come over the interaction, press on this plus for the trigger we will make a tub. For the animation or action. You will keep it like that. Destination. This is important, you have to make it on. So you want it to go to the online, we tap on it and everything else. We'll keep it the same. Now let's play it and see how it will work. Click on it and now it's on. If you want to make it off, we need to make another interaction. So I will select on this component and then I'll go to the on. We're going to add a new introduction. You'll keep everything the same, but for this one destination and we'll make it default state. And now, so the change are applied here. We can make it on and off. Okay, now let's move to the, another example for this one. So I'm going to make this one select actually, okay? And then I'll select them and making them component, you can right-click or you can make it over here, right-click, make IT component. Now we have something like this. We have default one. I'm going to make a new state. I'll make this one selected. We're actually, I'll make it checked. Let's make it check. And I will double-click on this one. I will make this one check. This is for the default state. For the checked one, I'm going to change the text. Of course. But before we do that, what I'm going to do for the default state, we'll keep it like this. For the checked, I'm going to remove this one. I'll move it in the middle. And then we are going to change this one to check, as we said. And the color for the books. We're going to add it like this and the border, we are going to disable it. Or actually we'll make it. Now. Let's disable it. And for this one we will make it white. Now for this component we have two states. We have checked and default state. We will go to the default state. We will add an interaction just like we did for the previous one. For the destination, we will make it checked and everything else will be the same. Let's go to the checked at interaction and go to the destination, make it default state. Now if we play this, we have something like this. Check and check, check. Just like this. Okay, now let's go to the other one, which is this one. So the idea is the same, like you will do the same process for this one as well. But this is for you to understand it better. So we are going to select both of these right-click and make it component. This is the first thing that you are going to do. So this component has one state which is default. We are going to make another state. We will make this one selected. Okay? For the selected state, I'm going to change that text to select it. Obviously test to be like that. And then I'm going to duplicate this circle. You can create a new one or you can just copy and paste Control C Control V, change the color to white, then select it, press on the Alt, Shift together and make it smaller. This will make it smaller from the center, just like this. Something like this is good. And then the below circle, click on it and change the color to green. I'll make it to the same green that you have for the previous one, which is this one. Okay, now for this component we have two states. Have a default state and select state. Now you'll go to the prototype and any made this for the default state, I'll add an interaction for the destination. I'll make it selected. Everything else will be the same. For the selected. We will add an interaction destination. We will make it default state. And now if we play it. So you have this one and this one. Very easy and nice. So right now you can create these and add it to your projects. These are checked and unchecked both arms. Now let's move to another example which is this bottom with a text. So I'm going to select both of these right-click and make it component. For this one, I'm going to add a new state which will be hover over. We have this. I'll keep it like this, and I will add another state. But first let's play with the hover over. So when you hover over this proton, it will change the color. Maybe let's make it. You need to double-click on it, make sure that you are selecting the background itself, not everything together. So double-click and tell, I select this background. Okay, we have it now. I'll enable the background, change the color to something else. I'll make it this one, okay. And the text color, I'll make it white. So this is the hover over state. Now I'll add another state. This one will be selected. So when you click on it, it will change the color to something else. So first thing we are going to change the background color. Again. We didn't select the background itself. As you can see, everything called change. So double-click on the component grope until you are selecting the background, which is this one. Now you have selected, I'm going to change the fill color to something darker like this. And then the color for the border, you will choose the same color. Okay, now we have three states. For this one, we have the, have our overstate default state and selected state. Now we'll go to the prototype mode to animate this. So for the default state to XD automatically created an interaction because it's hover over. So when you hover over your clique or your mouse over it, it will change it like this. Now we will go to the hover overstate, which is this one. We will add a new interaction and it will change it to select it. Okay, now let's go to the selected state. This one we will add another interaction. So from this one it will go to that default state again if we know play it. So because I selected the selected state and I played, that's why it started from there. I'm going to choose the default actually. Let's go to the default and play it. Now, we have something like this. And if you click on this one, it will go to the default state again. And that's all about it. Now we will move to the last one. But before I go to there, I'm going to change the text for this one. Because when we selected, if I go to the selected state, I will change that text to the selected. This not necessary, I just wanted to do it. Now. We have something like this. Okay, perfect. Now let's go to the last example over the component's state. This one will be expansion menu. Okay, so we have these two screens on top of each other. We are going to make it a component and we will make components stayed out of them. So we have these two, as we said, I will put them on top of each other, just like this. Let's move this one as well. Okay? I'll select both of them like this. Right-click, make IT component. This will be the default state. We are going to make another state for this. I'll just add another one. In your state. It will be expanded or expand. And now I will double-click on this component group and move this screen to the side. Just like this, you have expanded the menu. Okay, now we have two states. We have the closed state, which is the default one, and the expanded state. If you go to the prototype. And we will go to the default state, we're going to add an interaction. This interaction, we don't want it to be for the whole screen. So I'm going to select only the burger menu that we have on the left. So I'll just go to my screen, double-click until you are able to select this menu bar or the burger menu. And then come over here, add an interaction and trigger will be tapped and then the destination will be Expand. Now you're going to add another interaction for the whole screen and it will be for the expanded state. So let's go to the, Okay, now we have the states go to the expand and you are going to add a new interaction. But double-click until you are able to select the screen, this screen, and then add a new interaction. We will make the destination default state. Now if we play it, we have something like this. So when you click on this area and nothing will happen, you have to click on the burger menu. But when you close, you can click anywhere. Also you can change the E zinc as well. If you make it snap and change the duration, it will have a definite different animation. Let's make it wind up. Yeah. So let us change the settings for the first instruction that we had for the burger menu, I will just click on it. Go to the default state, click on this interaction. Let's change the animation for it as well. And now we will have something like this. It's very nice. The last thing I want to do for the expand that when it expands, just click on it, go to the expand the state. And then I want to change the colors. So this gray, I'm going to change it to something else. Make sure that you select the gray background and you will know because the colors will appear in the right side. Now let's change the color to green, something like this. And then for this one, I'm going to change the color for it to black or dark gray. Actually. Let's see if this color will work. Now actually, we are going to go with the dark gray. Yep. And then I'm going to select these icons that we have over here. So I'm going to select them, press on the Shift and select all of them like this, and change the color to white. We have left one, but I'm going to change that as well. Now, select the text, press on the Shift and select all of them, then change the color for them to white. And one last icon that I need to change, which is this one. And we'll just click on it. Okay, this one. Okay. Now let's play again and see how it is. Okay, perfect. It works like a charm. Okay guys, so this is all about the components day that I wanted to cover with this feature. You can create a lot of different things. So now it's time for you to go ahead and practice with these files and also create your own. I'll be waiting for your examples of this work. Please share it with me and you will have a homework for this section, I'm going to give you a the coming lessons. I will see you in the next lesson. Bye bye. 21. #3 Overlay, Scroll and Drag Prototype : Hi everyone, welcome back. In this lesson, you are going to cover the overlays, scroll and drugs. Firstly, you are going to cover the overlays. We have these two art boards. So you want, when you click on this cart, this pop-up will come up. So it's very easy. You just go to the prototype mode. And then we are going to connect this cart to the other barred port. And over the right corner in the settings we are going to use tab and transition. You will make it the overlay. We can use the auto animate as well, but I'm going to cover that later. For now. We are going to change it to overlay. When you make an overlay, the background of the second artboard will disappear because that will be an overlay pop-up. And now if we play it, we will have something like this. You can change the animation as well if you want. Right now you are using the dsolve animation, but if you want to change it, you can go to the Animation and change it to something else. Okay, now let's move to the scrolls. I have prepared these two art boards for the scroll demonstration. If we play this one, you can see we cannot scroll it down because the size of the artboard is the size of the screen. But if you make it bigger, then there will be some content that we need to scroll. So if you scroll, you can see the other content that you have over there. Many times you want some of the items not to scroll with the screen. For example, we have this letters. Now if we play it, you can see there are scrolling with the screen. We do want them to scroll. We just want them to be fixed on the screen. So just click on it. And then on the right side, you have this option, fixed position when scrolling. Now, when you scroll, these letters will stay in their position. Okay? Now we have another thing. You can actually, for example, 10 of these letters. When you click on it, it will take you immediately to the B section or a section or any letter that you want. For example, we want to connect B to the B section, C to the C-section. For now, I'll just go to the prototype and click on this letter and connected like this. Now if you check it, you can see that the destination is B, and we connected the letter B to the B section. You can also always change it from here, but we will keep it like that. And now if we play it, it's already there. Now if you click on the B, the B section will go up. You can change this over here. If you don't want to go up a lot, you can change their position over here. I think we need to move it up more. So right now we have something like this. So whenever you press on the B, a B section will go up. We can do the same thing for the other letters. For example, for the C, I'll just click on it and connect it to the C-section. Now if we click on the sea, the sea will go up. And then you have B and C. Okay, now let's move to the other escrow type which is called the group's growth. This is the icon for the groups across you can use it, but first you need a group. So in this case you have grouped all of these numbers. Sorry, this is the background. So these numbers are grouped. I'm going to use the cytochrome group. For this group, you can use the horizontal, vertical, or vertical and horizontal. In this case, we have used the vertical. Once you enable the group scroll, you will have these handles to crop the area that you want your group to scroll from. So just like this, we enabled the ropes accruals. And you can always crop it. Let's crop even more. So you had basically this is the idea, now it's your time to go and play with this. I will go to another example which is this map. We want to move this map around like this using Groves calls. So this one is group. We can just go ahead and enable that score groups. But this time you will enable the horizontal and vertical, which is this one. So if we play this one now, we can move this map all around, just like this. Okay, we are done with the scroll groups as well. Now we will move to another thing which is drugs. We want to use the directory eager for this art board, I'm going to duplicate it. Go to the design and duplicate this one. So what do you want to do is to move this music time marker. I don't know what you call it, but I call it this. I want it to go from here. It will start from here. And when we drug it, it will end up in this area, just like this. So let's go to the prototype and add the drug trigger. I'll click on this. Yeah, this circle and drag it over heavy connected to this art board. For the interaction, make a drug and for the action you will make it auto animate. For the second are both. We will do the same thing. I'll just double-click on this circle and connect it to the first art board. Sorry, connected like this. And then we will use the same settings. Okay, Now let's play and see how it works. As you can see, it's a really nice thing. You can just drag this up and down, actually left and right. Okay, this will be the end of this lesson. Hope you enjoyed and learned something new. Now it's your time to go ahead and play with their everything that you've learned in this lesson. I'll see you in the next one. Bye bye. 22. #4 Voice, Sound, Gamepad Key Prototype : Hi everyone, welcome back. In this lesson you are going to cover some interesting stuff about the prototype. So if you come over here, I would just add this. For example, you have speech playback or do you playback and also voice and keyboard, gamepad. We are going to use all of this in this lesson. For now I'm going to remove this link. We don't need it. Okay? And I will go to the design and I'm going to duplicate this one. For this artboard. I'm going to use the pose icon in this area. I'm using the icon for design. We have already downloaded this in the plug-in lesson. So just go ahead and search for the pose. And you're going to use went over this. Let's use this one. I'll move it over here. And you're going to change the color and make the same size over the play button. I'll press on the eye and get the color from here. And then you're going to change the size. Make sure it's in the middle. And this one, you will remove it. So right now we have this one. Now I'll go to the prototype. And you are going to add an action for this Play button. Many click on it, it will go to the post. And when you click on the post-it or go to the play. So good of a prototype and link the play button to the other art board. I will click on the link so I can change the settings over here. I will make that type of action or to animate for now. And if you play, we can now just change it. For the pause button. I will do the same thing. I will just click on it like this and then drag it and connect it to this artwork. Now if we play it, we have this one. Post play, pause play. Okay. Now we will go ahead and change the triggers for these actions. I will click on the Play, click on the connection, and change their trigger. We will make it key and gamepad. And I'm going to press on the S are actually p for the play and for the action, we will keep it auto animate. For this one, we will do the same click on that connection key, and this time you'll make it S for the stop. Now, if we play it, I'll click on this artboard and play. Now with the keyboard, when you press on the P, it will play. And when you press on the S, it will stop, just like this. So this is how we are going to use the keyboard and gamepads. Okay, now let's move to another trigger, which is the voice comment. I will choose Voice over here and I will write anything, for example, play. For the other one, I'm going to write stop. Okay, and now if we play this one, now with the voice, you are going to trigger these actions. Pressing the space and say Play. And now it's playing. If you press on the space and say stop, it will stop. Let's press on the space again. Play. Stop. So just like this, you can give any comment or voice command to your triggers. Okay, now, I'll change the trigger to tap again for both of them. This is where the play and this one. You will make it tap as well for the posts. And now you're going to use something else. Now if we preview this when you play it with the tab, nothing is playing. If you want to play a music, what you are going to do is to give another interaction to the second art board. Make sure that you select the artboard itself, not the items inside the art board. Click on the name, then add an interaction and change the trigger to time. And now for the type of action you are going to make audio playback, make it audio playback, and choose any file that you want. You can go to your computer and choose any music that you have. For me, I've already uploaded this one, Facebook music. And now if we play it. So what is happening here is when you are playing it, it will go to the second arch. The second arch that has another interaction which is triggered by time and the action is audio playback. It means when a certain time passes, it will play a music automatically. And in this case we have 0 second. So whenever you play it, it will immediately play another music. So something else that we have is speech playback. As you can see, I just changed it to speech playback and now I'm writing something. Here. I'm going to write hello, I am a funny and serious duck, just, just for that. So now in a state of playing your music, it will play or it wouldn't read this for us when you play it. Just like this. We'll read this sentence for us. Hello, I am a funny and serious dog. You can also change it to any other voice that you want. Hello, I am a funny and serious dog. Okay guys, this is the end of this lesson. Hope you enjoyed and learned something new. Now it's time for you to go and practice on what you have learned in this lesson. I'll see you in the next one. Bye bye. 23. #5 Auto Animate: Hi everyone, welcome back. In this lesson, you are going to cover the auto animation. This is a very important part of Adobe XD and it's a very exciting one. You can find this project file in the resource folder. So you want when he personally descent, it will go to this art board. The first thing we are going to do is to go to the prototype mode. I will click on this one. As you can see, I've already created one. I remove this one and you are going to create a new one. Click on it, drag and connected to this artboard. Let me move this a bit away from the first one just to make it more clean. Okay, now click on the connection and come over here. You are going to use auto animation or auto animate. And we will keep everything else the same if we play it. Now, nothing pretty much happens. It is just a fade from one orbit to another one. We want to change that and make some animation. So I'll go to the design. One thing, anything that you want to animate between these two art boards should be available in both artboards. So for example, if we want to animate this search bar, first, I will group everything about this search bar. I'll select all of the thing and group them together. And the next thing you need to rename it, go to the layers, sorry, over here. Go to the layer and rename your group. I'll rename it search bar. Don't forget this part. Anything that you want to animate between the two art boards should be available in both our boards. The first thing we're going to group them, and then you are going to rename the group. And the last thing is to copy this one and paste it in the other art board. So it should be available in both artboards and they're the same name. Now we have the search bar in the first artboard as well. We want to animate it in the second art board. So I'll move this down. We want it to come from below and then turn out the opacity. So right now, if we play it, go to the prototype mode and play it. If you click on the Send, we have this little animation. Okay, let me make an action for this one as well. Just to make things easier for us. So when you click on this arrow, it will go to the previous artboard. Just like this. So you have this little animation. Basically the idea of auto animate is like this. Now anything else that you want to animate should be groped and then should be available in the both art boards. And they're the same name. So I'm going to group these together. You know, you have to press on the Shift to select more than one thing in your artboard. Okay, we have this now. The last thing I'm going to select each of them and rename them in the layer panel. I will select this one, go to the layers. This is the group, right-click Rename. And I will name this Lana. This one will be Megan, and this one will be hairy. Okay, now I'll select all of them, Cookie Control C, and then go to the other art board. Click on the name to make sure that you select it and paste it over here. Now we want these to come from the below again, put them in the below and bring down the opacity just like this. Now if you play it, as you can see, they are coming from the Baylor. It's a very nice animation. Okay, now we are going to animate more stuff in this screen, we have a transaction and statistic. You are going to animate these as well. These two are already grouped together. We are just going to change their name sexually. As you can see, it's a bit hard to select it because you have search bar behind it. We previously paste it over here. Just to make things easier, try not to put things on top of each other when you are copying and pasting item between two art boards and also try to grow them before you start doing the auto animate. In this case, I already grew up this one. I will just rename it in the layer panel. I'll name this one transaction. And then the statistic you are just going to select it. This is easier because nothing is behind it. Just selected easily. Okay, we have this statistic and then I'll go ahead and select these. All. I will select everything about cent, group them together. And then we'll rename it to send. And then with the pay and bells, we are going to do the same thing, grab them, and rename them. So you are doing this because you are going to copy this and paste it in the other art board because you want to animate these items between two art boards or between both Arbus that we have. Okay, so now we want these bottom, send PM bells to count from the top area. I will copy them. Click on this artboard, paste them over here, and you will move it up. Move them up like this. And then bring down the opacity for all of them. And for these as well, I'm going to select them, make sure that you select them in the layer panel. It will be easier for you because there are other items behind, especially transaction. It will not be easy for you to select it. So I'm going to select it from the layer panel and then I'll copy them, Control C, and then over here control V. Now we want them to come from top as well and bring down the opacity. Now if we play it, we will have something like this. As you can see, cent pay and builds on statistic and transaction go up and everything else come from the bottom. It's a very nice animation. And you can do a lot of crazy animation where this auto animate things. It's a very nice thing and there's a lot of possibilities with it. Okay, now we are done with this. You are going to animate the top area, which is the carts and also the buttons that we have. So we are going to copy these cars on pasted in the other art board. We're going to animate this icon and also my card text as well. But before I do that, I need to rename these cards. I will just select them and right-click and rename them because both of them has the same name. We need to give them different names. So it will be card one on cartoon. I will select them with the text and this icon, Control-C, click on this artboard Control-V. So you want them to come from the right side? I'll move them to the right side like this. Okay? And then you are going to bring down the opacity. And the next thing you are going to do is to group these together. The two, your account and to your bank account. I'm going to select the text with the icon and the background. And you are going to grow them. We want them to animate as well. So group them together and rename it. You will rename this to your own account or your own account. And then the other one, we are going to grow up it just like the other one. Rename it, and I'll make this one your bank account. And now we are going to select them, both of them with the send money, copy and paste it. Actually, I'm not going to bring these icons. Let's send only or let's take only these two button when the send money, I'll paste it in this artboard and it will move it to the left side like this, bring down the opacity. Okay, now if we play it, you have something like this. It's very nice. Okay, now you will go and animate the last thing which will be the menu bar. The one that we have in the bottom, which is this one. The first thing. Like everything else, we need to group everything together. This one is a bit hard because you have too many things behind it. Okay, we have this gun. I will group it and then I'll rename it scan. And then I'm going to select these icons with the background. As you can see, there's another thing behind this Home icon. That's why I'm not able to select it. I will go to the layer panel and select it over here. So this is the home. I will just press on the Shift and select with the background and with the scan. This is the background. I'll rename it to the background Background menu. I will select this one. Then we have, sorry, press on the command actually or Control and select these together. And the last thing we have, scan, okay. Now copy them and go to the other art board and paste them over here. So for this one, I want to bring this down, we want to come from the bottom and it will bring down the opacity to 0. And now if we play it, Let's go to the prototype. Play it over here. And now you have this nice menu slideUp, slide up and down. Okay, One thing that I just notes now, the search bar is not any mating is just coming from opacity. It seems like we have deleted accidentally without knowing it. So go ahead and animate this again. You know, the first thing you are going to do is to copy and paste it in the first art. What? Because the search bar is only available in the second art board. I'll close this one. And now I'll go to the layer panel. I'll just check what happened to the search bar in the first art board. As you can see, it's not available. I will just click on the first art board over here just to see the layers that we have. As you can see, there is no search bar where we have removed it accidentally. I will copy this one and paste it in the first one. And we'll move it down to give it the same animation that we had and make the opacity 0. Now if you play it, it will slide up with everything else. But what if you want to give it another animation like the auto animation is not all about sliding up and down. We can give it a scale animation. I will just move this up. Or actually let's just control Z. And now he will give it a scale animation in a state of sliding up, scale it down, bring down the opacity. And now if we play it, we have this nice scaling up and down animation or the search bar. So basically what is auto animate? Anything or any item that you want to animate between two Artboard. That item should be available in booth artboards and under the same name. And then auto animate will animate that difference between them. For example, one item in the first art board is small. Adding the second artboard is big. Auto animate. We'll animate the difference between them. For example, it will go from small to big with a nice animation. So basically this is the idea behind the auto animate. Now it's time for you to go ahead and practice with this file. I will wait for your results. I want to know what you're coming up with this auto animate thing. I will see you in the next lesson. Bye bye. 24. Prototype Homework: Okay, Perfect. Now that you've finished this section, it's time for a homework. What I want you to do is to download the file for the prototype and redo everything that you have learned in this section. And don't forget to share it with me. 25. Some Advanced Techniques: Hi everyone, welcome back. In this section, we are going to cover some advanced techniques in Adobe XD. We will cover color and number scroll effect, character input, prototype, glass morphism, 3D animation and 3D transform. I'll see you inside the class. 26. #1 Color & Number Scroll Effect: Hi everyone, welcome back. In this lesson, I will show you how to make scrolling number in Adobe XD. First you are going to create our design. I will make long rectangle like this. It'll be like a line. And you are going to round the corners and make it a bit thinner like this. And then what you're going to do is to enable the shadow for this one and disable the borders. And the color will be white. Now we will WK this copy and paste Control C, Control V. And just like this, you'll make it smaller and we will change the color for it to something greenish. Ok. Now you will make the circle a soccer for the slider. Okay? And for the stroke or for the border, you are going to make it inside actually not offsite, make it inside like this. And you're going to increase the size of it. Okay? We'll keep it like this and the color we will make it purple. Okay, Now we will make the place for the numbers. Make it round like this. And then you are going to create a peak for it. I don't know what do you call it in English, but something like this. It will be like a speech bubble where we will put our number in it. You'll change the color to this purple for this one as well. And then select both of them and disable the border for them. Okay, now we are going to move it a bit over here and we will add the numbers. I'll go to the Text tool. And I want to write the numbers of our hair, our right one. Enter two, enter three, Intel number nine. But I'm going to change the color to something darker so you can see it in the white. So just like this, alright, all of the numbers and tell nine. Actually after nine it'll be 0, okay? Now I'll move it over here. And you are going to duplicate it. But before we dedicated, I'm going to change the size. Let's make it bigger. Okay, something like this is good. Now let's duplicate it. And for this one I'm going to write more numbers. So after 0 it'll be one again. And I will write it until nine. Okay, we have this actually I added a 0 as well at the end. So we have something like this. Now, I will select both of them, change the color to white, and then grow them together. Now Alice leg this part, copy and paste it over the text, know selected with the text, press on the shift and select both of them, right-click and make a mask. Now the numbers are appearing inside this mask. Only. One last thing I'm going to do is to group all of these together, select with the number and group them together. Now they're all one group. Okay? We're going to add a background as well. I'm going to use a rectangle to make a dark background. You get dark and use square brackets to send it back. Okay, now I'm going to duplicate this artboard, press on the Alt or Shift and move it to the site. Now you are going to move this circle over here with the green line. And you are going to move this over here as well. And we are going to double-click on this group until we are able to select the numbers. And then you are going to select one of them and move it up like this. Then the other one, we are going to change it as well. Let's make it something like this. And now you're going to go to the prototype mode. And I will select this circle, connect it to the second art board. And you're going to use the Dirac trigger and everything else will be the same. Now if you play it just like this, we have the scrolling number. Now we can do the same thing for the other art board. I'm going to go to the other art board, slate on this circle connected to the first artboard and use the same settings. Now we can easily move this up and down and the number will change just like this. It's a really nice effect. I'm sure you'll be using it a lot. Now let's move to another sample. We are going to use the colors instead, the number this time. So I'll go to the design mood. And I'm going to remove this art board. And then for this art board, I'm going to remove the green area. Click on it and remove it. Now select the white one, change the color to gradient, and now move this handle off the gradient to the left. This point, and the other point will be on the right. And then over here we are going to add more points and change the color according to these colors. So this one will be red. Or actually I'll make this one red. And then I'll make another point over here, change it to this color. Another point over here. Let's move this as well. Change it to this color. You can add point like this as well. So just like this, we created a color slider. Okay, I will keep it like this. Now what I'm going to do is to duplicate this one. You can duplicate it by pressing on the Control C, control V. Or you can press on the Alt or option and move it up. Just like what I'm doing now. And then we are going to change this one. I will ungroup this and remove the numbers. We don't want the numbers. And you don't want the mask as well. We only want this background, or actually I'm going to remove this background as well. I will add a circle. So I'll go to the circle or ellipse tool and make a circle like this. Move it over here. I will move this down. I'm going to change the color later. For this one, we will disable the fill and he will make this one smaller. You'll make it fit inside this slider, just like this. And then the color. Let's make it white. And this one also you'll make it white. Let's disable the borders. I'll make it a bit smaller, something like this. This one also you will make it smaller. Move it over here. Okay? Something like this will be good, is to move it over here. And now we have done to change the width of this one to fit inside the circle. Okay? Like this is good. Now you will duplicate this circle, Control-C, Control-V. And now the color slider, I will move it up with the command and square bracket. Make sure it's behind the copy that you just created. Select both of them, just like this. And right-click. Then make a mask. Now I will use the other copy of the circle for the borders, but obviously I lost it. That's why I just double-click on it. I will select the circle, Control C, and then go out over their group, then control V. Now we have another circle. I will just move it over the other one and disable the fill, enable the borders, make this border insight and also increase the size. Obviously, I didn't select the circle. Let's select it and then we are going to increase the size. Now, it is changing. Okay, now we have our design ready. The last thing I'm going to do about the design hour, grow these things together. So let's just close up. I will select this one and this circle. Right-click and group them together. Obviously I didn't select them. I'm going to select the background our look at, so we don't select it. Right-click and lock. Now, I will select everything here, right-click and group. Everything is connected. I'm going to duplicate this one. And then I will move the slider. Let's move this circle. Just like this. I'm using the arrow keys this time to move it. And then this one you are going to move it as well. Okay, and double-click on it until you are able to select this color and move it just like this. Okay? Now we will go to the prototype. Okay, Now click on this circle, double-click until you are able to select it, then connect it to this output. And you are going to use these sittings, dragon auto animation. We will do the same thing for the second art board, and we will use the same animation. Now if we move this around, we have this nice color scroll. Okay guys, hope you enjoyed and learned something new. Now it's time for you to go ahead and play with this scroll numbers, scroll colors. I will see you in the next lesson. Bye bye. 27. #2 Character Input Prototype : Hi everyone, welcome back. In this lesson, I will show you how to create text input prototype inside adobe XD course. You can download this file from the resource folder. We have this thing over here. The first thing I'm going to do, I will put this keyboard inside this art board. We're going to use it. The second thing I'm going to do Easter go to the rectangle tool and I will create a rectangle that covers the whole artboard. And then I will make it black and enable the background blur. And we're going to give it a bit of the color like this. And we will decide what the border. This one should be above everything. I'm going to rename it. You'll rename it background one. Or actually I'll rename it background blur. Okay. So you have this now. Make sure it is above everything. The only thing that will be above this background will be the keyboard and also the cart. So this is the keyboard, it'll be above it. And then we'll go to the cards. First, I'm going to rename the carts. I'll rename this to maybe 11. Then you are going to move this above the background that you just created. Okay? Now you are going to duplicate this art board, press on the Alt or option and move it to the side to make a duplicate of it. Now we are going to change this cart to an input area or text input area. I'll make it bigger like this. And then with the alignment tool, I'll make sure that it's in the middle of the artboard. It is in the middle. And then I will double-click on it for actually I'll make it a bit bigger. And then we are going to remove everything inside it. And you're going to change this text to input the amount you want. You want to send, okay? And you're going to change the font to aerobic. It can use any font that you want. Okay, I'll make it a bit bigger. Move it over here. I think I'll change the semi bold to irregular maybe or medium. Let's make it to regular. Okay. I'll duplicate this one. Press on the older option and make a duplicate of it. Okay. All right. The dollar sign, I'll make it bold or medium. Then we are going to make it bigger, selected, and increase the size. I'll just make sure it's in the middle. Okay, Now the next thing, I will make this one a bit smaller and you are going to make a line. This line will be area that you are going to input the text. You'll make it white. And then you will have this blinking line that shows a type area. It will make it white as well. Let's align these together. And then I'm going to select all of them. Like these two lines with the dollar sign and put it in the middle, just like this. And the last thing we are going to do is to create the bottom. I'm going to use the rectangle tool. We will disable the border around the corners, move it in the meadow, make it smaller a bit. Okay, Let's write, Send. And then you will change the color to dark gray. Move it in the middle. I think we need to make it a bit smaller, okay. And then we will put it in the middle and then we are going to bring down the opacity of it because the bottom is not active. When we enter something, then it'll be active. Okay, so we have this. Now I'll go to the prototype. Or actually before we do that, I will go to the design, select the background in the fairest art board. We need to disappear this because we don't want that background in the first screen. So make sure you select it. Bring down the opacity. And for the keyboard, we're going to bring it down. And then bring down the opacity. And now we are going to go to the prototype and any made this. So you want, when you click on this cart, it will go to this screen. The input area or the text input area will appear. So the settings are this, make sure you use the auto animate and these sittings. So let's play it. I'll click on this artboard and play. And now you have something like this. As you can see, the keyboard is coming from the fate is not the sliding up. There's something wrong with that. I will go and fix that. I'll just go to the design mode again and see what's wrong with the keyboard. As you can see, the keyboard has been removed. I don't know why this happens sometimes, especially when you put something outside over the art board, it will be removed. So make sure that you have a bit of the item or the object inside the art board and then bring down the opacity of it. So I'm going to go to the second artboard, copy this keyboard, paste it in this art board again. And now we have it. I'll move it down again and bring down the opacity. So as you can see, I left a bit of the keyboard inside the art board so we don't lose it again. As I said, I am not sure why this happens, but to avoid this issue, make sure that you have a bit of it inside the art board and then bring down the opacity. So right now, our keyboard is sliding up very easy. And by the way, to go to the previous artboard in the prototype mode, you press on the arrow keys left and right. Okay, Now I'm going to create the blinking effect. I will duplicate this one. Or before I do that, I will name it blank and then I will duplicate it, press on the Alt and make a copy out of it. Okay, I'll go to the design mode for this copy that he created, this blinking line. We're going to bring down the opacity for it to 0. And now in the prototype mode, we will click on the artboard and we will connect this art board to the other one. And we are going to use the time trigger. Make sure you click on the art board itself to have the time. I already discussed this in the previous lessons and use the same settings. We will use the 0 seconds. For this one, you will do the same. Don't do this. Click on the artboard itself and then connected like this. And you are going to use the same setting time, 0 seconds to animate. And now if we play it, as you can see, this is blinking and it's very nice. It shows that this is the input area. Okay, Now you're going to put some numbers. So I'm going to duplicate this artboard, press on the Alt and make a copy out of it as a currency for some reasons we have this connected to the second one. I'm going to remove it. You'll remove the connection. Okay, now you'll go to the design mood. We are going to put some numbers over here, go to the design mode, and you are going to duplicate this one, move it over here, make it one. And then you're going to change the will make it regular. And then you will move the line. But let's move this a bit close. And then we will move the line to this side. Okay? Now the next thing I'm going to rename this, I'll rename it one. And you're going to duplicate it. In this art board. We will keep it to one, but they are going to make this opacity 0, the opacity for the line. So you'll have the blame kink effect on this artboard as well. For the second orbit of the blink, I will double-click on the keyboard until I'm able to select number one. And then you are going to connect it to number one artboard, which is this one. And you are going to use these sittings, tap auto animate and everything else will be the same. To create the blink line effect, you are going to connect these two together. I'll select on the art board connected to this one, use the time trigger and everything else will be the same for this one as well. I will click on it. Make sure you click on the artwork itself and connect it to this one. And we are going to use the same effects or the same settings. Now let's play it and see how it is. Okay, press on day 11 is entered just like this. Now let's create another number. We are going to use the same procedures. I will duplicate this one, the fairest art, but for number one, press on the Alt and duplicate it. You're going to rename it, double-click on it, and make it five. I'll remove this connection. And then we are going to go to the design mood. And we're going to duplicate this one. Oh sorry. Okay, WK, this one, make it five. And then move it to the side a bit. Now we want to move this line to the right side. Okay? And the next thing we are going to duplicate this to create the blink effect for the line. And for this one you are going to bring the opacity for the line to 0. Okay, now we'll go to the prototype mode and give some actions. So I'll go to the prototype mode. Okay, in this art board, we need to press on the five. Click on the five and connect it to this artwork. I use the tap trigger and these settings. And then for the low band blinking effect, I'm going to select on this art board connected to the other one. And you are going to use the time trigger 0 seconds and other settings. For this one, we'll do the same. Okay? Now let's play and see. Okay, press on the one. And then five. As you can see, we have an issue with FIFO and with all of the numbers because for each of them we have two art boards. For number one, I'm for number five, we have two artboards and they are they are in the law because you give it the time trigger. They are living between each other. We are going to fix that. I'm going to show you how to fix that. It's very easy. As you can see, the blink state has two artboards. Number 1 has two artboards, five has two art boards. We need to connect both of the blinks to number 1, both of the number one to number five. Right now, only one over the art board is connected. For example, if you go to the blink, only one of them, which is this one is connected and the first one is not connected. We need to do that for this as well, so that we'll click on this keyboard until I select on the number 1. And then we are going to connect it to a number one art board. So this way we will fix this issue and we're going to do it for the other one. So this artboard is connected to number five, which is this one. We are going to connect this one as well. I will click on the keyboard until I'm able to select number 5 and connected to number 5 art board. Okay. So we have both of them connected. Now you will not face that issue that we just face it. Okay. Now let's play it. Number one, Number five. So without any issue, everything is working. One thing that we forgot to do, ease to activate the scent number. So when we press or when we input one that sent should be in the photo pasty. So I'm going to make this one photo pasty for all of the artboards. Okay. Let's play it again. Now send is inactive. If you press 1 or 5, the scent will be active. And now the last art board, I'm going to create a whole WK this. And you're going to maybe remove the keyboard. This will be the final screen, okay? We will remove the keyboard, it will go down. Okay, and bring down the opacity. And this one will be in the middle. I'll make it a bit bigger like this. And okay, let's move this down with the texts. Complete or close. Actually, I will write close. Okay. We are going to remove or change that text. We're going to write, you have sinned or your payment was successful. Our case always very hard to write this word. Okay. And then you are going to move this in the middle. Let's remove this line first. And it will select both of these. Move it in the middle. I will duplicate this text. And our right, you sent. I'll make it well, let's bring this down first. And we will make it the above text smaller. Okay, I will change this from regular to light. And I will make it smaller. I think. Something like this will be good. And now the last thing you are going to go to the prototype mode and gave it an action. So when someone press on the sand on this screen, it will go to the final screen. So I will select on this button and connect it to this one. The trigger will be tough and auto animate. And then when you click on the Close, it will go to the first screen again. Now let's play. So we have this one. Sorry, let's click on the first screen and play it like this. 1 $0.05. As you can see, we have the same problem because you have two screens of five. We have to connect both over the five to the final screen. Right now, only one of them is connected. Let's connect this one as well. So this one is connected. We are going to connect this one as well. And then you're going to play, Let's go to the first one. If you close it, it will go to the first screen, just like this until your numbers sin. And then close. You enjoyed and learned something new. Now it's time for you to go and practice on this project and share your results with me. I'll see you in the next lesson. Bye bye. 28. #3 Glassmorphism: Hi everyone, welcome back. In this lesson, you are going to talk about the glass morphism. I'll show you how to achieve this look in Adobe XD. You can find this project inside the resource folder's, download it and open it. And together we are going to recreate this glass credit card. So the first thing that you are going to do is to create a new art board. Sorry. Okay. How good the art board and create a web size art board. And then you're going to create a rectangle, I'm sorry. Good. Authentic tangle. Create a background. Sometimes you accidentally click on the artwork itself. That's why that happened. Okay, we will choose the gradient. You already know about the gradient, and we are going to use the color picker and get the color from here. For this one as well, click on it, choose the color picker, get the color from here. Okay, now we have the background ready. We can move it down with 3D. In the next lesson, we are going to talk about the 3D transparence, but for now, keep it like this. And next thing you are going to copy this text. We don't need to recreate it. And also this one as well, because 30 is enabled for this scene, it is behind the background. Now, I'll just make it smaller and disable the 3D. Okay? Now let's create these circles. I'll just make a circuit like this. And then you are going to change the color. We will make ingredient. And then we will use the color picker. But obviously we don't need to use copycat like this because it will take only fill. We need to come over here, make it a linear gradient again. Sorry. Make it linear gradient and choose these points. And then you are going to use the color picker from here and get the color from this circle. Okay, you have something like this. Now, I'm going to disable the border and replicate it. Press on the Alt and move it up. Sorry, I'm accidentally clicking on this text behind it. Adobe XD has this very annoying problem. For example, in this case, you have take us behind the circle when we try to move it with the mouse, it will always select that text. So right now I'm using the keyboard arrows to be able to move it. So right now it's outside of the texts. That's why I'm able to move it with the mouse. Let's change the color for this one as well. You'll make it to blue. Okay. I will select this text and lock it. But even if I look this one, when I tried to select this one and move it, it will still click on that looked on, even though it's locked, you still clicking on it. This is very annoying. I hope Adobe XD fix this. Right now I'm using the arrow keys to move this circle down. Now you are going to create the glass effect card. I'm going to use the rectangle tool. I'll make a rectangle. I'm going to copy this sample. Let's bring this in the new output, sorry, click on it, control C or press on the Alt and move it over here. Are going to rotate it. Let's move this down. Okay. I'll make it a bit bigger like this, you are good. So right now we are going to recreate this cart. I just rounded the corner, submit. Next thing we are going to do is to enable the background blur. Now let's play with this sittings, the opacity and amount over the polar. We'll make this one 33, and this one we will make it 0 again. Okay, One thing I'm going to do is to delete this annoying texts. I will unlock it, right-click on it and look and remove it. We will remove it for now because it's very annoying. Okay, now we are going to change the color for the border to white, and we will make the size 0.5. Next thing to create a glare effect, you are going to copy this and paste it in that place. We will use Control C, Control V. And we're going to use the gradient color on it. We will move the points side and this side. And then you are going to disable the background blur for it. And then we're going to go to the gradient. For this one, we will make it white and bring down the opacity to 0. So here's the opacity brain get to the 0. And you are going to move this up a bit. Yeah, Let's keep it like this. And we're going to bring the opacity for the whole layer down like this. Okay, the next thing I'm going to make this one a bit thinner. So click on it. And we are going to make it a bit thinner for both layers because you have two layers now. And then for that glare layer, which is this one, I'm going to disable the border. We don't need that. Okay. And, um, I think I'm going to change the corners. Let's make a 60. 60 is good. You'll do this for both layers because you have two layers, Okay, For this one, we are going to make it 60 as well. Okay, Now we are good. The next thing we are going to do is to add the text. We are going to use the text tool, right? Payment. While I have a very big font, we are going to bring down the size. Let's make it 11. For now. We are using anaerobic. We are going to change it from bolt to the light. Okay? And let's move it to its place. Because it's good like this. Let's add the tote, okay? And you are going to bring down the opacity for it a bit. Let's keep it like this. I'll go to the icon design or icon for design. We have this plug-in we already installed together. I'll set for the cart. You're going to use, went over these icons. I'll use this one. Here is it, I'll move it over here and you're going to change the color to white. And then you are going to enable the background Blair for it. And let's increase the opacity a bit. Okay, Now you have that. The next thing we are going to do is to do the Apple logo. I'll search for Apple over here. Here we have the logo for the Apple. I will add it. Let's move it over here. Actually, I'm going to edit it over here. First. Let's make it white or actually are going to give it a gradient color, linear gradient. And then you're going to make this side, which is this one, white. And the other side, we will make it white and bring down the opacity to 0. Let's move this up. Just like this. We created this very nice effect on Apple logo. Okay, Now let's move it over the cart. It should be in the middle, a bit on top. And next thing you are going to add the name. I will duplicate this text. Over here. I'll write my name on a UB. And then you're going to change it from light to medium. And you're going to make it smaller. Make it eight. Okay, Now you have it here. Perfect. Now we are going to create the number, although the kit, this logo, bring it over here. And then I'll use the text tool to write the number on the card. I'll just write a random number. Okay, Let's make this logo very small to fit with this one. Okay, For the number, I'm going to enable the background blur and increase the opacity a bit over here. Let's group them together. I select both of them, and I group them. Now let's rotate them and put it in its position. Sometimes the rotation tool doesn't appear in all of the points. You have to try and see in which point that the rotational up there. Okay, Let's move this down a bit. I may rotate it a bit. Actually, I'm going to use a ruler to make sure that this is right. Oh, this is aligned with the other things. So you know how to use the roller. You will go to the site over the art board and drag a line like this. And now let's rotate it like this. Now it's good. I'll double-click on the group and make this one smaller and then move it to the right place. And just like this, we created our card. I'll move it down a bit to be aligned with the name. And now we are going to select everything and group them. First. I will click on the background to lock it so we don't select it. Select everything about this cart and group them together. Right-click Ungroup. And I will make it a bit thinner, maybe. Okay, Now let's move it over here. And I'll move these circles behind it to show the beauty of glass morphism. And this is how you create the glass morphism effect that can use this for anything. Many people use this for icons. It's a very nice effect. And now it's your time to go ahead and practice on this file. You can find this file in the resource folder. I'll see you the next lesson. Bye bye. 29. #4 3D Transform and Prototype : Hi everyone, welcome back. In this lesson, you are going to cover the 3D transform controls and you are going to make an animation with the prototype mode. We are going to create something like this. Let me play. So you are going to use the 3D transparent create this beautiful prototype design. Okay, Let me close it. Over here. We have everything that we need. I got all of these from the previous lesson. We have already created this in the glass morphism lesson. So you can copy and paste it over here. Or you can just go ahead and open this project. It's in the resource folder. It's called 3D transform. You will have something like this. So right now, all of these things are not 3D, they are flat. And we've done in prototyping, but it was all in 2D, only, not 3D. We didn't touch on the three transference. For example, if I duplicate this one, move it over here and make some changes over here. For example, are move this around. These are all happening in 2D environment. Let me go to the prototype mode and connect these together. I will use auto animate and top. Let's click anywhere. As you can see, this happened very easily and it's 2D. Now if you want to make it 3D, we can do something else. I will just remove this art board again, go to the design, and I will select all of them. And I will make them 3D. Now, they're all in 3D, even the background. I will. First thing I'm going to do is to move the background down. I want it to be behind everything. And then I will scale it. The field, the art board. Then this one should be above everything. I'll move it up like this. Okay. Let's do it like this. And this one should be close to to the cart. This one as well. Sorry. Something like this. And it will keep this in its position. So right now, I'll do this just for demonstration before you start animating this. I will WK this again. And you are going to move these around. For example, I want this to go over here and rotate like this. And this one also to go over here. And now if free play it, I will just go to the prototype mode. And when you click on this, it will come to this artboard. Let's Play. So we have something like this. Let me rotate this even more like this. And let's see how it will happen. Okay, let's go to the first one. As you can see, we have something like this. Okay, Let's close that one and you're going to remove this one. And now it's time to start with our design. Please don't be confused. I played around with the composition EBIT, but I didn't do anything like major. I just move the circles around and remove the text. And one of the circles, I'm going to bring the hand that is inside the resource folder. You should download it and you are going to drag and drop it inside our artboard. I'll move it over here. It will make it smaller and move it somewhere around here. Sorry. Okay. Like this, you are good. Make sure it's in the middle. And I'm going to move this up over here. This one also, I'll move it over here for now. And then you're going to move this inside the fun. Now I'm going to, I think I'll make it a bit smaller. The hand is a bit bigger than the sample that we have. So I'm going to make it smaller and move it in the middle again. And I'll make this card also smaller. I'm pressing on the Shift to make sure that it's modeling from all of the sides. Make sure it's inside the phone. And then you are going to move these circles. I'll move this one to this side. And this one, if you're unable to select it correctly, make sure you zoom in first. And like this, we are able to select it. Now, let's make sure that this cart is above everything. So I'm just moving it in the z direction. And I'll make it smaller to fit inside the circle. I'll move this backward, not behind the background, but there'll be behind the cart, this one as well. And we will move it backward to be behind that the cart. Okay, Let's move it over here, make it a bit smaller. And I will make another WK out of this, press on the Alt and make a duplicate, make it smaller. The next thing I'm going to do is to select the background and move it back. It should be behind everything. We have already done this in the beginning of this tutorial, but just to make sure I'm doing this again. Now as you can see, the text pay x is appearing. It's over here. If you don't have it, just copy it from the sample one and paste it over here. Make sure that you fit it in the position that I put it. I will move this one epoch closer and make it bigger. This one also make it a bit bigger. And let's move it over here. And now you will create the text. Because I remove this text, that's why I'm doing it again. But a most cases you will have this text. You're going to have to create this again. But if you also like me, you removed it accidentally and you need to make it again. I will make this one small. Put it over here. And then the other text I'm going to get it from here. I'm so lazy to create it again. I'll just copy this and paste it over here. And then I'm going to select both of them together, right-click and group them. And then with the alignment, I'll make sure it's in the middle. One less texts that we have a is this one I will get it from this artboard. I'll copy it and paste it over here. And I'll move it over here for now. We're going to animate this, but not now. Now let's fit this card inside the phone. And here we created our first scene. What you're going to do is to duplicate this scene. I will just make sure that this is in the middle first. And then you are going to duplicate it. Press on the Alt and duplicate this artboard. And now we are going to animate stuff. First thing is this text. We don't want this takes in the first art board. So that's why I'm going to move it down. And then we will bring down the opacity to 0. The next thing that we want to do is this hand. We don't want it to be available in this art board. That's why I'm going to bring it down like this. You can also rotate it. And then we are going to bring down the opacity to 0. Then you are going to bring this up the cart and rotate it like this. Okay, and next we'll go to the prototype mood connected this artboard to the second one. Use the auto animate and tap trigger. Everything else will be the same. Only the seconds, I'll make it four or five seconds. Now let's play it. When we click on this art board, we will have something like this. But as you can see, we have an issue. The hand we want it to slide down and it's not sliding down as you can see, it's just fading away. And let's see how we can fix this. First, I'm going to select the hand. Let's go to the design mode first. Select the hand. Then bring up the opacity. Now let's play again and see how it will work. Okay, this is what you want. Sorry, now it's playing the previous artboard that you already created. Make sure that you select on this art board and then play. As you can see, we still have the same issue. Let's move this up a bit. Okay guys, so we have this issue with Adobe XD. Sometimes when you push something outside of our boat, it will not read when you are playing it in the prototype mode. So make sure all the ways to have a bit of your object, whatever it is inside the art board and then bring down the opacity for it. So right now we are going to do that. I will just select this font. Selected. Okay, just like this and move it up with the arrow keys. Make sure it's a bit inside the art board and bring down the opacity. Now let's play it and see. Perfect. Now it's working as we'd like. Let's play it one more time to see. Okay, it's working fine. And now I'm going to duplicate this artboard. And then you are going to make some changes. I'll move this up like this. And then I'll rotate it a bit like this and move this over here. This one over here, make it bigger. And this one over here. So right now you have something like this. I'll make this one a bit smaller. Now let's duplicate it again and create the other art board. For this one, we are going to rotate this. Rotated like this, and move it down. We'll make this one bigger bit. Sorry, we'll move this up. Okay, let's keep it like this. I'm going to duplicate it again. Now select the card, you are going to rotate it. I will just play with it and see, maybe I'll find something more interesting than the previous one. Okay, Let's keep it like this maybe. Okay, let's move this over here and maybe rotate it. Actually not working. That rotation for the circle doesn't work. Let's make it smaller and move these around. Let's see. Actually I don't like the rotation of the cart. Let's make it something like this. Okay, now let's go to the text that we have, the px. This one, I want to move it up a bit. And in this screen you are going to rotate it a bit with the cart. Move it up and rotate it. I'm not sure if you see this text, that transparency is too high, but you're going to rotate it like this. Let's move this up again and rotate it to this side. Okay? And for this one we will move it up and rotate it a bit like this, like this. Now let's go to the prototype mode. And two, you're going to connect these artboards together. So you're already connected these two. Now let's connect these two as well. We are going to use the same settings for all of them. Okay, perfect. Let's connect these two as well. And then the last one, we are going to connect it to the first one. And now let's click on the first art board. Make sure you click on the name. And then let's play. We have something like this now. Perfect. So this is how you create 3D transform prototypes in Adobe XD. I hope this tutorial or this listen was easy for you. If something is not clear for you, you can contact me or you can just watch this. Listen again to understand. I'm going to remove all of these artboards that we have from the previous one or the samples one. Let's close and select h over them and remove. I just want to remove these and then we are going to play what we have created now to make sure that you are playing the right one. So just like this, we have our animation. Okay guys, hope you enjoyed and learned something new. Now it's time for you to go ahead and play with this file. You have this file inside the resource folder and get it, open it and follow the tutorial. And don't forget to share your projects with me. I'll see you in the next one. Bye bye. 30. Advanced Section Homework: Okay, Now that you have successfully finish this section, it's time for a homework. What I want you to do is to recreate everything that you have learned in this section and shared with me. You can download the files that you need in the resource folder. 32. #1 Menu Bar and BG: Hi everyone, welcome back. In this lesson, you are going to create our first final project, which will be this website. When your client asks you to make a website for them or an app for them, they will always give you the information what they want in each page. Depending on the information they gave you, you have to write everything that you want to go into each page. In this course, we are going to only create the homepage because if you create the whole website, it will take a lot of time. What I did, I put everything that I want to put in the homepage on this document and write a short description of what I want to go in each section. Then I'm going to go over the Adobe XD and you're going to create this website. We will start with the header, then the landing page, and then you're going to go over everything in the homepage. In this example, I've already created the homepage, the whole website you are going to follow. But if you don't have this, what I do, I make the skeleton of the website with the basic shapes. For example, this is the landing page. I created everything with the boxes and circles and triangles. For example, textbook go hair picture will go here and then the logos and the minimum. So you will create the home website with these basic shapes and then you'll go ahead that a place name was the photos with the texts on everything else. Now, I'll remove this version and you're going to use this one I've already created. We are going to follow this design. So the first thing you are going to do is to create an art board. The arbiter will be full HD whip like this. And the first thing we're going to create a background with the rectangle. Okay, make sure it is covering the artboard. Then you are going to go to the color and give it a gradient color. We will move this point to this corner. And yeah, let's change the color. Actually, you're not going to get the color like this. You need to go to the linear gradient, click on this dot, and then get the color. Now we've got the color for this one. For this one, you're going to get it over here. Sorry. Let's go to the gradient again. I'm going to move the handles of the gradient. Let's move this to this corner and this one to this corner. I already did that, but I enjoyed that. So I am moving them to the corner again. We'll bring the opacity for this point and we are not going to enable that background layer for now. Let's disable this for now. What I'm going to do is to bring the color balls that we have, this one. Okay, I'm actually going to copy it, press on the Alt, and move it over here. If you wonder how I created this, it's very easy. I use the pen tool to create these shapes and then I put a circle over them and I made a mask. So they are only appearing inside of the circle. And the color as well, I use the gradient colors. I'll make this bigger and move it over here. And then what you're going to do is to copy the background, click on it control C, control V. Make sure it's above the circle. And you're going to name this circle color ball. And then this background will be blurred background. And this one will be background only. For the blurred background. You're going to click on it and enable the background blur like this. And you are going to increase the opacity, but not now, let's go to the background itself and you're going to change the color a bit. Obviously we need a darker background. I will make a point over here and I'll bring the opacity up. Okay? Let's say increase the size of the ball, sorry. Move it over here. Then select both the blurred background and the background itself and disable the border. We don't need any borders for the background. Okay, now select the blurred background and increase the opacity for the background blur over here. And then we're going to go to the color gradient and we'll move this handle. Okay, sorry. Move this handle over here and this one all the way to here. We just need to make it a bit darker. Okay, and we are good like this. Now we are going to select the circle. Let's double-click over here to be able to select it, okay, double-click on it. And I'm using the arrow keys to move it down. And you're going to rotate it a bit. So you have some over the blow inside the background. Make it smaller. And we are good like this. The next thing I'm going to do is to click on the name of the RPO to make sure you select the artboard and enable the layout. And now you are going to add our Header Menu and we'll use the text. This one won't be the logo. We are going to write wallet X. Actually the WWW are going to make it smaller. I mean smaller. W. Then move it over here. Obviously we need to make it smaller, all of it together like this. And then the x will be regular or light. We are using the aerobic font. They're going to make it the irregular. And add a dot over here, sorry dot. And then you are going to create them menu. For that. I'm going to duplicate this one, move it over here. And then I'm going to write these texts that we have. We will have products. And of course we need to make it very small. And you will change the symbol to light. Or actually are irregular. Irregular is good. You're going to change the color for white and it will make it even smaller. And let's move it over here. And you're going to duplicate. I'm using the Alt or Option and dragging like this. Use the smart guides to make sure they have the same, similar distance between them, but you're not going to change or to fix that with the alignment tools. Okay, now we have four texts for the menu. The next one or the second one will be use cases. Double-click on it and write use cases. Then the third one will be, okay, development or developers. The last one will be pricing. Now, I'm going to move this a bit over here and select all of them together, press on the Shift and select all of them. Use the alignment tools to make sure that distance between them is the same. So right now we have this. Let's click on the logo and change the color to white as well. The last thing you are going to create is this bottom. Before I do that, I'm going to select this menu items on the sharpness like all of them. And I will make them smaller. Maybe 28 are actually 2009. And let's try light. Actually, let's use regular. Okay, we will keep it like this. And the next thing you are going to create, as we said, is this button. You are going to use the rectangle tool for that. So come over here, you're going to make a rectangle just like this. We will move it up a bit and then you will around the corners. And the next thing we're going to write that text. Sign up. Just like this. And select this one, disable the fill and enable the border, make the borders white. Let's make this two. And then move the text inside it. Make sure it's in the middle. I think that put on me speak. Before I scale it down, I'm going to select the background and our right-click and lock it so you don't accidentally select it. As you can see, you are selecting the background because he only loved the Blair won. Let's go to the layer panel over here, select it and lock it. And you're going to lock the color ball as well. So you have these three locked. Now we can easily select this bottom, group it together, and we can make it smaller like this. Okay? Now make sure it's aligned to the menu. Let's see, compared to the other one, I think we need to make it a bit smaller. Just like this. Let's move it. Okay, perfect. Now the last thing you're going to do in this lesson is to create the other background. This one is very easy. You are going to use the rectangle tool. And you're going to create our rectangle. From here to here. I'll use the alignment tool to make sure it's in the middle. Click on this one. Okay, Now it's in the middle, around the corners. And then you're going to go to the colors and give it a gradient color. Then we will move this point to this corner, and this one to this corner. Then the color for both of them, you are going to make it dark. Select both of them, make it dark. And then for this one, we are going to bring down the opacity that D3 is good and enable the background blur. We are going to increase the opacity. Something like this is good. Then the border make it white and you're going to make the size 0.5. Okay, we are good like this. Now let's disable the layout that we have. I'll click on the name of the artboard. Disabled the layout so you can see what we have. Okay, I think I'm going to adjust the size over the background that we just created. I will make it wider but okay, and then with the alignment tool, I'll make sure it's in the middle. Then we will adjust the color for the border. I'll make it a bit gray like this. And then the color for the fill, the gradient we are going to play with the handles over the gradient. I'll move this down. Okay, I will go to the gradient again and change this black to a bit gray, dark gray. And we are good like this. This is the end of this lesson. In the next lesson, we will continue creating the landing page. I'll see you there. Bye-bye. 33. #2 Landing Page P1: Hi everyone, welcome back. In this lesson, you are going to create the landing page. We are going to create this payment text as you write an overhead that's looking over the website and also an introduction. And then in the right side we will have the graphics that are present, the website or the product. We will start with the text and I'm going to use the text tool, of course, for that. First I will select this background, make it a bit less rounded, and right-click and lock it so you don't accidentally click on it or select it. And now we are going to use the text tool. And I'm going to write payment for all business. It should be businesses I think put left. Let's keep it like this for now. Okay. All I'm business so you want to be below, I'm going to click over here, press on the enter, and then you are going to align it to the left, just like this. Let's remove this space over here. Okay? We'll move it over here and then payment will be bolt or semi bolt. And business also be semi bold. All will be light. For also will be light. Perfect. Now, I think I'll make it a bit bigger. Or actually no, let's Control Z. It's good. It's a good size. Okay, we are good like this. The last thing I'm going to add to this text is the dot double-click on it and you're going to add a dot at the int. And we are good like this. Now you will create other texts, or actually I'm going to copy it from this sample. Now we'll just double-click on it, make sure you select it, and then control C. Then we are going to go to the Text Tool create over here, control V. We have our text over here. And let's make it smaller. Just like this, we need to make it even more small, but let's keep it like this for now. And we are going to move it to the right place. Okay, let's make it smaller actually are changing the irregular to light. Actually, let's keep it at the regular not light, but I'm going to make it even more small. Let's bring it down like this. Now it's throw be irregular and the size is 30. Let's keep it like this. Now the next thing is this placeholder for the phone number. I'm going to use our rectangle tool for that. Make a rectangle like this, and then round the corners. And then I will copy this and paste it Control C, Control V. And then you are going to change the color. Let's make it my favorite color, which is this color between purple and blue. And then we are going to make it smaller like this. This will be the baton. And then we will increase the size of the border, make it maybe 13, and change the color to white. Actually let's decrease the size. May get eight. Make sure that the stroke or the border is insight. Okay, just like this. Now I'm going to make this thinner. Actually set that to white. Let's do it for the bottom as well. Okay, Now let's move it a bit alignment with the text. And I will make it a bit shorter like this. And then we will add the text over here with right, put your phone number or put your number. Let's change the color to dark or black. Put your number okay. Here. Perfect. Let's bring down the opacity for it. But first, make sure it's in the right position and bring down the opacity for it. You're going to duplicate this, move it over the bottom. It will write notify me. You can write anything that you want. I'm just doing this as a sample. Now we will change the color to white and increase the opacity or removed opacity from it for the font, change it from regular to media. Perfect, Now we have the placeholder for the number. I think I'm going to change the color from white to a bit grayish white. Something like this. Let's change the border for the bottom as well to the same color. Okay, Now we have this. The next thing are going to bring this fonts. We have the inherent, the elements section. We're going to select both of them. And you're going to put it over here. I'm going to use the Alt or Option key to make a copy out of it. And you're going to move it over here. Let's put it in the right position and change the size as well. Okay, make sure that you have the right size. Actually, we are not going to change the size, but you are going to change their position. But I think this takes these a bit too big. You're going to bring the size down. We made it 29, align it with the other text. Let's select this also. Everything together. I'm pressing on the Shift alignment, right-click and group them together. It will be easier for us to move it around. Okay, Now let's adjust these. You may be like this. Okay. The next thing I'm going to make a circle behind them. I'll make a big circle like this. Disable the fill and the border. We'll make it white, bring down the opacity for it. Make it 20. And now you are going to move it just like this. Let's make it a bit smaller. I'm using the arrow keys to move it around. Next thing we are going to create this shape behind the phones. It'll be this one. Let's move it behind the phone in the layer panel. And then let's round the corners. Actually, I want to round the corners one-by-one. So I'll move it over here. Then we will go over here, make sure they are separated the corners and I will increase the size. I will just look for the one that I'm looking for. Okay, this one in the left, I want this. I will make it around 35. Move it up. And then the one on the top left, you are going to make it 10 as well. And the one that is 70, you will make it 0. Okay, now we have this and the next think I'm going to bring the color. I'll press on the eye. Or just click on this Eyedropper and get this green color from the sample. Okay, now we have this. I'll make it a bit shorter like this. And to disable the border, we are going to duplicate this. Press on the Alt and move a copy over here. And then we are going to round the corners. We will make this 35. And then double-click on it until you're able to select the points. We are going to adjust the points. So I will select both of these points. Make sure that you select the points themselves. If you click on the MPT area, you will create a new points. So I will select, just like this, select the points and move them around as you like. Now let's select this points, these two and these two. And we are going to send them to the left side. I think we are good like this. I'll just move it a bit. Okay. Now, I'll just move it up a bit. And then you are going to change that color. Use the eyedropper. And we're going to get this color. We are good like this. I'm going to move this one behind the shapes in the layer panel. Make sure it's behind everything. Okay. And I think we are adjust the size a bit, the size of the circle. I will move it up a bit. I'm using the arrow keys to move it up. And then I will make it a bit bigger like this. And now the last thing we are going to make it flashes. I'm using the circle tool for ellipse tool actually not circle. And you make another copy and make it smaller. Sorry. Let's move it over here. Rotate it. Okay. Let's get the color. Press on the eye and get the color from here. Select the other one. Press on the I, get the color. Where is it? It's very small. Okay. This is it. And you've got the color. I'll make another copy. Let's move this over here first. I'll make another copy and move it up. Let's rotate it like this. And maybe change the color to this blue. Let's change the size of it and the rotation. Okay, and this is all for this lesson. Hope you enjoyed and learned something new. In the next lesson, we are going to create these other items so that you have, I'll see you there. Bye-bye. 34. #3 Landing Page P2: Hi everyone, welcome back. In this lesson, you are going to continue creating the landing page. And we will create these charts graphics. We are going to start with the first one, which is this one. I will make a copy out of it, press on the Alt, and bring a copy outside of the art board. And you are going to recreate our chart over here. So the first thing we're going to do is to create a rectangle. The base shape is a rectangle, something like this. I'll try my best to make something similar, but it doesn't need to be 100% similar. Okay, actually I'm going to disable the border. I'll move it up a bit. And then I'm going to use the pen tool to create this line. Go to the Pen Tool over here and you're going to make a rough shape of the line. It doesn't need to be perfect at first. We are going to adjust the points. I'll just try to make something similar like this. Pressing the Escape to disable the Pentel. Okay, now I'll select each point and you're going to adjust their position and their curviness. I'm not sure a Calvinist is a word, but let's use it. Okay, Let's adjust this one as well. When you click on an empty area, it will create a point actually. So make sure that you're selecting Gandhi points of themself. Okay, You tried to create something similar to this one. Okay, One last thing. I think we are good. Now our selected and increase the size of the border. Make it four and change the color, make it this color. I use the eyedropper tool to change the color. Now select the white background shape control C, control V. Make a copy above the line, make sure it is above it. Now selected with the line. And then you are going to use the mask. So select this one with the line, press on the shift and select both of them, right-click and Mask with shape. Now the line is appearing only inside the shape that you put over it. As you can see, this is the background and we have the line appearing inside the background, which is the mask itself. Okay, now select the background again. You are going to add a linear gradient to it, go to the fill and choose the linear gradient. We are going to move this point over this corner and this one over this corner. We are going to change this one to white. Click on it and make it white. This one, we are going to keep it white, but you are going to bring down the opacity for it. So make sure to bring down the opacity a bit. Somewhere around here. Let's keep it like this. Now select the background Control-C, Control-V to make a copy out of it. And now make sure that this copy is behind the lion, behind the other background. And then we're going to move it down like this. Then press on the Shift and altogether to make it smaller from the center. Something like this. And then you are going to bring down the opacity for it. Make it FFT 57 or 58. Like this is good. As you can see, this background is appearing behind the other one. We are going to adjust the linear gradient for this one. I'm going to move this point up. Or actually let's, let's bring this down again. We are going to make the other background smaller, which is this one. Click on it. And you're going to make it small like this, so it doesn't appear behind the other one. And then select this one again, go to the linear gradient and now we can adjust it that but like Fez, bring down the opacity even more. Or actually let's make it like this. Make a point over here, and make the opacity full. And now we have fixed the issue. The next thing we are going to do is this dollar sign with these texts here, make a circle like this. Obviously it's very easy. We will make the dollar sign okay, like this. Then you will change the font to medium. We are using aerobic. Select the circle. We will change the fill to a linear gradient. And let's choose both of the colors. Legoland, this one, eye dropper, get the color from here. Select this one, select on the eye dropper and get the color from here. Now we have our gradient. We will disable the border. And then you will move the dollar sign over it. You'll make it smaller and move it in the middle. Like this, we are good. Now let's create these two lines that represent the text. We will use the rectangle tool, make a rectangle like this. And you're going, or actually, we will disable the border and make the field, ah, sorry, I chose the wrong eye dropper. Let's use this eyedropper for the fill and get the color from here. And now you're going to round the corners. Let's make it a bit thinner. And you will make it duplicate. Press on the Alt and make a duplicate. It will make the second one smaller and get the color from here. Actually got the same color. Let's fix it and then you'll change the color. Let's spread them a bit. Let me change the color for this. No. Okay. I think I'll make them closer to each other. Okay, we are good. Select everything and to right-click and group them. Now we are moving them inside the chart like this. And the last thing is this dot-dot-dot going to create a circle. And then with the border, make sure it's inside and then increase the size of it. And you're going to get the same color. And now we'll make it a bit bigger. Something like this, and move it over here. Okay, Perfect. Now select everything and group them together. And you are done with this one, are going to move it to its place. Just this one. Because there are 3D to go behind it. I'm going to select it, make it 3D, make sure you select it and make it 3D. And move it up to be above the forms. Okay, perfect. Let's remove this one. And we are going to create the second one, which is this one. Let's make a copy out of it. Press on the Alt, and make a copy of it. Okay, the first thing we're going to use rectangles to make the base shape. Make a rectangle like this. And round the corners. We will make it a bit thicker like this. And you are going to disable the borders, enable the shadows. Let's make it even more thin. And make sure that you're on the corner again, like this. And like this, you are good. Now go to the circle, make a circle. Make sure you fit inside this shape. Like this is good. Move it over here and disable the border. Or actually I'll keep it for now. Let's go to the plugins. We are going to use the UI Faces and just select the photo. We don't play with any settings and just select a photo and choose a photo from the photos that it gives you. Okay? You can use anything. I'll use this one. Apply. Now select the circle and disable the border. Okay, we are good. Now, let's create these lines that represent the text. I will just make a line like this. Disable the border to get the color for the fill from here. And now zoom in. Make the corners round. You will make it a bit thinner. And make a copy. I'll make it a bit thicker. I made it way too thin. Okay. Move it over here. And then what you're going to do is to make another copy out of it. We will make this one very short, like this. And then you will get the color from here. And just like this, we created everything. Now select everything. Right-click, group them together and move it to its position. It'll be somewhere around here because it's 3D to go behind the other phones, make sure that you bring it up like this and make it a bit bigger. I'm going to zoom in and see if I find the alignment. I think I'm going to adjust this photo. Yeah, Let's keep it like this. And like this, we created the second chart, our selected, remove it. And now we are going to create the third one. I'll make a copy out of it, press on the Alt, and bring a copy over here. And then we are going to create this. This is very easy. I'm going to use the rectangle. Make a shape like this. Round the corners. Then I'll make it a bit shorter. Disable the borders. And now in the field, use the linear gradient. For this one, you will make it white. The other one will be white, but you'll bring down the opacity of it. This one is good. Now, I will select the background control C control V, make a copy. Then I will go to the layers. Over here, go to the layers and make sure that you select the below one and move it down. Then prism the Alt and Shift together to make it smaller. So we'll get down like this, then shift on altogether, make it smaller like this. Move it down a bit, and then you are going to bring down the opacity. Now we have this, as you can see, it appears behind the background. To fix that, I will just select this one and make it shorter like this, so it doesn't appear behind the other one. And then select this one, go to the linear gradient and move this point a bit. Okay? I think we fixed it like this. Okay, let's have another look at it. Okay, I will just select this one and go to the Gradient. I'll decrease the opacity a bit. Okay? Now let's create the other part which is this circle with the 40 percent on it. I'll make a circle like this. And then you're done to disable the border, go to the Fill, make it linear gradient. For the linear gradient, we will get the colors from here. Use the eyedropper to get the color from here. Select this side, use the eyedropper to get the color from this area. Okay, Now we have our ingredients circle. We will make another circle which will be white. Disable the border. Move it in the center of this one. And then you're going to go to the Type tool. But let's make this one a bit bigger, okay? We will use the type tool. Will write 40 or 40%. No, actually we're right, only 44, this one. Let's change the color for it. I'll use the Eyedropper for the fill and get this color or this one. They are with the same. Now duplicated, press on the Alt and make a duplicate. Make this 1%, make it smaller, move it over here. Now we are going to select both of them. And group them together, right-click and group. Let's make it smaller together and move it over here. I'll double-click and move this one closer to 40. Okay, make sure it's in the middle. And now you will select everything together, right-click and group them together. Now you will move them inside our chart like this. And the last thing we're going to do is to create these lines that represent the text. Make lines like this, disable the border. Get the color from here. Now, zoom in and around the corners. Of course, make it thinner and then round the corners. You'll duplicate it. Make it shorter. Void in the middle. And then get the color from here. Perfect. Now let's make this one a bit thinner and thinner. Move it to the right place, click on both of them. Move them over here. As you can see, our lines are a bit white or I don't know if they are taller white. But let's make him smaller like this. Okay. Let's move this one also in the center. Okay, I think we are good like this. We created the other chart. Okay, good. Now let's select everything together. And you will group everything together. Right-click and group them and now move them in their place. Of course it will go behind, move it up with the 3D handles. As you can see, we have a very transparent background. I'll double-click on it to make sure you select it. Enable the background blur and increase the opacity for the blur with this one. And we will keep it like this. Perfect. We've created all of the charts. Now one last thing is remained from this landing page. Let's remove this one. And we have the logos. We are going to create the Legos. Okay, So these are the logos. I've already prepared them. It's very easy to prepare them. I just don't know that all of these logos from the Internet and then drop under OK inside the Adobe XD, for example, this one. And then to edit them, I just right-click on them. First, make it smaller. And he signs that you can right-click and edit in Photoshop. In the Photoshop, I added the white color to them. For example, color overlay. Make it white. And then Control S to save or just File and Save. Now if you go to the Adobe XD, it has been updated like this and then bring down the opacity. So this is how I prepared these logos. I don't need to recreate everything again, I will just remove the background, select all of the logos. Control C. Click on this artboard Control V. Now you have all of the logos over here. There are grouped together as well. I'll move them over this place. You can always right-click and group them together to make sure that they are grouped, but they were grouped together actually. Now, use the alignment tool to make sure it's in the middle. And like this, we've created everything on the landing page. I'll see you in the next lesson and we'll continue creating this homepage. See you there. 35. #4 Benefits: Hi everyone, welcome back. In this lesson, you are going to create the benefit part of the homepage, which will be this one. And we are going to recreate this part. We have the icons over here. The first thing we're going to do is to create the background. I'll use the rectangle tool. Create a shape just like this. And then we are going to round the corners, make it smaller, disable the border, go to the fill, and then use the linear gradient. We are going to make this part dark. Actually, let's make it dark gray. And this one will be 0 opacity. And you're going to move this point over here because we don't want this part to appear. We are going to adjust this a lot. You just follow me and copy the last things that I go with. Let's bring down the opacity a bit. And then let's change this one to a bit darker or maybe lighter. We will make point over here and make the opacity full. Bring down the color to dark. I'm just playing with it to see something that I like. Let's bring down the opacity for this point. Make it a bit lighter. I'm not sure if this middle point is the right thing that I did. I will just see if I don't need it, I'm going to remove it actually. Let's see. Actually let's remove this just like this. Let's keep it like this. I will select it and see what will background bilayer do for this. I will just select it. Enabled the background blur to see. No, we don't like this. Shadow. No, it doesn't do anything shadow. Let's go to the color again. And I'll move this up a bit and make this a bit darker. Okay, we'll keep it like this. We don't want to play with this a lot. I think this is something that we can go with. Now I'll duplicate this. Press on the Alt and make a copy. Bring it over here. We aren't going to recreate these things again, like the text on the icons. I will copy this icon, actually will take one by one. It's a bit hard to select them. So I just made a copy. I press on the Alt to make a copy out of it. Then we are going to create this shape. You're going to use the rectangle tool for that. It's very easy. Let's go ahead and create a rectangle. I'll make beside it to make sure we have the same size. Make it the rounded corners. We will adjust the size a bit, move it over here, make it a bit thinner. Move it over here, and then disable the border. You're going to use their linear gradient, make this one dark, and this one will be white. You'll bring down the opacity for it a bit like this, and then move this over here. And this one just like this. So this point has a 0 opacity and it's white. Okay, Now let's move this icon. For this one I've added the linear gradient. You can use solid colors if you want. But in my case, I'm going to use the linear gradient on him and it just controls it. And let's move it over here. Okay, This is the right position. Okay, now let's write