Adobe Xd Basics | Web Donut | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (3h 14m)
    • 1. Course Intro Adobe Xd Basics Course

      0:48
    • 2. What is Adobe Xd Adobe Xd Basics Course

      0:23
    • 3. Download Xd Adobe Xd Basics Course

      2:42
    • 4. Updates Adobe Xd Basics

      3:06
    • 5. Mac VS Windows Adobe Xd Basics Course

      0:28
    • 6. Welcome Screen Adobe Xd Basics

      4:31
    • 7. Add Ons Adobe Xd Basics Course

      1:07
    • 8. Plugins Adobe Xd Basics Course

      5:12
    • 9. UI Kits Adobe Xd Basics Course

      4:14
    • 10. App Integrations Adobe Xd Basics Course

      1:31
    • 11. Interface Adobe Xd Basics Course

      5:37
    • 12. Shapes Adobe Xd Basics Course

      12:15
    • 13. Pen Tool Adobe Xd Basics Course

      4:32
    • 14. Text Tool Adobe Xd Basics Course

      7:10
    • 15. Artboards Adobe Xd Basics Course

      3:34
    • 16. Layers Adobe Xd Basics Course

      5:01
    • 17. Components Adobe Xd Basics Course

      9:28
    • 18. Plugins Panel Adobe Xd Basics Course

      3:12
    • 19. Repeat Grid Adobe Xd Basics Course

      6:10
    • 20. Guides Adobe Xd Basics Course

      3:02
    • 21. Grids Adobe Xd Basics Course

      4:26
    • 22. Masks Adobe Xd Basics Course

      8:07
    • 23. Shortcuts Adobe Xd Basics Course

      2:54
    • 24. Prototyping Tools Adobe Xd Basics Course

      2:56
    • 25. Interaction Panel Adobe Xd Basics Course

      1:49
    • 26. Triggers and Actions Adobe Xd Basics Course

      7:51
    • 27. Mobile and Desktop Previews Adobe Xd Basics Course

      3:22
    • 28. Recording Prototype Adobe Xd Basics Course

      2:29
    • 29. Sharing Your Work Adobe Xd Basics Course

      6:38
    • 30. Working With Files Adobe Xd Basics Course

      0:52
    • 31. Xd Files Adobe Xd Basics Course

      1:49
    • 32. Photoshop Files Adobe Xd Basics Course

      2:59
    • 33. Illustrator Files Adobe Xd Basics Course

      2:24
    • 34. Sketch Files Adobe Xd Basics Course

      3:19
    • 35. Using Free Fonts Adobe Xd Basics Course

      7:37
    • 36. Using Free Images Adobe Xd Basics Course

      9:14
    • 37. Using Free Icons Adobe Xd Basics Course

      4:24
    • 38. Working With Illustrations Adobe Xd Basics Course

      7:21
    • 39. Working With Mockups Adobe Xd Basics Course

      6:08
    • 40. Design Using UI Kits Adobe Xd Basics Course

      18:07
    • 41. Conclusion Adobe Xd Basics Course

      0:53
    • 42. Course Update And YouTube Channel

      1:58
    • 43. Join My Free Facebook Group

      2:16
17 students are watching this class

About This Class

e8a35634

Adobe Xd is a UI/UX tool designed to help you work with lightning speed so you can create beautiful designs and user experiences.

.

Using Adobe Xd for design is great because it's free, cross platform, vector based and it has regular updates.

.

Hi there my name is Alex and in this course you will learn:


* What is Adobe Xd
* Design tools it offers
* Prototyping tools to bring your designs to life
* How to work with different files
* How to share your work
* And how to work with UI Kits to your designs started

.

This course is for beginners and for people interested in Adobe Xd. You don;t need any previous knowledge of Adobe Xd, we are going to cover it all in this course.

.

I hope you are ready to learn Adobe Xd and what it has to offer, and i'll see you in class.

.

Have a creative day! 

Aleksandar

Transcripts

1. Course Intro Adobe Xd Basics Course: Adobe X'd is a you are you extol designed to help you work with lightning speed so you can create beautiful designs and user experiences. Using Adobe X'd for design is great because it's free cross platform director based, and it has regular updates. Hey there, my name's Alex, and in this course you will learn what is Adobe X'd designed tools. It offers prototyping tools to bring your designs to life, how to work with different files, how to share your work and how to work with you. I kids to get your designs started this courses for beginners and for people interested in Adobe X'd. You don't need any previous knowledge off aerobics D. We're going to cover it all in this course. I hope you're ready to learn Adobe X'd and what it has to offer, and I'll see you in class 2. What is Adobe Xd Adobe Xd Basics Course: Adobe X'd is a vector based tool designed by Adobe. You can use it to create experience designs and go from sketch toe wire frames and high fidelity wire frames to design prototypes and sharing all within one up. It works on Mac as well. A specie and the best of all. It's free, so you can now load it and start using it right now. 3. Download Xd Adobe Xd Basics Course: you can doll. Oh, that'll be X'd by going toe adobe dot com slash products slash eggs d And right here on this page, you can explore everything that Adobe X'd has toe offer so you can scroll down and see some major partnerships they had. And all of these companies are using Adobe X'd in their design work. You can see some of the main features, and this will obviously change depending on when you are watching this video in the future . So all of these features are changing all the time because they're keep adding more and more also features to Adobe X'd. You can scroll all the way down and see some main highlighting features that they have inside. Off the software, you can see some testimonials from the customers right here. You could see some integrations and main integrations, and you can see right here some of the projects. You can explore what it's made in side of Adobe X'd, and you can scroll all the way down to find the plants. So at the moment off, making off this video, we have three Bland's and this started plan, which has always been free. It's extending until April 2000 and 20. So you get all of these features for free. Otherwise, you get to share on Lee one prototype with your clients and you can have only one collaboration inside off the cloud active. But you can delete it after. If you want to use this starting plan, which is free, and then start all over again with that same sharing prototype and collaboration. And you can always run through this and have one plan active, and you can always use Adobe X'd for free. So if you want to download it, you can simply start right here and click Donald Eggs D You can also exploring these other plants if they fit you well. And of course, if you have a double creative cloud membership already paid, you have all of this included already. So when you click down with X D, you have have to install this creative cloud desktop app, and right here you can find Adobe X'd because I already installed it. You can see I can just click open and it full open and start running right away. But if you don't have it, you can have this installed button shown, and you can click on it and then install Adobe X Deep and AST for the updates. You can update it using this same way, or you can jump inside the settings and enable automatic updates, and it will automatically update whenever they updated the software in the future. So that's basically it for this video, and I'll see you in the next one. 4. Updates Adobe Xd Basics: Adobe X'd is usually updated every single month. At least that was the case since the launch off this product, so you can always check out the latest updates by going toe, adobe dot com slash products slash x d slash features. And inside of this page, you can see whenever the update is launched, as well as what it contains inside of that particular update. Now, sometimes updates are huge, like this one was in November, off 2000 and 19. Again, Whatever you're watching this video, more and more updates will come until that point, and you can see sometimes they're launching smaller updates. Usually, they're they're keeping the best stuff for November off each year because that's where they're adobe. Max, it went, is held and inside of that event, they're trying toe project what the future will look like for their products for their brands and in this case for Adobe X'd. And that's when they're trying to include as much new features as possible, especially as many new and useful features a spot as possible because they have this thing called User Voice and inside of user voice users off adobe eggs D can suggest a future, whether it's a design or prototyping feature, and they will work on it if it has enough up votes. So that's where we got this co editing, for example, and we have hover triggers, for example, because it was highly requested. Feature on the user voice and you can always jump inside user voice and simply make your voice be heard. And you can put your own opinion upfront and suggests the ideas you can always upload. Screenshots. You can always upload your particular designs about how you wish the software will involve in the future. You can also jump inside and the community and find you like it, which the creators off adobe eggs they have created. And you can use that you like it to design your own features, and you can always send them that and then suggest your changes or the futures you would like to see in the future to be included inside Adobe X'd. Now, to download any off these updates, you can always jump back to your creative cloud app, and it will prompt you. With this update bottom, you can simply click on it. It will install the update and then you can open X'd, and you will have the latest update installed. I've always recommended that you update X'd as you work as you go along. And sometimes if you skip month or two because you're not working for some reason or you're working some other software, you can always jump back and update it, and it will update to the latest version. Updates are really quick. They're really small, and they're really easy to install. As I said, you can just simply click one button and that's basically it. So that's it for this video, and I'll see you in the next one. 5. Mac VS Windows Adobe Xd Basics Course: While every platform has its strengths and weaknesses, it doesn't matter which one you use for Adobe X'd. Adobe Steam is working hard to bring the same features on both platforms, so the user experience can be the same on Mac and PC. This is great because you can be sure that you're getting the latest features, no matter what platform you're using. The way the menus look is a bit different because of the platforms, but features are exactly the same on both Mac and PC. 6. Welcome Screen Adobe Xd Basics: every time you open Adobe X'd, you will be greeted with this home screen and inside of it you have a few options that we're going to explore in this video. First things first, right here on your left. You have this menu. So you are at home. Obviously you have parents which we're going to explore in one of the next videos. You have your work so you can access your cloud documents right here. And these right? Here are your recent documents which are being saved. Toe cloud. These are the documents which are shared with you. So if you're working with a client, for example and they shared the documents with you, you can access them easily. Right here you can manage links. As I said in the Donald X'd video. If you're using free plan, you have to manage those links and you can quickly click right here. And you can delete the old links that you don't need any more and you can create new ones for sharing. Therefore, keeping your free plan going right here. You can access everything you have deleted. And here you can access your computer and you can click right here and open the files from your computer. You can quickly check out what's new by clicking right here, and you can see all of those different updates. And you can see different bloke posts and videos walking you through the new updates and features and what they have launched recently learned and support. You can access different tutorials. You can access different links, and you can access everything that team has to offer to make your life a little bit easier . If you're starting out with X T and finally you can click provide feedback, and it will take you to use the voice, which I mentioned in Donald Adobe X'd video and inside of there you can make your voice be heard basically and you can write your feedback and you can upload other users. Feedbacks and the futures, which have most up roads and the team found them useful and constructive. They will build it and include them in the future versions off X'd So, for example, users wanted for the shop integrations. They listened. They included it. Users want hover effects. They listened. They included it as well and so on. Right here we have different our board sizes. So we have iPhone sizes and you can click right here. And you can access all of the different iPhone sizes as well as android mobile sizes. If you're working with Android, and that's a nice quick shortcut that you can access, and you don't have to go through for, for example, Adobe's Website and figure out what are the sizes? You have everything accessible right here. Next you have iPad sizes as well as android tablet surface Pro 3456 and so on. And you can quickly show. Choose from there and simply click right here, and it will create a new our board for you. If you're designing for what you have the most commonly used sizes for Rob right here and in any of these cases, you can always change the airport size inside of Adobe X'd. But this is just the starting point to get you started and toe open up the program and start working on it. And finally, we have custom size so I can type in, for example, 800 by 800. Let's say I can click enter and it will take me to that custom. Our board size and I can start working. So, for example, if you're not working for any off these scenarios and you're working, for example, for social media or for a graphic design work or something like that, you can always check that custom size, and you can enter custom values right there. Click, enter or return, and it will open up that custom size. Finally, we have right here explore their tips, and you can click through this pagination, and you can learn more about the latest features. This obviously changes whenever they launch a new update, which is important to them, and they found that it will be extremely important to the users. So you can click right here on this link, and you can learn more about these particular features in this case, co editing. So if you don't know what quieting is, you can click right there to learn more about it, and they go in tow details about what it is, how you can use it, some use cases and how it can be useful for you and your future work. So that's basically it for this welcome screen. In the next video, we're going toe explore Adams, so I'll see there 7. Add Ons Adobe Xd Basics Course: right here from you're welcome screen, you can click on the add ons and it will take you to this section off the software and inside of here you can see the editor's choice for all the different animals that you can install and use inside off your work. So, for example, if you want to design for IOS, you have the apple IOS design system and they're basically you like it. That's the apple themselves created. So this is extremely useful. If you're working for IOS design APS and you can click right here, and it will take you to the new tab where you can download and use it, while for some other ones, you can click right here. So, for example, the issue I faces and you can see that it is a plug in. You can click right here, and it will install right away, and you can use it right away without going to separate websites. So you can see in some cases you have to go to their dedicated websites about in some cases you can click right here, and it will Donald and install right away in the next. Videos were going toe explore these three separately. So plug ins you like its and app integrations. So I'll see you in the next video. 8. Plugins Adobe Xd Basics Course: So here we are in the Adams section off our adobe X, the welcome screen. And right here we have these three options separately, so you can see right here we have added his choice. But if you want to explore a little bit deeper, you can click plug ins, for example, and it will take you to the plug ins extension off adobe eggs. D. You can also go to the website and you can click right here. So it'll be that com slash products slash eggs. The resource is and so on, and it will take you to this page. Or you can simply click on any of these. So, for example, app integrations and it will take you to the website and on the website. You can explore all of these plug ins in a lot more details. So, for example, you can read more about them here and you can switch between plug ins, app, integrations you like it's an icon sets and we're going to concentrate on the plug ins. So once again, when you click plug ins right here, it will take you to the plug in spaniel. And this plug INS panel is interesting, because right here you can learn different things, depending on what interests you for Adobe X'd. So, for example, we have a future of collection editor's choice, and if I click right there, it will take me to the most useful plug ins that the editors thinks I might like. I can always go back. You can see jumpstart your designs so you can were that collection right here. And this is very useful because if you don't know about design processes and you don't know about different three sources, you can always jump right here and see what they have recommended to you. But if you do, you can see these essential plugging. So, for example, you y faces will give you avatars for design more cups. Stark is for accessible and inclusive design, and to install any of these, you can simply click install, and it'll install that plug in inside off your plugging collections. You can have as many plug ins as you want it read as a matter, but I really recommend that you only install the plug ins you really need and you really want, or if you want to check some of them out. You can always install them. Explore. If you don't like him, you can delete them. It really doesn't matter. So you can keep your plug ins least short, concise and really to the point off the plug ins you're actually using. You can connect X'd to her favorite app so you can see all of these app. So, for example, if you're using slap Dropbox or Siplin, you can integrate X'd with those APS and work directly without going toe separate websites , for example. You can see different collections right here, and you can browse through categories. So if you're interested in tools and automation, you can click right here, and it will take you to that particular list. And that brings us nicely to the browse selection. So everything I already talked about was in the Discover selection. When you click on the browse, you can sort by categories right here. So those are the categories you saw right here at the bottom, and you can browse all the plug ins right here. You can see most popular top rated and most recent, and you can scroll through and see just how many plug ins there are right here. So here we are. If you're sharing on dribble, for example, you can share directly via adobe eggs. You can connect your dribble account and share directly to it. You can also do the same thing for begins, for example. And as you can see, there are many, many, many different plug ins that you can explore right here. And if you click on any of these random plug ins, you can have install bottom right here. You have ratings, which are obviously important and very useful, and you can see what the plugging is all about. You can read more, you can see what's new. You can see the rating right here, who the developer is, and you can see the size. So how fast it will Donald and install on your computer. And finally we have managed. So here are my installed plug ins, and you can manage them from right here. You can see a last operated so you can keep track off whoever updates the plug ins the most . So, for example, you can see I'm using a lot of gypsum toe, feel some placeholder text in some cases, and if I want to delete it. I can simply click right here. I can disable it if I don't want to see it, for example, in my plug ins list, or I can simply uninstall it, and I can always jump back and install it in later time if I choose So So this is installed this calendar of blogging. For example, If I want to remove it, I can simply click on Install. It will ask me, Are you sure? I can click on install? And as you can see, it's working on it and now it's on installed. So that's how is it is to work with bludgeons. And when we actually get to designing in this course, I will show you some really useful plants and how you can use them in your design work. And in the next video, I'm going to show you some you I kids, why they are important and how you can get them so we'll see there 9. UI Kits Adobe Xd Basics Course: if you want to speed up your work dramatically, a really recommend you're using you I kids, especially if you are a beginner. And you really don't know how some of these things are structured, what you should be using and how you can explore some other, more experienced designers. Their techniques, how they're using, how they're structuring their designs. So I really recommend you use you like it's, and it's really simple to Donald them. They are obviously free right here. You can jump inside Adams and Click You are kids, and it will open this page, which is once again a double com slash products slash eggs. The slash resource is, but you can quickly access that page by simply clicking right here on the U. Y. Kids. And when you click right here you have these major U. Y. Kids for the platforms. So once again, we have apple design. You like it, and you can simply click right here, get the kit, and you can see how everything looks like. So this is what you are going to be getting. You can download thes symbols, and you can see all of the different software that this you I kid works in. So if you're using for shop using, click right here. If you're using Adobe eggs d like this video is about, you can click right here and it'll download. So, whatever you're watching this video, this IOS version obviously is going to change circum Click right here, download and instructed and just one quick note. If you're using Windows to design, it will download as the MG, which is obviously Mac file, and you cannot open it on windows. But what you can do is use seven Zip software, for example, which is free, and you can unzip it using seven zip on your desktop. And because inside off that DMG file is Adobe Xz file, which obviously works on both Mac and PC. You can use it normally without any difficulties. If you want to use this kit, you can Donald and install their fund so as a front with over 1500 symbols and so on if you want everything to work properly, but you can always change it to whichever fund you want. If you click right here on the material design, if you're using Adobe easy to design for android apps. You can click here to get the kit. It will download it straight away, and you can use it on both Mac and PC and finally, for Microsoft. You WP design. You can open it up in new tab and you can see how everything looks like how everything is structured and so on, and you can knowledge and use it that way. But if you're not interested in any of these, you can always scroll down and see what the community has made for Adobe XY. And right here we have a variety off different you like. It's so we have the design system. For example, we have Amazon. Alexa, your kids. If you're designing for Alexa, you have also animate you like it, which is the really great and important feature off Adobe X'd. And it's made by our pink Pinsky, which is a great youtuber and senior eggs, the evangelist at Adobe and right here we have wir franc. It's from your white, for example. We have dashboard, you work it. We have responsive design, which is again a really great feature off of the big city, and you can design for responsive screens and It's also made by U eight, and you can explore how everything works there. If you're designing for watch or s, for example, you can download and use this kit for sport APS. You can use this kit and so on and so forth, and you can always combine elements. So, for example, you can use some elements from this equal MERS. You like it and from watch us and so on to create your custom designs. If that's something you wish all of these you like, it's that you can see right here are completely free. You can download them, open them up in XY and really explore and play around with some of these elements. And I'm going to show you some off the you like it's in the later video when we're actually going to start working on our design. And I'm going to show you how you can use some off those elements to really elevate your design techniques and to really improve your speed 10. App Integrations Adobe Xd Basics Course: and finally from this panel, I want to show you app integrations. So if I click right here, it will prompt me with this window and you can see all off the currently available app integrations. So let's say you're working inside of the team and you're using slack without ever leaving Adobe X'd or living slack. For that matter, you can install the app integration and you can integrate. That'll be is the wits like, for example, if you're hanging off design style guides, code snippets and more with sapling to your developers, you can use that integration if you, for example, want toe ad even more interactivity to our protects. You can use product by, and you can use this integrations. You can use dropbox paper, for example, if you want to share interactive prototypes using Dropbox paper. If that's something you're using with your clients or inside off your company so you can get the idea off this APP integrations. They're really useful, especially if you're working a spark off the team or if you're working as a remote part off the team because sometimes, for example, the entire team is using slack. You are not using slack. You don't know how to use it. So why would you leave? It will be easy and install slack somewhere else and then use time and then jumped back and forward between Adobe X'd and slack When you can do all of it inside off one app without ever leaving it when you're working. 11. Interface Adobe Xd Basics Course: let's quickly run through the interface off the B x d. So if I click on any of these for example, this one toe open up a new document, you will see that it will load right here. And it will show me that our board And if we enlarge it just a little bit, hit control or command zero to snap into position, you can see how everything looks like. Now from here, this will be a bit different depending on if you're using Mac or Windows. Because on Mac, all the controls are right here at the top while on windows. All the controls are here inside of this hamburger menu. So you actually have to click it and then access all of those different controls. So right here we have the home icon and if you click on it, it will take you back to this home screen. And it's really useful. If you want to access any off these that I mentioned in previous videos. You want to learn more, you want to open up a new art board and so on. So that's really useful. There, Right here. We have designed prototype and share. Now We're currently in the design mode, so we're designing basically, and we can create anything we want inside off the design mold. When you want to animate some of it, you can click on the prototype, and then you can access different features which enable you to prototype that design to make it interacting. And then when you want to share of the with your client, you can actually click right here toe access This share options right here. So right here in the middle, we have the document which is currently being saved, the cloud. And you can change that by simply going here right and clicking. Save us and choosing your desktop, for example, or dedicated folder on your computer. And then it will save the copy on your computer as well. You can click right here and change the name. So, for example, are documents you compress, enter or return, and you can see it's saving to the cloud because that's it Dedicated spot. Right here. We have different controls. So we have select control, which is used basically for selection and for moving things around below that we have some shape. So we have rectangle shape ellipse shape, polygon shape and line below that we have the mental. So if you ever used for shop or illustrated, for example, your familiar with mental. But if not, we are going to have a dedicated mental video later on in the Siri's, and you can watch it and learn more about it. Below that, we have the textile, which is obviously used for typing and for entering words below that we have different our boards. So if you don't want to jump toe the home screen all of the time, you can click right here, and it will show you different art board sizes right here on the right. But as I explained before, you can change the airport size at any point by simply clicking on it, and you can enter your values right here. So right now with is 1920. So, for example, you want to be 1000 press center, and you can see that it changed toe 1000 so you can always change it there and make those changes really easily. Below that, we have the zoom tool, and you can always use old and scroll wheel on your mouse or you can use control and space to zoom in or control old and click to zoom out. You can always use control Command zero to snap in the airport into position, and below that, we have assets panel, and if a click and click again, it will hide that panel. But if a click again, it will expand that panel now, what the assets are we're going to explain in one of the future videos, and you can sort your assets right here. And you can add colors, character styles and components to your assets. And components are going to be major video, which are going toe. Explain how you can use those components toe further help you design faster to design more simple and Toby more collaborative inside off the team. And it will really help you get your design process going and really improve your speed and your quality. As a designer below that, we have the layers panel specifically quite here. You can see some laters right here, and we're going to go into much more detail off it a bit later, and finally we have plugging spell, so if we click right there, you can add new plugging by simply clicking right here. And it will take you to the screen, which will really talked about. And here are your installed plug ins and we're going to run through them once we started designing, and I'm going to explain what some of them work and why some of them are really useful to my work at least whatever you're clicking right here on your right, You have these properties panels, and you can really explore how this changes depending on what you have selected right here . So because we have dedicated with us coming for all of these, I'm going to explain how this panel changes whatever you have selected right here. And that's basically it for the over you. And we're going to cover some of these in the later videos. So this is just a basic overview off how Adobe X'd looks like what everything does at a glance. And finally, I just want to share. If you want to change the our port name, you can simply double click right here and call it whatever you want. So let's say our port in this case. So that's it for this video. I'll see you in the next one when we're going to explore different shapes 12. Shapes Adobe Xd Basics Course: in this video, we're going to talk about different shapes in Adobe X'd so shapes are located right here on your left so you have rectangle, ellipse and polygon, and you can click on any of them and simply draw a shape right here inside of your our port . And if I switch from assets panel to my Layers panel, you can see that it's titled Rectangle one, because that's the original shape that were true. As you can see, it's a rectangle. And because it's first, it's erecting one article 23 and so on, and you can hit control Command Z toe unto death selection. You can double click right here to change the name so maybe we can call this shape one, for example, and you can click on the select tool and you can draw it. And when you move it around, you can see these guidelines, and it will show you when you're at the center. And all of these numbers are numbers off pixels from these distances. So from the top bottom left and right right here in this menu, you can see some different options. So, as I said in the previous videos, Wherever you click on some of these, these options are going to change depending on what you have clicked right here. So here at the top, we have positioning tools so you can align this to the top. You can see what it does. You can put it in the middle to the bottom left middle like this so you can hover and see. So this will align it center horizontally and this will align its center vertically. So basically in the middle. And this one is to the right. Right here we can you can see we have a repeat. Great. And we're going to explain that in the future video. And here you have some options when you want to combine different shapes. So if I could control deal May keyboard, I can make a duplicate of this shape. I could hold the shift key, select both of them, and I can add them. As you can see, there is no one single shape. If I go back with control Z, you can see we have subtract so it will subtract that part off this selection, we have intersect. As you can see, it's only going toe intersect where those two shapes meet and you can see right here we have Intersection one, and we have this same icon as we do right here so that you can know what you have selected for any of these. And finally we have exclude overlap. So basically, it's going to exclude this part when they are overlapping and finally showing you that right here. Let me quickly delete this one and position this in the center. So if we move below, we have component. So you can create this shape to be a component. And we're going to cover components in a separate video because it's really important part off your adobe X'd workflow. Below that, we have dimensions. So we have wit, we have the height and you can simply enter any value you choose right here. So, for example, 500 you can presenter and it's going toe expand to 500 in which we can see the position on the X y access and you can rotate it. So, for example, if I type in 45 degrees for center is going to rotate the shape to 45 degrees, you can also click right here to flip it horizontally or to flip it vertically and because it's a rectangle, obviously is going to look exactly the same like so you can also hover and rotate. You can hold shift to snap into different increments, and you can see all of these dots right here in the shape if resuming a lot closer. You can see that dot right here what those dots do. You can click on them and simply bring in all of these edges off this shape to make it more around or more straight below, that we have responsive resize, which is always said toe auto and on and responsive Resize is obviously useful when you're designing something that needs to be responsive. So just imagine you're designing our desktop website and you need to create a mobile version of it or the other way around. You will going to use this responsive resize, and we're going toe include it in one off the future videos where I'm going to go just a little bit more deeply just so that you can understand. But basically what it does is going toe resize all off the elements inside off your art board when you're getting to a smaller and smaller or bigger or bigger sizes, and they're going to correspond with each other depending on where their place. So just imagine, for example, you have the text right here. You can make it on mobile Toby below here, and it's going toe. Reduce the size off these images. For example, if these are images and it's going toe all work really nicely. But as I said, it requires a separate video because it's the topic off its own below that we have up a city so you can lower it right here. Or you can use the keyboard shortcuts. So, for example, I can press one. It's going to lower down to 10% if I press zero is going to increase it to 100%. Below that, we have blend modes, so if you ever use for shop, you are overrated to blend. Modes exist in four shop for a number of years, but it's just been included in Adobe X'd and blend modes are obviously really important if you want to blend something, so just imagine you have image on top off a shape and you want to blend it differently. with your design, you can use bland moats and you can click right here. And as you can see, we have number off thes blend modes. All of them basically took from four shop below that we have coordinate radius controls. So we have same corner radius for all corners. If you click right here and you can change all the corner radius values if you select here and press 24 20 pixels, for example, you can press enter. And if I zoom in just a little bit closer, you can see that all off the edges are not rounded by 20 and you can click right here and choose different corner radius for different corners. So, for example, you can hover right here to see which one it is its top left corner radius. So it's this one Benefit press zero press enter. You can see that all off the corners around it, especially except for the top left corner. So I'm going to bring all of them down to zero, as you can see right here. And if we move down, we have the field color so you can click right here and you can choose whichever color you want. You can lower the obey city off the color right here. So from 100 all the way down to zero, you can click here to explore different color palettes. And you can switch between solid color, a linear ingredient which is going to go from one point toe other points. And finally we have radio ingredient, which is going to go from the center out. When you chew solid color, you have the option off using the hex code. So, for example, if you choose a nice blue color off three e c six f F presenter, Now we have this blue color and you can add it as a swatch. You can simply click right here. And whenever you're choosing the color, this watch is goingto be located right here. So you can then simply click on it and it will apply that color to the different selection off. You're choosing below that we have the border. So the border is this border around our shape, and you can increase the size of the border. You can add dashes, and you can add a different gaps between those dashes. So right now it's at one But if I increase it at 10 you can see that the border thickness has increased. If I click right here, I can change the color off that border. And this is where the color swatches come in handy because you can simply click on it and it will apply that same color right here. But for example, if it shows a bit darker color darker blue, in this case, you can click right here and save that as a difference. Watch. And now you have completely different design. And now you can play around, for example, 20 once again. And now you can see how that looks like below that we have some other controls. So we have controlled for the strokes. So how this shape is going to behave, how it's going to interact later on when you're working on it. So, for example, we have in a stroke, and you can when you install X that you can simply see what this does. So the dot is going to be on the inner side of the shape. Outer stroke is going to be on the other side of the shape center stroke basically in the centre off the shape right here we have the but cap, which is basically a square ending off our shape. We have round cap if you want thes caps to be around it and we have projecting kept, which is basically in the middle off the cap, but is going to be squared once again. Below. Here we have Mr Join around joint and battle joined. However, you want all of these dots to join. Basically, below that, we have the shadow and when I click on it is going to create a drop shadow basically, and you can click right here to lower do basically of the shadow, so you can see when I increase it, you can see how that looks like, and by default it's and 19% and it's always black, But you can changes. You can click right here and choose this color, for example, to be our shadow. And maybe we can go even a little bit darker. And here you can include increased distances. So, for example, this is exposition. This is why position and finally the background blur off that shadow. So if I type in 10 for example, you can see it goes to the right 10 pixels. If I type in 10 right here, it will go to the right into the bottom 10 pixels. And if I increase blue to 50 for example, presenter, you can see that this insane blur appears out of nowhere, basically, and you can switch it on a north right here, and you can use background blurred as well. Now, background blur is extremely useful if you have background images. So just imagine this is an image. You can include this background blood, and it'll blur that image against the background. In this case, it really doesn't do anything because it's just basic shape, but you can play around with this. You can increase your Pace City, and it will increase your pay city off your image or off your shape. And this will increase or decrease the brightness, and this will increase or decrease the amount. And finally, we have mark for export. If you click right here, it'll market for export, and you can easily exported the shape later on for developers. If that's something you choose, so that's basically it for these shapes. Now let's quickly run through these other ones, so we have the circle. If I hold shift, it will create it evenly. Or if I hold control old and then draw, you can see how that looks like. Or if they hold control all shape shift, it'll draw from the center, and it will create this nice and even circle. But if I left go off the shift key, you can see how. Now that looks like delete. And if I click on this one, position it in the center. You can see all of the same commands because it's the same shape, basically just the circle, so you can play around with them right here. Except you don't have these commands for different corner radius because it's a circle and you cannot change. Basically, the corner ladies on the circle. And finally, we have polygon tool right here. If I hold the shift key, it will create this triangle. But what's different about distal is you have this corner count and you have this corner radius. So for the corner contact currently we are at three. That's why we have this triangle. But if we click five impressed, enter it will create five different corners, and you can reduce the corner radius by simply drawing here, and it will create a perfect circle or go the other way around anything. Go back to the original shape. Or you can create a different corner radius right here. So press 20 for example, and you can see that it rounded these corners at 20. Same liquid it with this one. Originally in the next video, we're going toe work with the pencil, so I'll see you there. 13. Pen Tool Adobe Xd Basics Course: mental is located right here, and when you click on it, you can simply click. Then hold shift. If you want to draw a perfectly straight line or you can click anywhere you want and you can simply close that selection toe bring in shape, you can then click on any of these points, and you can draw the mean outside and so on. And as you can see, all of these points are straight. But if I double click on any of them, it will create a curve. And you have these additional options for that particular curve so you can click right here and you can bring this corner in and this corner will go out. Or you can simply bring them in, like so by simply clicking on this dot and moving it towards this point, and it will create this straight line once again. Or you can simply double click one more time, and it will create perfectly straight lines Now for the controls. You can see them right here. You're gonna lower the airbase city off this shape and so on, and you can, for example, create around kept, and it will create rounded corners for this particular shape. And as you can see, we are now at center stroke so you can see where this dot will go. But if I double click right here, it will create this as around it point. And now these controls really don't make any more sense because I over written them basically because I double clicked on all off these individually so it can move them around . You can create different shapes using dismantle. And, as I said, you can really play around with, and great different shapes that are going toe help you with your design process. And finally, when you're done, you can click somewhere outside and then you can select this shape on its own, and then you can change the color. For example, it's white in this case, and let's include red. All of its include this color. You can include the border, and if I click right here it for coming at this color, maybe I can type in 20 but not for you basically, but for the size of the stroke, and you can see that we have exactly this same look, so you can really carry the same look. You want throughout all off your shapes and carried them on later on to the pencil as well . So now let me quickly show you how the blend modes work. So if I place it on top off this shape, as you can see in your layers panel, it's right on the top off all of these other shapes. So if I click right here, choose screen, for example, you can see how it looks like on top off this other shape. If it choose overlay, it's going to look a bit different if it's use soft, light, hard light. So all of these are going to look a bit different when you place them on top off each other . But as I said, it's really extremely important tool to have when you're working with images later on. Now, one last thing I want to show you about the mental. If I click right here, click right here, then right here. And if we hit, escape is going to simply use that line, and now I can simply click around kept, so if I zoom in a little bit closer, you can see that now are edges are completely straight. What if I click right here, it will create that round Kep. If a click on projecting cap, you can see how all of them look like. So, for example, we chose round cap and now we want to add a few more points so that we can further create additional shapes to the spot so you can click right here than right here and then right here, for example, toe add multiple points to the spot. And now you can simply click on all of these individual points and you can further move them up or down. And as I said for this shape, you can simply double click on any of them, and it will create this around parts for you. If you wish it any point, you can add new additional points to this spot, and you can close it off like this one. But we're just going to leave it here for now. And you can simply click somewhere outside, then selected, and then you can move around because it doesn't have any field color. You can include that as well. You can see how that looks like, but because we created as pot, you can increase the border color to 20 for example, and you can see how that looks like. If that's something that you're going for, that's basically it for the mental. And in next video, I'm going to show you how you can work with textile and one it brings to the table when it comes to a Toby X'd, so I'll see there. 14. Text Tool Adobe Xd Basics Course: in this video, I'm going to show you the text tool that comes with Adobe X'd and water its possibilities. So textile is located right here, or you can use the shortcut command T. You can click on it. You can click anywhere right here, and you can type something. So, for example, this is a text, and you can select it by using control commands A. And you can change all of these parameters right here so we can start from here. So here you can change the front so I can click right here intact in the later, for example presenter. And it will change to that front. Right here. We have the size of the phone so you can use 40 for example, and see how that looks like right here. We heard the front wait. So depending off the front you have installed and you won't use for your particular project , you'll have these different weights. This fund comes with a lot of different weights, as you can see right here. So it goes all the way from 10. Which, as you can see, it's really Dean, and you cannot see it really well unless it's really large and goes all the way down to black italics so you can see how that changes. But let's keep it at a regular. So here it is, right here. Here, you can change the character spacing. So when increased this for example, a 20 you can see. And maybe we can use a bit more. So, for example 90. You can see that it increases the space between the characters. Right here we have the lines basing. So, for example, you can imagine that, like in copy this and based it down a few times. And when I select ferreting and increased this distance to, for example 200 you can see that it increases the distance between each line off text. So that media control is that a few times and go back to zero right here as well. And what we have right here is the paragraph spacing now, because this is not a paragraph, you can use the command right here. So this is the point text. As you can see, it goes from one single point and it is left aligned. So it goes from left, right, you can align it to center. So when you are typing, it goes from the center out left and right. And finally we have right the line, which is basically the same as a left. You're just typing from right to left. Here we have point text, as I said. So it goes from one single point, but you can convert it toe area text right here and now you can see it's the area text. What are the differences? Well, you can expand this area text and because it goes from the middle right here it will expand to the middle and you can see that the text is staying. Been to the centre right here. But if I left line that you can see that it moves to the left. And now this paragraph text is going to go from left to right and fill out this box now to quickly fill it up. I can click right here to the plug ins. I can use my Lottum ipsum plug in and you can install it by simply clicking right here. Then you can click right here to the search tool and simply type in Lauren Ipsum Press center and you can see it right here you can simply click install, but because I already have it installed, I'm going to simply click on it filled with placeholder text. And you have to accept this agreement, and you can use whichever one you want from right here. So let's use this one and you can click. Insert text, and it will feel this box that you created for your paragraph with this dummy text and you can expand it or you can over how many lines of text you want. You can select everything if you think it's too little off text. You can select everything by hitting control a then hit control C to copy this text and you can click, enter and hit control V to paste it. How many times you want, and then you can see you can expand this text down or you can even go to the right and it's going to fill it out evenly, as you can see right here. Now let's move on what we hear right here. Let's quickly convert it back to point texts. What we have right here is the upper case, so everything is going to be uppercase. We have everything to be lower case we have title case So every single word is going toe have ah large letter at the beginning of it and then small letters at the end we have superscript which you can see what it does. We have sub script but this works well with the letter. So we hit t once again and let him type in, for example I don't know 120 degrees Celsius, for example. So you can see we can use the sub script there or you can select this and use superscript and it will place it on top or use subscript and it will place it on the bottom. If I select everything in click right here, it will create an underline or you can strike through the text and it will create the strike through through your text below that we have regular stuff. So basically we have a basically you can increase it or decrease that we have the blend mode. So if I increase the size of this storm, for example 200 maybe even more let's use five hundreds and I can put it right right here. If you jump back to the layers panel. You can see it's above this main text, and now you can use the blend mode and see how that looks like so you can use light. And, for example, you can use overlay and just play around and see what it works best. So it is. You can see exclusion. You can see the see through effect on this text through and you can see the background text even better. Below that, we have the regular stuff. So feel color. You can click right here and let me change this back normal. You can change the field color right here. You can enter the hex code so basically the same for the shape players. As you saw in previous videos. You have the border color and you can let me quickly hide this right here. You can see that now we just have this border color and you can change it separately. So it's not red, and the same is before you can increase or decrease the size of that border. So let's use 20 for example, and you can see how that looks like if I go all the way down, we have the same settings as for the shapes, because you can even convert this two parts. So let me change this back to fill color, removing the stroke. Go to somewhere around here and you can see you can add shadow and back Rambo so same as the shape players. But right here you can right click on it. And right here we have some off these options. But for example, you can juice but and convert toe part. And now here basically converted this to shape layer and you can further change it right here. Or you can simply double click right here. And you can delete these dots or you can play around with them if you want to create custom shapes from your text. So that's basically it for the textile. And we're going to quickly cover our ports in the next video. So I'll see you there. 15. Artboards Adobe Xd Basics Course: When it comes to our boards, you can create them from the home screen. Second click right here and choose any of these as already showed you in the previous videos. But when you already created an airport and your inside, I will be eggs already. You have one more option so you can click right here. But it says are poor solar. You can click a on your keyboard and you can choose from all these varieties off our boards . And when you chose your our port and you have it right here, you have a few more options right here. So, first of all, you can change the width and the height right here, and you can change the orientation off your our port. So this is extremely important. For example, if you're doing some work which is going to end up in print, you can quickly rotate it from right here so you can go from portrait. You can see how that looks like. So basically it flipped wit and height and changed their positions. And you can change it back to landscape and you can see it changes back. Deception is responsive resize, and it's what it says. Basically, it's mainly used for responsive Web design. But when you click on it and you start to resize this our port, you have these pink outlines basically around the text, and it's going toe responsively resize as I move this along. But it has toe contain itself inside of the container, and I'm going to explain that in a separate video. But just so you know, that is what that does. So just imagine you have all of these different images and shapes and icons, text shadows and so on, and you want to responsible resize them. You have to have them in separate groups, and you have tow resize in those groups separately. But as I said, I'm going to explain that in a different video right here we have the scrolling. So if you want to use the word tickles crawling, which is from the top to bottom and the other way around, basically you have that option right here. And Adobe X Team team is working really hard to include horizontal scrolling as well, so that you can present your clients with different slight shows and different sliders using this function, and you can choose Vieux Port height. So basically, just imagine that this is a website and view Poor height is at 10. 80. So if I try to extend this our port, you can see that you poor height states right here at 10. 80. But if I move it down, you can see that it changes. So you can basically see where is the fault? Basically. So where the screen ends and all of these different information at the bottom begins. So that's what that is for below that we have appearance. So basically, you can change the color off this our port. So you can change this background color. You can select it from right here so you can use this tool and choose any of these colors you see right here. So now it's blow, for example, you can click on it. You can enter hex codes basically the same as already showed you with the colors you can use solid color, linear, radiant, all radial radiant for this and background off your our port so you can do that with it. And finally we have the grids and we're going to explain to grids. In a separate video but basically it's when you're designing. You want to have something that is going to guide you through your design process, so that's basically when you're going to use the creates the most because you want to become more and more precise in your design work. So when you send it over to developers, they will know exactly where they need to place some elements. In the next video, we're going to cover layers and everything that the Layers panel has to offer, so I'll see you there. 16. Layers Adobe Xd Basics Course: When you're working owner design, it's extremely important to keep track off your layers, and you can do that in your layer special. So here we are, clicked on the are poor, then right click right here. It will change from our board's two layers panel so you can see the first layer and Onley layer is the text. But for example, when I include something, Toby my button, let's use something like 500. Which 80? Maybe something like that. We can include a corner radius of 20. We can change these colors. So, for example, let's used this gray. Let's remove the border and let's duplicate this text to hit control deep and I'll place it right here and, for example, use click here text and I will simply move it. Using my shift key and my arrows on the keyboard. I can position it somewhere around here and make sure it goes from the middle. I can position it to be here. I can use the white color, and I will place it just right here above this rectangle. And here where it comes the fun part. You can change the names off all of these layers insipid. Double click on districts and call this beauty and short for button. And you can see thes markings right here. So T marking is for the text layer. This market is for the shape layer, and basically any other tool use is going to have different marking. So if I click right here and his escape, you can see that pencil is used to create this. And it's basically shape, layer, but using the mental and this is the complete shape layer right here. So basically default shape layer. Let me quickly delete this, so click on it and delete it. And you can move these layers up and down. And you can position that wherever you want and you can select them by using control key. You can use control G to create a group, and I can rename this group the bottom, for example, like so. And now you have these two objects in side of the group and you can position that group using these commands right here. So when he placed in right here, and I'm going to get rid off some of this text because I don't need all of it. So, for example, of its Use it up to here. Just imagine you have this paragraph. You confused Control D You can use something like this. Remove it using backspace, hit control A and use something bigger. So, for example, 90 And maybe we can go from regular all the way down to heavy. For example. Maybe we can even change this color toe a bit off a dark color. And what you can do is select all three in click right here, toe left, aligned them and you can click right here and then use this option which is going to distribute them vertically. So basically it's going toe have exactly the same spacing between all three. But I don't want that. I just want this to be here, this to be here. And no, I like this spacing because it's way less than it was before. And now I can distribute them like so I can select all of them, hit control G to make another group so you can see we have group inside of the group and you can have as many groups as you want. And I'm going to simply quite here to align it to the center off my page and you can right click right here, and you can on group these groups and layers. So that's basically it for the layers. You can move them around, you can lock them so they don't move. So I'm gonna click right here and try to move it. As you can see, it shows me this lock, and it's going to tell me basically that it cannot be moved unless I click right here. Toe. Unlock it. You can click right here to mark this for export later on. And it's going toe, however, from this to this and show you that it's ready for export later on when it comes time to export this for developers. And finally, what we have right here is the height. So when you quickly want to hide some elements, you can click right here. It's going to still be inside off your layers panel, but it's going to be hidden from view so you can work on other things and then simply jump back. You can see it's great out, but when I click on it is going toe become visible and become more prominent right here. Inside, off the layers panel. What we can also do is weaken search, so as you can see weaken, search for images, shapes and text and you can click, and it will show you where they are inside off the our ports. Or just imagine you have this long landing page for a website and you have 50 different images and just want to locate images for export. You can use this shortcut. You can click images. It's going to show you all images. Select them and you can export them like that. If that's something that you want, that's basically it for the layers panel. In the next video, I'm going toe talk about the components, and I'm going to explain how you can use components in your work toe. Increase the speed as well as how you can work smart using those components. So I'll see you there 17. Components Adobe Xd Basics Course: working with components in eggs is a great addition to your workflow, because it's going to increase your speed as well as allow you to work smarter than ever before. Components are located right here inside of your assets panel, so you can create anything you see right here into a component. You can use colors for components, you can use character styles, and you can use components for different elements. So let's get started. When I click right here. You can see that now I can select my component from right here, and I can add component from here. And I can also use shortcut control or command key to convert anything you see toe a component. So basically, you're not going to use different components right here for the text because we already have character styles. And this is going to allow you to quickly drag and drop and apply different character styles. Different texts. So, for example, we want to use this color in the future. You can simply click right here, and it will add that color toe here. We can use this color as well, because it's a bit different, and let's quickly change this color to Maybe I don't know, light blue or something like that. Maybe this color through doesn't matter and you can click on it and click right here toe. Add that and as you can see, when you select group which this bottom is because it contains bottom as well as the text is going to select those two colors. So it's really smart that way. Just imagine you have 50 different elements inside off one group and you can select in dark group. Click right here is going toe. Add all of the colors inside of the group right here. So why this is important. Just let me make a quick copy so I can select this text. Get control D and I can move it right here. And I can simply change the color to red, for example. But if I want to use this color for this text, I can simply click right here and it's going toe. Apply that color. Now, if you want to change, this collar is going toe globally. Apply that change toe all of the instances you have off that color inside off your our port and not just this our port but the entire X'd document so I can right click on it and Jews copy. If you want to copy this color or I can click, edit and, for example, I can use this color, and you can see that it applies those changes in real time so you can really easily change that color. Just imagine that you're working with the client and the client changes their mind. For example, they don't like this color and, they might say to You can change the color toe lighter. One. You can simply do this. Send them to design if they don't like it and say, OK, maybe we can try a blue car looking click right here. They can even add your hex code. So just imagine. You can use three C six effort, for example, for nice blow, and it will automatically change no matter how many instances you have inside off your design. So using assets using components and colors, it's really important. It's really going toe speed up your workflow. It's really going toe, allow you to work with less hustle in your life is going to really free up your time and really improve your work for overall below that we have character styles, so you can once again click on the text. You can click right here, and it's going toe. Apply that character style using that same color. But when I click right here is going to apply exactly the same character style because it is exactly the same light. So 90 heavy light on 90 K areas you can see right here, but it's going to do that in the different color. So when you click right here and apply the care for styles, as you can see, it's different once again. So why This is important if I make a change, So he controlled the for example and duplicate this one more time. I can maybe even remove some off this text and placed, for example, right here. And if I want to use this character style for this text, I can simply click on it, and it will apply that character style to this text. So, as you can see, making changes globally is extremely easy with Adobe X'd and using all of these components , colors and character styles. Now moving on. If you want to create a component for your shapes for your for example, buttons, icons, colors and so on. You can use components right here below. You can click right here, or you can use control command Que. And it's going to create a component called bottom and is going to show you how many instances you have on your design. So when I click right here, you can see that it changed. If I do control zero to go back, you can see that it changed from group when a hit control K once again. So this indictment and this diamond indicates that this is the main instance off this component. You can see it right here. So if resuming a little bit closer, you can see this Green diamond indicated that this is the default state of this component and this is the master component and you can have as many child components as you want inside of one master component. And when you make changes to the master component is going toe, apply all of those changes to the Children components. You have created a swell and you have these states for the components. So, for example, you can click right here. This is the default state, you can choose hover state. So when you hover over those components is going to show you the hover effect. So let's juice hover state and you can change the nameless just your hover and for the hover. Maybe I can. I just added it slightly and I can jump inside, maybe include a shadow, maybe make it 2020 and I don't know something 10. For example. This is going to be our hover state. And when I jumped back toe my components, you can see that this is the harbor state. This is the default state. So when you animate this later, and when somebody clicks or hovers writer on your bottom, it's going to display this one. You can even go a bit further. You can change this text Toby to become different. And, for example, if I click on the harbor State and then jump inside, I can change the color maybe to this color, for example. So when we jumped from default state toe, however, state is going to change the color, you can change the text, the positions you can add icons and so on and so forth, and finally we can add multiple states. So default state is this blue color. I can add a new state and called threat. And on this red, I can double click and choose the right color. As you can see and we jump back to the default state, we have it right here. We have the hover and we have the red you can add as many off these states is you want. So just imagine you have different buttons inside off your design. You have blue, red, green and yellow, for example. You can add all of those states and quickly apply global changes to those states. Because just imagine, you can, for example, hit Olt hold it and simply create a copy right here. Click right here and go back to the default state. This is your red state. And because I used all to make copy, you can see that now this diamond has changed. So it's filled right here and it's hold right here and that is displayed right here as well as well as right here. So we have the default state, which is the main component master component, and we have in the Harvard Sorry, Red State, which is this state right here? And it's the Children component off this master component. You can see that it's blue right here. But if I click on the red, you can see how that looks like if I hold my old key and make another copy right here. Andrews hover effect, for example. You can see that it's still a child component off this master component, and you can see that it changes right here. So if you want to make any further changes to this monster component this button right here , you can do that right here. So when I double click to jump inside toe Adit this master moment, I can, for example, increase the coordinators to 50% and you can see that it applied that same change toe all of these components. I can click right here and move the text, and you can see that it applies automatically toe all off these child components. You see right here. If we want to increase the size, for example, maybe I can click right here on a Bt and maybe increased the height 100 press center. You can see that it increases the height on all of these child components as well as on this master component. So I've been bringing back to the center like so maybe more with here, and you don't have to have exactly the same look for all of these child components. This is just an example. But this is just to show you how many possibilities are there. So just imagine that you have 50 different art boards right here and suddenly clients client decides that they want to include an icon with this bottom. So what could you do? You have this option that already showed you that you can change all of these different components and states using just basically one click. Or you can go toe all of those different our ports and make all of those changes in just lose time. Or you can use this technique and simply do that in, like, five minutes or so. So that's basically it for the components. In the next video, we're going to quickly cover plug in spinal. So I'll see you there 18. Plugins Panel Adobe Xd Basics Course: in this video, we're going to quickly cover the plug in spinal, so it is located right here at the bottom left. When you click on it, you have all of your installed plug ins right here, and every single plug in is a bit different, so you can expand this if you're plugging, has multiple options. So if you click on this arranger for X'd, for example, you have all of these different options so you can expand to see more or reduce the space to see a bit less. If you use this for a splash. Obviously it's for photo generation from on splash dot com. You want to have this expanded so you can have as many options right here, and you can see as many of them right here so that you can use them more easily. And you have all of these different plugging. So whenever you click on different plugging, surveys showed you Lauren gypsum and how it looks like. And if you use on drove, for example, you can see how that looks like, so they are really different on. They are differences between them, but what's most important is that they are easily accessible right here on this plug in spinal. If you want to add a new plugging already covered that in previous videos, you can click right here and it will take you right here. You can use the search bar. You can browse, you can manage all of your existing plug ins. And as you can see right now, have a nup date. I can click right here toe update. This plugging is going to load and once it's finished is going toe. Show me that the plugging has updated and now it's up to date. You consort them right here from the last updated to name so you can go right here and it's going to update right here as well. You can click one to discover and you can use this editor's choice. Jumpstart your design. So all of these collections are going to change from time to time essential plug ins, future plug ins and so on and so forth. And you can browse by categories right here below. So that's basically the plug in spinal is going to improve your workflow dramatically. And I really recommend that you use plug ins because they're going to save your tons of time. Just imagine that you're going to create a contact page for your website and you need a map . You have to goto Google. You have to make a screenshot jump inside a photo shop and so on. And so far, Or you can simply use this maps generator and you can create a map right here. But I think first I need to select the layer so it quickly create one layer. So what that beat this layer, for example on can reduce the size right here. I can click on the maps generator now, and you can see you can add a location. You can add a place. So, for example, Paris compressed enter and is going to generate that map for you. So that's how easy it is to use plug ins and the plug ins panel inside of Adobe X'd, and you can explore a bit more. And because there are so many plug ins to choose from, you can simply hit, browse. And, as you can see when I start scrolling, there really is this endless list that you can scroll and explore how many you want and use whichever one you want from here? In the next video, we're going to talk about the repeat. Great inside of Adobe X'd an amazing possibilities It can bring to your work, so I'll see there. 19. Repeat Grid Adobe Xd Basics Course: when you're designing most of the time. Usually you have these tedious tasks off repeating elements, and usually you have to create those elements separately. But using Adobe X'd we have this amazing feature called the repeat grid, which is going to enable us to create all of those different elements really quickly and without any hustle. So to do that, I'm simply going to click on the our board hit control de to duplicate it and to make a new one basically. So I'm going to do it. This except for the original button and click right here. Maybe I can place this right here, and I can use the rectangle till I can simply click and create this selection to create an image. And I can select all three and simply click right here to distribute them vertically. And I'm going to simply change this color to hear removed the border and right. But what I want to do right here is include an image. So have these images right here in my folder on my other screen. I'm simply going toe drag and drop an image right here and is going to populate that rectangle tool that salary created, and I can simply select everything you see right here. Heat control G. And I'm going to call debt, for example, card, because that's going to be our cart. I conduct click on this text to bring it in. Just touch like so, and maybe I can place it just here, and I can select all three it simply quite here to distribute them evenly. Now, what I want is to make a duplicate of it. So in the past, what you usually have to do is you have to make a duplicate. So I have to hit Control de, for example, and you have to position it like so maybe I want to make another copy. So, like so. But using Adobe is D is really important. All they have to do, it's simply may click with that selection. Click on this. Repeat great and simply you have these bars right here at the right and at the bottom, and you can extend to make as many copies as you want, and you can even increase or decrease the spacing between them. And you can see that in numbers. So right now we have 42 pixels between these and you can, but you can also do is drag it in another direction. So you can see how easy it is to make multiple copies off this same object. And you can do the same as already show you here. So right here we have 57 for example. And right here we can use 57 as well. So when you have created your repeat, great, this is how it looks like. And you can click somewhere outside. So for example, to here, and you can simply drag it and you can position it however you want. If you think this is too much, you can simply lower the amount you have right here and little quickly expand my our ports so you can see it just a bit better. So perhaps, too here, maybe like so. And what I want to do now is to simply select more images. So I'm going to select all images from my folder. I'm going to simply drag and drop on this 1st 1 and you can see it's going to populate these images that you see right here. What I'm actually going to do is a low over the amount once again. So up to here, for example. And you can change old off these things individually, or you can change them all together so you can click on this text, for example, and you can move it and it's going to move this text, whatever. You see it on the inside of the repeat grid. So maybe we can make it center align may weaken. Position it to here. Maybe we can move the bottom to the center like so. And maybe we can increase the corner radius of these images to 20 for example. And when I click outside, you can see that it changed the corner radius for all of our images. Right here. If you want to add it things individually, you can do that as well. You conduct weaken this image, for example, and dull quick once again, you can hold your shift key to position it a bit better. You can double click on some of these images toe reposition themselves, for example Maybe on this one I want to move it to here and you get the idea. If the image is too big like this one, for example, I can position it independently off all off these other images and all these other elements inside off our repeat Great. You can also change the colors. So, for example, if a double quick right here to jump inside this button, if you want to change the colors off all of these buttons, I can click right here and then simply changed the color toe here. But because this is not my main instance, this is I can jump inside of it and I can change the color right here. And as you can see, it's going toe update all of these colors automatically, and it's going to make the change globally. So just imagine, have 50 different our boards is going toe apply. That changed all of those different our ports and is going to do that automatically at the same time. So that's really the main advantage off. Repeat greed and working with components inside of Adobe. Easy because it makes your process just a lot more foster a lot more easier and frictionless so you can get to designing. And you don't have to worry about all of those different processes. You had to worry in the past one final thing I want to show you is when you click on this repeat grid, all you can see is this first card that we created because it's located inside off this selection. So when you want to ungroomed pit, you can click right here and you can kit on group great, and you can export it. And you can see all of these different cards now and you can play around with them if you want to. So, for example, I can move this left and right. Whatever I want, I can move it even between these are ports Dragon. Drop it right here. I can delete it, and so on and so forth. So basically all you have to do is create this one hit, repeat grit and then expand and include as many you want and make global changes so that repeat great as much as you want in the next video, we're going to talk about guides, so I'll see there 20. Guides Adobe Xd Basics Course: when you're designing most of the times you need guides, because if you don't use them and you don't have any guys to guide you through the design process, you're going to end up with elements all over the place. So Adobe exit comes with guides as default, so you can zoom in a little bit closer. And if I hover right here, you can see this change. And it goes from dark gray to this light color, almost white on the top off my our port as well as on the left side. And if you ever used guides in the four shop, it's basically the same story. But you don't have to go outside off this space, but you can simply hover over our board and you can use those guides. So, for example, I can click on this card. I can hover right here, click and then drag toe. Apply my guide. You can see that on the Y axis. It's 67 pixels from the top, and if I cover right here and click on the guide here, drag it and move it in the position. You can see that it's 133 pixels from the left and you can see it's 1787 pixels all the way left to the right and you can simply let go. And then you can align them using the same principle right here. So let me quickly group them hit control G moved into the center. And now I can apply that guide right here. As you can see, it's 193 pixels from the left, and I can use the same thing. But you cannot draw from the right or from the bottom. You have to draw from the left, and you can see that it's 192 pixels right here. You can be as precise as you want. But for example, now when you're working, let me quickly on group this when you're working. Just imagine you're working on this element and you want toe. Make sure that it has the same spacing on this side as well as on this side. You can simply drag it on the grid and simply align it. Toe this guide on the right, I can simply move them right here and one pixel toe the left and now we're going to have 109 3 So basically the same spacing as on this site. So that's how easy it is to use guides if you want to use them on other our ports so you can click on the airport. Right click guides, copy guides. You can click on this, our port right click guides and base guide. You can use Control V or could command. The shortcut is going toe based. Those guides onto this our port, and you can simply align all these elements to those guides. Same likely did on our first our port. So that's how easy it is to use guides. And I really recommend you do, because it's going to simply make work a lot easier. And it's going to make your elements stand out on the page and look even more professional than they are because they're simply following this strategy off, aligning to the left right top or to the bottom using guides in Adobe XY. In the next video, we're going to talk about the grids, so I'll see you there 21. Grids Adobe Xd Basics Course: when you're working in Adobe ASD, especially if you're working for the Web, you need some kind of a great system. You have this great systems all around the web, so you have the most. Well known is bootstrap, obviously, but you have other ones and, for example, for working in the company. Maybe your company has their own great systems that they developed for their project, so you can easily apply that grid system in Adobe X'd. All you have to do is click on your our board and right here at the bottom, you have great, and you can click right here for the layout, and you have all of these different options. If you don't want to use layout, you can you square and it's going to apply those different squares. If I zoom in all the way right here, you can see how that looks like, and you can use square size. So if I increase that to 50 you can see that it increases the size off the square. So wherever you're dragging in, moving these elements you have inside off your are part is going to snap toe those grades and to those square size. But as they said, if you if you want to use a grid system and you want to use a layout, you can use different layouts in Adobe X'd. So what we have right here? If I click on this art board, we have 12 different columns with Got Erwitt off 16 and column with or 1 25 So Got Erwitt is basically this spacing between the columns. So you have the column right here. Then you have the gutter wit. Then you have another column and so on. So basically, we have 12 different columns with got riffed off 16 and column with off 1 22 What you can do right here is you can use linked left and right margins. So all off, these margins will remain the same and remain linked. So basically, margin is this white space in between your first and last column. So that's basically 1 40 at this stage. Or you can use different margins for each side, so you can see we have right margin and left margin at 1 40 you can use top margin bottom margin. If you want to be exactly sure and perfectly sure what kinds of margin you want to use for your designs. But if we use simply linked left and right margins, you can see that they are 1 40 And, for example, I can increase that to 1 50 you can see if I could go even further and used, for example, 400. You can see how that looks like so 400 on either side and you can see that it now shrinks are layout. If I do control, is that a few times to go back to 1 40 as it originally showed me? What you can also do right here is change some of these values. So, for example, maybe you want to use a different number of columns may be on to use four columns. So that's how that looks like. And you want to increase the gutter with toe 50 for example. You can play around with that. Maybe I want to use eight columns. Got weight 100 for example. You can see how that looks like, and you get the idea. You can use this as a default, or you can make this as the default so you can use default and this is what I already showed you. But you can simply play around with this. So eight, 16 and I don't know, maybe 1 40 in click make default. And whenever you're including this option inside of your design work, this will show up as a default. Great system. So that's why I showed I told you before, For example, you're working in a design company and they have their own design system or you're using bootstrap designed system. All of the time you can recreate that in adobe X'd you can click, make default. So whenever you're turning your not it will turn that system you created on, and it will show you that system alone without all of these default options. Finally, you can change the color, didn't click right here, and then change the color to whichever color you want. You can reduce the Obey city right here. So this is at 100. This is a zero, and you can use something like 10 or 20 to make this nice see through a basically basically so you can see what you're working on. And basically these columns are for these elements to snap on. So you can hold your shift key and you can snap these elements to different columns, as you can see right here. So that's basically it for two grids. And in the next video, we're going to talk about mosques, and there are meant amazing possibilities inside off Adobe X'd, so I'll see you there. 22. Masks Adobe Xd Basics Course: when you're designing a lot of the times, you want to hide something either that's icon or an image or some paragraph off part of the text or something like that, but you don't want to delete it permanently. You just want to hide it for the time sake, or you want to use it in some other scenario. And that's where the mosques come in handy now, rather than deleting the file, mosques are none destructive, which means that you can use them later in some other project or at other points of the points of the project. So here is how mosques work. So just imagine, you want to include an image, and maybe I want to use the lips of a home, a shift key, the drawing lips and maybe I can create it Toby to 10 which to 10 pixels for the weight and height and let me place it right here in the center. And maybe we can remove the border and just so that you can see it. Maybe I can include this light grey for the field color, and I want to include my image here. How can I do this is simply I can drag my image and drop it inside. And here you can see that the image is now inside of the circle and it is masked using that circle shape now, because we're using mosques and mosques are nondestructive editing. That means that I can reposition this image. However, I want inside off this circle, which means inside off the mosques. So how can I do that? I can simply double click inside. You can see the bounds off the image, and I can hold my shift key, and I can simply move it right here if I want to. I can even increase its size. I can either hold the shift key or I can hold shift Ault and clicking one of the corners to increase the size like so. And I can reposition that image however I want. Maybe I want to position it here. I can even rotate it so I can hover toe whichever one off these corners and I can rotate images. Well, Oregon simple. Quick in one of these dots, and you can very position the image like so. And as I said, you can place it wherever you want and you can reposition it in that way. Now it's easier now for me to move it and later on down the line. If I want to replace this image and include some other image, for example, I can simply drag and drop that image inside. And you can see that the original image name will be the name off my image. So you forget control Is that to come back? You can see this name and when I include this image inside, you can see now it has changed to this name. I can simply click right here if I want to on market for export, because immediately when you include images inside off Adobe X'd, they will be automatically marked for export. Because Exynos did you have to later on export those images for developers to use later. And I can do the same for this one. I can rotate it like so Aiken Bulkeley can jump inside of this image. I could home a shift old and left click to increase it. And for example, if I want to use this as my outer image, for example, you can click somewhere outside and now you can move this mosque like this small circle, you can reduce its size. So, for example, like home a shift key and reduce its size like so. But if I want at any point to jump back inside gossip Adele Quick and I can increase or decrease the size off this image has already showed you before. Now let me quickly show you how the mosques work when you want to create buttons. So let me quickly create a button. I will use the rectangle. Maybe I can quick 20 for the corner radius. And let's use, for example, 500 weight. 1 50 Make it nice and big, and I will remove the border color and for the fill colors used some nice color. So, for example, maybe something like this, Or maybe we can even go a bit lighter. For example, something like this. And now let's quick on our textile. Click somewhere inside and quick, for example at it, and I can hit control A to select it and can use some other formed later, for example, maybe I can use 40 and maybe I can change it here to say my bowler used Bolt quite simply, and I can click right here to selected to be white, and I can simply position it right here in the center and right here in the center as well . Let me double click right here. Type this bt and and I can select these to hit control G to group them and call this button . Now I will simply drag and drop one icon, which is a PNG. I'll drop it right here. I always recommend that you use SP Jeez for the icons. But I'll simply use this for demonstration purposes. So maybe I want toe drag it like so position. It's somewhere around here, for example, and simply use this color. It really doesn't matter for this example. So now we have this button and I will simply go click right here and call it icon. And I will included inside off my button, like So. So just imagine you want to use this bottom in one instance, but you want to use this button we doubt in this icon and you want to animate it later. How can you do that? You can simply create a mosque so you can simply double click right here on this bottom and simply hit control a D to make a duplicate, and I'll double click right here and call this one a mosque and I will drag this mosque just above my icon. Select both of them, right, click and use mosque with shape. You can also use this shortcut, which is shift Control em or shift command them. If you're on a Mac and it will mask them now, you can see it really didn't change that much. I'll simply dull quick right here called this mosque once again. And if I click right here, you can see that nothing has changed. But if I change this color and now if I move this button, you can see how it is masking right now. So when I zoom in a little bit closer, you can see that the mosque is covering this part off our icon. But this part remains visible, so it's really simple. If you want to animate this later, you just have to move this mosque out of the way, and you can see that now the icon stays outside off our mosque, so when I click somewhere outside, you cannot see the icon anymore. But when I click on my mosque and I can extend it all the way to here. Now you can see this icon, and now this will come in handy later on when you start animating your designs. So perhaps you want toe make this, uh, Toby clicked state. So perhaps when somebody clicks on this edit, this icon is going to appear when they click, somewhere outside is going to disappear. And the easiest way to do this is with the mosque. So you can simply create two states using components and you can jump back and watch component video, and you can animate this later on, and then you can show it to your client or your users, and everything will be easy for them to understand because you're using non destructive methods using mosques. But you're simply hiding, not deleting. In the next video, I'm going to show you sort of a cheat sheet with all adobe eggs. These shortcuts and some of them are really important for you to learn because they're going to speed up your work full dramatically. And I really recommend that you check them out. But if you ever used adobe products before, So, for example, for a shop or illustrator. A lot of these shortcuts will be familiar to you. But if you're new to this design world and adobe products, especially Adobe X'd I really recommend that you check out that video because in it you have this cheat sheet that you can download and use wherever you want. If you want to get reminded about some shortcuts, you can easily jump inside that file and simply look for those shortcuts because it will dramatically improve your work flow and your speed, so I'll see you there. 23. Shortcuts Adobe Xd Basics Course: if you want to use Adobe X'd as a professional software and make money of it either with your personal or commercial projects, it's really important for you to learn at least some major keyboard shortcuts because they will improve your speed and your workflow dramatically, and they will make you work faster and smarter inside off X'd. And it will be easier for you to navigate the software because you're using keyboard shortcuts rather than clicking everywhere else. So here we are at help. Ex dot adobe dot com four slash xz For such help for slash keyboard shortcuts, interval the link for this video and you will be able to click and access on this page easily. Here, right at the top of the page. We have downloadable version off keyboard shortcuts, and you can simply click here to download, and it will open up a pdf file inside off the new tab. And I really recommend that you check this file out because you can easily see all off the adobe eggs shortcuts right here. And you can see separated in the file menu, edit menu, object, menu view, menu, Windows, menu and so on. So far, so you don't have to learn all of these, but you really have to learn the majority of them. If you want. Work extremely fast inside off Adobe X'd now don't stress and try to learn all of them at once because, as you can see, if you start scrolling down, they are really a lot off these keyboards. Sure, keyboard shortcuts, but a really recommended You learn at least some because they will dramatically improve your speed and your workflow while using eggs. D. And it's simply working smarter using keyboard shortcuts, because it's easier for you to work using two hands in Adobe XY rather than just one hand clicking with the mouse and you will see after a certain time it will just come as natural . You won't have to think about anything. And if I jump back toe X'd, you can see that you already have. When you hover over basically everything, you already have keyboard shortcuts when you right click. You have these keyboard shortcuts right here so you can learn them from here. But if you want to learn them at your own pace, for example, when you're not at your computer, you can download and use in this pdf file with all of the shark cuts off the B X D and then learned them step by step and then eventually you will get there. It will no majority of these shortcuts, and you work extremely fast inside off Adobe X'd in the next video, we're going to start focusing on prototyping tools, and I will explain what prototyping tools are inside of Adobe X'd as well as why they're important, how you can find him and how you can use them. So I'll see you there. 24. Prototyping Tools Adobe Xd Basics Course: when you want to show your design or your concept, your client or your team, you want to be able to come across and represent your concept as best as possible. And that's what X'd offers you ready to go from the start. So they have this prototype tab, and what that basically means is you can convert this static design so more interactive one and you condone share that prototype with your clients or your teammates, and then they can interact with this prototype in Later on. Users can to, and they can point out toe maybe some flaws in your design and the things you can change with it. And it's really easy to follow and easy to understand. Process and eggs is awesome for that reason, because they have designed prototype and share functionalities all included in this one app and on this one software. So all they have to do to prototype is you need to instances, for example, off the same design. So here, just imagine we have finished this design. We're working on it using a client feedback and the design brief and followed all of the steps in the U ex parte off this project, and now we want to prototype it and simply show it to the client for their approval and to get additional feedback. So how can we do this? Is we can do that using the prototype tab right here. So when I click right here, you can see that now I got this blue circle with a narrow right here, and that used to connect to different our ports. But because I have just one our port, what I can do is jump back to the design hit control de so that I can duplicate this our port. And now I can start playing around with them and show some interaction toe my client so I could jump back to the prototype. And now when I click right here and click on this arrow, I can simply drag it to this our port. And now you can see what happens. We have this interaction panel right here which are going to explain in the next video. But inside of it, we have all of these different values that we can play around. And we can present this to our client so that they can understand it better. How it will look like when it's eventually coat so you can imagine a project like this can contain a number off different our boards. For example, you want to show how this screen will look like when they click this back arrow. What will happen next, What it will happen when they click this menu icon. If they tap this image, what will happen next? If I want to click on this avatar, for example, it would take me to the profile screen and how that will look like. So we're going to explore a few of these options in the next series of videos, starting with this interaction panel, where I'm going to explain what all of these things are and I'll see you there. 25. Interaction Panel Adobe Xd Basics Course: when you want to create a clickable prototype from your design, you have to use this interaction panel and right here at the top, you can see that you have this trigger and trigger tap is basically what's going to trigger the action to happen. Between these two are ports. In our case, action is how that trigger is going to look like. So, for example, we have the trigger tap. So when somebody taps on it, then we have action, which is the transition, so it will transition. Between these two are ports below that we have preserved scroll position. So, for example, if this our port contains a lot of these images, for example it will preserve that scroll position for some of these elements. So just imagine you want to use this never bar at the bottom toe preserve scroll position. You can do that. So just imagine, you can keep that Toby pinned right here and everything else is going to scroll destination . So we're going from here to here. So our destination is our port feed one and you can see it right here. We have animation and we can choose a number of different animations. So how they step, transition dissolve is going to look like. So we have animation off dissolves, so it's basically going to dissolve from one airport to the next. Next we have easing. So how easy or hard we want that position toe look like, Right here we have these out, which is basically is going to ease out from this airport, this airport. And finally we have the duration, which is basically how long this is going to take. In the next video. We're going to explore triggers and actions to see what different triggers due to different actions and how you can use them in your design work. So I'll see you there. 26. Triggers and Actions Adobe Xd Basics Course: when you're creating prototypes between your our ports, you want to use different triggers in different actions for different kinds of effects that you want to achieve. So just imagine, when we click on this image, we want this image to expand. And that's what we're going to do in this video. And I'm going to explain this trigger action and everything else right here. So when a jump to the design, I will change this. So I'll open up this image and you can see that I have this image right here and I will expand everything down. But first I'll going to move it all the way down toe here, for example. Next I'm going to jump inside and simply click on my image and I'm going toe expand it all the way up to here, and I'm going to simply move this avatar to here. When I click outside, you could see how that looks like. Maybe I can even expand it to go all the way to here so we can move everything like so and then finally, I can click on my image and you can see that we have corner radius of five. I can click on my zero and it will become straight on all off these corners now gonna jump back to the prototype. What I want to do is when somebody clicks right here, I taps right here. We want to expand this image and then when they click right here, it will take them back to this original our port. So let's do that. I'm going to drag this blue handle to here. So when somebody clicks, step right here, Transition is going to be auto animate. And that's basically X'd knowing what they are going to put where using their AI knowledge and learning that the exit has in the background and basically what it's going to do is going to look up for layers and layer names see their position here and here. So, for example, I moved this image right here. It was right here, and I moved all of these icons down to the bottom, and I also increased this size off this image. So it knows I did all of those steps and it's going to replicate them using animation. And you're going to see in just a second how that looks like destination is feed. Once we're going from this to this, we have easing. Maybe I want to use is in out because I wanted to easing as well as is out off this animation and finally duration. Maybe we can use 0.3 seconds. But you have all of these different variations right here. And you can you can use your custom one. So, for example, if you want to use four seconds, you can simply click four press, enter or return. And this entire animation is going to last for four seconds. But let's jump quickly back toe, maybe 0.4. And I just quickly want to show you what it's contained right here. So when I click right here, we have the drag. So, for example, we can use the drag toe display everything right here, moving from top to bottom, for example. We can use keys in game pads. So, for example, if you're designing a game or you're designing a website for a game, that somebody's going to access using a game controller so either PS controller, Xbox controller or which are other controller, for that matter, you can do that, so you have to have that particular game controller that you're designing your game or your website for, so that you're going to be ableto enter all the different commands using that game controller. Finally, we have the voice. So just imagine if you're designing for Amazon, Alexa for Google assistant for Siri or something like that, you can use voice to display how all of these different interactions are going toe look like and our went to happen when user is using their voice toe, issue a command. So something is going toe happen when they say certain things below that we have the action . So we have auto animate that we chose already, but we have the transition. If you choose the transition, you have this transitions right here selected. But if you choose auto animate, you don't have any of those because it already knows what you're going to do, and it's going to use its magic to create that option. But if use transition, you can choose from the UAE Rieti off different positions. So from dissolve sliding left, right, up, down, pushing, left, right, stop down and you can do any off them or you can even select none right here. If you don't want any transition toe happened, we have overly so we can overlay something on top off something else. So just imagine you have this menu and you want when users click right here. This menu is going toe overlay on top off any off our screens. So once again, just imagine you have, like, 100 different screens right here, and you have separate screen for the menu. You can simply do this overlay action, and it will overlay on top off all of those screens in the exactly the same position. However you tell it to when somebody taps right here below death, we have speech playbacks. Once again, you can, uh, create certain actions using speech playback. So when somebody says certain phrase or a word, it will trigger the speech playback. So it will show you that action and finally, previous our port when you want to go toe previous our port. So once again, we're going to use auto animate as a set destination right here, and you can even use none if you want to use components while designing this. But we are going to cover a little bit of that in the future video when we actually start designing our app. Finally, we have easing, so we have none is in, out, out in snap, wind up and bows. So obviously whichever one off these you choose easing is going to look a bit differently. So if it choose none, there will be not no easing images is out. Italy's out off the animation and so on and so forth. Wind up, snap and bounce A really useful in some cases in some others might not. So you might be considering using easings. And a real recommend you do, because if you choose not, it will just snap into position without any off these easings in place. So let's use these out for our case and as a set duration is 0.4 and finally fixed position when scrolling. That's what I was explaining. You can fix in this part of menu, for example, for scrolling or this stop menu or something like that. So it's really up to you and your case Now when you want to preview this, let's quickly wire this back. So, as I said, when somebody clicks on this arrow, it will take us back. So let me select that arrow and you can use control and click directly into your shape. So we're going to use Arrow icon in our case, and I'm simply going to drag it back. And because Eggs D is really smart, it will know that we selected step for the first action we selected auto animates, so it's going to auto animate back. We selected destination. So it went from feed toe feet one, and we're going to go back when they click this arrow. So it's going to go back to feet finally easing. If you remember, Riccio's is in out and duration zero point for. So it's basically replicating all of these same settings onto this our port, and it's going to go back using exactly the same animation. So it all looks coherent and all looks together when puts together at the final result. So if you want to test it out, all I have to do is click right here onto the airport name in click display icon right here at the top, and that will launch a desktop preview, and I will explain what it is in the next video. So I'll see you there 27. Mobile and Desktop Previews Adobe Xd Basics Course: When you want to preview what you have made for yourself, you have a few options, so you can click right here on the desktop preview and it will launch this window and right here in this window, if you're If you remember, we use the tap. So when I tap right here, it will enlarge, and it will reposition all of these different icons, and it will reposition this image right here to the top. And if you remember, when we click back right here, it will launch back into its original position. So that way you can preview whatever you have done before you even send it to your client just so that you know for yourself if you did the right job or not, and you know which kind of changes you have to make in order. Two followed brief in the design guidelines that you receive for from your client, the other way you can preview it is right here using mobile preview, you have to install free adobe eggs, the app on your iPhone or on your android phone, and then for whichever phone you're designing, you can use this mobile preview and you can preview this design directly onto your mobile device. Now your clients can do this to you can simply send them the link, and they can simply open this using their phone. They have to use in their phone connected via USB cable. But a Toby's team says that in the future they will be able to do that. Why airdrop for Iose devices? And why WiFi, for example, for android devices? But for now, you have to use USB cable connected to your computer. Adobe is the app installed, and then you can preview this preview directly onto your phone. That's a great addition to have, because that's where you can be sure that all of these phone sizes are big enough so they they can be seen that your tap points are optimized. So, for example, mint users step right here. They don't open this image by mistake, but they opened this image perfectly as they wanted to. If this menu icon is big enough, you contest all of these different things. Using that it'll be eggs, the app, or, if you want to see for yourself, you can click right here for the desktop preview, and you can show this director to her client or to your team. If there somewhere near you or your previewing this as part off the demo to recline and they can simply click right here and interact with your prototype. You can even click right here to position this in the center so you have less distractions around, and the more off these effects you have in your prototypes, the more it will look like a real lab, and the more clients will understand it better and know what the capabilities are. Later, when this design gets to the development phase and developers get their hands on your design in the next video, I'm going to show you how you can record this prototype as a video and how you can send that video to her client to our stakeholders or to the users, so that they can see that video or you can even use it as part off your presentations. So if you're presenting this design on be chance or dribble, for example, it can never really be useful to show that video to your audience because they will then be able to understand same like her clients will. How your design is intended to be seen and used and how it's going to look like ones coded , so I'll see you there. 28. Recording Prototype Adobe Xd Basics Course: If you want to record a video off your prototype, it's really simple to do. All we have to do is click right here on the desktop preview. And then if you're on a Mac, you can simply click right here, and it will start recording whatever you do right here in your prototype. But if you are on the windows, you have tow use windows. Keep lost G. So let me use that as for now, and it will open up de Xbox recording, and all we have to do is click start recording. Or you can use shortcut windows plus old plus R, and it will start recording. And then you can experiment with your prototype. You can click left and right in. Basically, when you're done, you can hit stop recording, and when you stop recording, you can preview that and is going to basically save it out as a separate video. So here it is, right here. If you right click can open it up with movies and TV, you can see how that looks like, So you'll going to be able to see that when I click right here, it's going to show that effect And then you can use this video in your presentations on begins, dribble or somewhere else. Or you can send it to our clients, stakeholders or team members so that they're going to be able to see, for example, when they're on the go. And they don't have the option to use eggs, the online so that they can click for them themselves and explore a little bit more into details about what you did with your prototypes. One anointing about windows that you don't have on the Mac is when you open this up as a video, you can see this white bar right here at the top. You cannot see that white bar on Mac, but you can on Windows. And for now, there is no solution. Unfortunately for Windows users, Mac users are going to continue using it without any issues. But for Windows users, you can use something like photo shop, for example, after effects premiere or something like that, so that you can crop in on this video and you can basically cut this stop portion and then it's actually going to fit perfectly into her phone more cups, for example. If you're going to use more caps when presenting this video In the next video, we're going to talk about sharing. What are your sharing options inside of Adobe X'd and how you can share these designs, which your clients to get feedback and to get the revisions going and to finalize that design with your plant, so I'll see you there. 29. Sharing Your Work Adobe Xd Basics Course: when you're finished designing and finished prototyping your designs Now comes time for sharing and eggs is great for that because it has designed prototype and share all within one up. All you have to do is just which the stabs. Now, just imagine that we have finished this prototyping. We included all of the different effects that you want and we want to present this designed to our client. How can we do that? All they have to do is simply click right here. But it says share and you have few options right here. So right here at the top. Link is going to appear here when you create it so you can change the title of this project . So let's call it, for example, feed just so that we can keep it consistent with name off. This our port you can view setting. So where why you want to share this with your client? You want to get feedback on your design or prototype, you're going to use this one. If you want to send this design to your developers, then you're going to use this one for development which is going to share the design spec and developers are going to be able to see different colors, positions, margins, beddings, sizes, off funds, how different icons look like images and so on. We have presentations so optimized for presenting your design. If you want to use this into an environment, for example, on office environment, if you're presenting this to your clients in person user testing so it removes all of the different barriers. So users basically have to figure everything out for themselves how they can be a using this prototype in real time. So if you're collecting user data and you're doing user testing, that's what you should be focusing on right here. And finally, we have the custom so you can customize whatever appears on the screen when somebody else is viewing this prototype. Or when you're sharing this product as part off the presentation, for example, so you can optimize. Do they have the navigation controls? Do they have the common section if you want to receive the comments or not, and things like that just so that you can customize it as much as possible and in order for it to fit your requirements? So for our case, let's just use the design review, and you can require passport. If you want the clients toe open. This using a possible you can click require possible, and then you can type your password right here. Finally, you can click create link, and this is going to load toe 100% and depending off how big or smaller project is, how many different our boats you have. And finally, how many images you here Because images are big contributor. That's how long it's going to take. So what you can do right here is simply click right here, copy link, and I'm going to simply paste this link using my Google Chrome browser. And here is how that looks like so I can simply click right here, and it will show me that effect. I can click right here to go back, and that's basically if you imagine what you're going to send to your client here, you can go back to the home screen and this is our home screen. This is a second screen, so even jump right here. You can see that it goes back to the home screen and if you imagine that we have, like 50 different our ports right here. It will show number 50 right here, and clients can scroll between each our board right here using those commands. Finally, if somebody wants to leave you feedback, they can do that. So by creating a free adobe account and then simply placing this been toe here, for example, and maybe I want to say, make this image bigger, like so, and I can simply click submit. You can use this at character if you want to mention a user, which is a great addition. So, for example, if you're working as part off the team, maybe you want to mention some designer that designed this part of the design. You can simply mentioned them right here. They will get a notification. It'll ping them, and then they can jump back and see for themselves, which is the feedback for them. But if I switch right here between the screens, you cannot see the feedback anymore because the feedback is on another screen and you can see that it's on the feet. One. This is this feed one screen, but the feet screen is the screen, which contains this feedback. So, for example, you can simply jump back. Click here and it will take it back to this screen, and you can simply click. Just imagine her 50 different comments on this screen from your client. You can simply click Want number two. It will take you to its number one number three and so on and so forth, and every single comment is going to be marked with this number. When you're done with the changes, you can simple quick resolve, and it will remove that comment. And you can simply move on with your design process and you condone simply share another one with your client when you finished it, and then they can provide you with a fresh new feedback. And then you can more one until the boat reaching the agreement that the design process has finished. So that's how easy it is to share using Adobe X'd if you want to make any additional changes. So let's jump toe our design. And if I click right here on my image, and maybe I can lower the apace city just a bit, I can jump back to share and Aikens hit update link because I made that change and I want to update my link. And once it finishes right here on 100% I can simply hit Copy Link or I can click on this link and it will open it up in a new tab on my browser. As you can see, it's loading and once finished, once it finishes loading, you can see that the Obey city is lowered on this image. So when I click on it, you can see that this change the screen has not changed. But when I jump back, the screen has and it updated like so I recommend you do this just so. For example, you have 20 different screens, make those 20 changes and then hit update link. Otherwise, you will have to go screen by screen and update, update, update every single time. You have to do that before you send it to your client. In the next video, we're going to explore how you can work with different file types in Adobe X'd. What are the benefits? What are the drawbacks and how you can improve your work full and speed while using other file types? So I'll see you there 30. Working With Files Adobe Xd Basics Course: when you're working with files in Adobe X'd, there are a few things you should know. You can either work with internal files, which means files you created yourself inside of Adobe X'd. Or you can import an external file made either with Adobe X'd or some other software. With each update, extinct gets better and better with opening in dealing with daughter files. But most common files you can open in Adobe X'd apart for Native Files are for Shop Illustrator Sketch and SPG files. Exit can also handle import off images in J, Peg and PNG, as well as opening off most PdF's in this section of the course. I will explain how you can use external files as well as resource is in Adobe X'd. The most common differences between these file extensions and what problems and solutions you might expect inside off will be 60. So let's get started 31. Xd Files Adobe Xd Basics Course: when you're working with ex defiles inside of Adobe X'd there is only one thing you should know and it is. Try to keep your X'd updated as much as you can. So, for example, if you're working in X'd occasionally and you get back to it, make sure you updated first in order to get the latest features. So, for example, you saw this video or some other video and you saw a future that you might like and you jump back to X t and you see that you don't have that feature. Just make sure to update it, especially if you're downloading and using Resource is from the web. So either you white kids or some my compacts or something like that, because eggs is updated so frequently at the moment, and at the moment they're launching on update every single month. Sometimes those updates are not as huge. Sometimes they are. So just make sure that if you're using, resource is or you're working with the client and the client sent you the X defiled that somebody else has created and you try to open it. You see that something is not right. Just make sure to update it. The latest version, especially with huge updates like this last one was and the added of components and nested components. So just imagine you're opening the files. You don't know what's happening, and sometimes X'd will prevent you from opening the file in the first place because it detected that it was created in a newer version and you're using an older version off the software, so that's all you need to know. Basically, just make sure to update eggs the every single time you get back to it and just make sure that you are on the latest version, especially if you're doing, for example, collaboration. Because if you are on the latest version and the person you are collaborating with is not, then the collaboration will not work properly. Just make sure that you follow those guidelines, and you'll be fine with using Eggs D and its native files 32. Photoshop Files Adobe Xd Basics Course: when you're working with four shop files in Adobe X'd. There are a few things you should know because for shop is primarily designed to be a photo editing tool, and exit was designed from they want to be You are. You extol their some key differences, and the main one being that for shop is a bit map. It'll and the X de is a victor tool, which means that when you zoom in in photo shop, you can see the pixels while when you zoom in in X D. You cannot, because it's not a bit map it'll Other differences include filters. So, for example, if you're applying ah, heavy text filters, they must not transparent well to X'd while they're working in four shop, as they should. Also, some mosque might not work in eggs D, as they are in for shop. Because Ecstasy is using different mosques. Smart objects might not transfer well to eggs D, as they do in four shop. So here is the prime example. I have this from one of my U Y kids and I have this page call headers and it's a Photoshopped file, and you can see that this moke up has been placed inside off Smart object, and you can see that it's sticking out right here. So to fix this issue, I might want to jump inside hit control on D. Put this just above my phone, and it's going to cover the phone. I'm going to hit control and then select these tools. So BG and phone right click and choose mosque with shape. And now you can see that it's located inside off that mosque in separate dent off the crowd . Here it I've been mosque, and I'm going to fix this issue. But this is what I was saying. Some things might not transfer that well to X'd from four shot, because, as they said, four shop is just much older software. It's about 30 years old, while X'd just started a few years back, and naturally it just doesn't have the same features as for the shop does, because it doesn't do the same thing as four shop does. Some things were transferred recently from four Shop two x D. So these blend modes, if you ever use for shop, you're familiar with them, so you can use these blend modes as you do in four shop right here in X'd. But some features are missing, like blower filters and patching so you can fix your images up. So all of those things are still inside of four shop, but they will just not transferred that well. Why are Photoshopped file if you open them using Adobe X'd, you can open eggs the files in photo shop just so you can fix some of those images, even hit save. And it will jump back into Adobe X'd with that saved edit applied. But it's baked in. You cannot change it anymore. You have to open the file one more time in four shop, therefore edit it once again and therefore saving and back to Adobe XY so you can be able to use it back in X T so you can open for show files. But they're just so major limitations and you have to be aware of that. And in the next video, we're going to talk about illustrator files. So I'll see you there 33. Illustrator Files Adobe Xd Basics Course: same is with the four shop files you can open illustrate files in Adobe X'd. But just make sure that you understand that there are some limitations here as well. Same story is with the photo shop Illustrator has been on the market for the longest time, and in that time some major updates have happened. Toe Illustrator, So Ill served just has that much more to do and to offer, and it has so many tools toe offer to creators. Therefore, Exit just cannot keep up with some major effects like, for example, some advanced shadows. Some advance background blurs. Maybe some line control won't be that good in eggs D as it is in Illustrator, just because Adobe Illustrator is meant as an illustration tool from the day one and Adobe eggs is meant for the U. Y. And you extol from the day one. Otherwise, everything should work as normal and you can add it text. You can edit images right here. I have my bones IOS wire frame kit product, and if I double click right here, you can see that it opens up everything. You can change colors so you can change color right here. for example, you can double click on the text to change itself. For example, typing right here. Maybe intra Greece like so. And when I jump out, you can see you can change the folder. So, for example, may be a contributing photo. You can see that changes that front and you can change everything you see right here. So, for example, I might want to change the color of this image. Maybe I can change it to something like this Red, For example. In something like that, you can create different components using the components you see right here So you can really play around with this illustrator file. It can really be extremely useful to you, and you can use it on the daily basis in your projects. But just make sure to understand that if the person you are using this file from has applied some advanced filters and some advanced features that X'd does not support, then just make sure to either work around those issues and you create that same look inside of Adobe X'd or just simply use the most simplified version off that effect to achieve the same thing inside off Adobe X'd 34. Sketch Files Adobe Xd Basics Course: exit is great because it can easily open sketch files and they are totally usable and you can use them on a daily basis. And Adobe Steam is working hard to bring even more advanced features when you using sketch files inside of Adobe X'd so you can see right here that I'm using this file from InVision called Atlas Dark and you can Donald and use it if you want. There it's free and right here we have the mobile versions, tablet versions. We have Web versions right here. And finally we have you. Why colors and master components. And this is what's really important because all of these components were transferred from the original sketch file. And if you ever used sketch, you have to create basically the separate pages for your components. So basically one page will be for the design. One page will be for this mobile designed one for the Web, one for the tablets and so on. And the other page will be for the components, for example, while in Adobe X'd things are a bit different, so all of your components are located right here so you can see that we have these switchers and small buttons and so on, and greeting about X'd is you can see that it's located in two places. So it has two instances and I can right click edit master component. And it's going to create that master component for me, and I can then simply edit it and then make those changes. So if I zoom in right here, you can see that we have this welcome screen, for example, and these Mobil's and so on. So when I click right here, I can hold my control key and click right in sight. This and you see that we have this Grady int I can jump inside right here and click on the colors, and it's going to save that radiant. So if I right click right here, click edit, and I can simply make changes to this Grady int and it's going toe apply. As you can see, wherever we have that same radiant right here is going toe. Apply those same changes, so as you can see, you can use scare trials inside off Adobe 60. But just make sure that you are aware off the limitations that they springs because adobe and sketch are completely different companies, completely different philosophies. And the most important thing of all is sketches Mac Onley. While exit works on both PC and Mac and one final thing I just want to mention you cannot export sketch files from Adobe X'd while you can import them. You cannot export them because Adobe wants you to keep using their product. So basically you can open sketch files and they're going to continue working hard on even better integration. And they're going to allow you to open those catch files into a lot more details. And they're going to save, for example, these components and character styles and so on. But the main and important thing here is you cannot export them back a sketch files. So, for example, if somebody sent you sketch files to work with them on inside Adobe X'd, you can. But you cannot send them. That's catch file back. All you can do is basically export SPG, or either save it as a native X'd file and then send them that 35. Using Free Fonts Adobe Xd Basics Course: when you're just starting out in your design career, it's important to save as much money as possible because over time you will get toe have that celery and that earnings that is going to enable you to purchase Premium resource is so either premium images, premium fonts, premium icons, more cups and so on. But when you're just getting started, it's important for you to be able to find free Resource is just so that you can practice and that you can learn a bit better about how the pros are doing some certain things. So in this next section of the course, I'm going to show you some resource is where you're going to get free funds. Free images, free icons, more cups in someone. So in this video, we're going to talk about free fonts, which you can use for both personal and commercial projects. So first resource is Google funds, and it's one off. The most used resource is on the Web because these are Web optimized in based funds, which means you can use them for both print and Web design work, and it will work properly because their tried and tested from the goof on steam. So how you can use these funds is you can simply type in something right here. You can search funds if you know which one you want to download. So I have this front in mind called Playfair Display. Here it is. And you can simply click right here and you contest out this front and you can type here something so you can type in Playfair display just so you can see how different looks like You can increase the size of the phone right here just so that you can see how it looks like. For example, on the smaller screen on the bigger screen, right here and all the way down. So if you have a sentence in mind and you want to test it out to sea, for example how it will look like on the smaller mobile device screen, you can see it for yourself right here. Below that, we have the pairings so you can see with which other phones this front is spared. Well, from Google fonts off, obviously. So you can install these two funds and you can use them so you can see right here. This is the play for display. It's used in the title and Roboto is used right here for this paragraph so you can see how that looks like and you can switch them around right here. So now you can see that the Roboto is the one for the title and the play for display is the one used for the paragraph and you compare some of these right here as well and you can see the usage. So which countries are using this phone to the most? You can scroll the way down to see how many times this Fontes years further information so you can read more about the license if you want to about the fund. So who designed the front and so on? Here you can see some special characters which are included inside of the funds and how glitch looks like. So you can, for example, if you're designing for your customers who are somewhere outside. So, for example, Russia or my country Serbia, or something like that, you can have this serially front and you could see how it looks like if you want to use that for those projects. Finally, when you want to download the front any front from Google funds, you can simply click select this front and it will add it right here and said one family selected Y von family. Well, because you have some major styles and weights off this front included inside. So you have, for example, regular night Alec bold, semi bold and so on. So, depending on the front, you will have more, all less off these options when you download a particular fund so you can see right here. If you want to use it for the Web straight where you can embed it using this code, for example, you can specify it in See assess, so you can see right here how that courts should look like. And you can use this getting started guide for examples of how phones can be added the webpages. If you're designing for the Web and you start quoting and you want to use this one, for example, you can use this guide to learn more about how you can implement this particular fund into your website. You can even go right ahead and further customize customize it so you can see how many off these ways are right here. So you can select all of them. For example, if you want toe, download all of them you can see in languages. So which languages are supported and you can see what kinds off text, which is what I was talking about about the Cyrillic are supported right here so you can select all of them or even simply uncheck all of them. And, for example, just want to use a regular, and you can simply cried here to download this front. You can even use sky iPhones, which is sort of an extension, and you can use that extension to install and use the funds from the Google Fonts Font Library more easily onto your machine. What's next is simply you can install this front like you regularly do on your machine and you'll be ready to go. It will show up in Adobe X'd, just as it does in all of the other software. And one more resource I want to mention is creating market so they sell Premium Resource is , and you can click right here. But it says get free goods, and each week they're sending out six free goods, so sometimes they are including some interesting funds right here. You can simply shared these ones and down below if you want to unlock them. And all of these are different each week. So, for example, we don't have any fund included. But wait for another week and maybe you can get download the free front. All you have to do right here is create a free account. You can use your Facebook, you can use your email, just create a free account and you can simply then download and use all of these. Resource is inside of it obeys the if that's something that you want. Finally, we have adobe funds and you can use these phones right here and you can browse them all. But difference between Google phones and mobile phones is girlfriends are all free while with adobe fonts, you have some which are free, and you have others which are premium so you can explore a bit more and you have toe select which of these phones you want to use. You can see these packs, for example, and you can see right here how it works. You have to browse funds you have tow, activate them so you can simply use the toggle when you want to begin using a front or a group of funds. So if you remember from the installation off eggs the video I told you that you have to create a free adobe account in order for you to download X'd and install it on your machine . You can then use that free account toe, activate these funds and you couldn't simply use them in your adobe X'd. You can see some of them and how they look like, and you can browse all of them right here, and you can simply click on the funds and it will take you to the fonts list. And you can simply real family and then simply activate the ones you want to use on your machine. But just a If you're going started and you don't have the premium adobe package, you can use free phones right here so you can click here with name and newest. You can sort him out like so you can choose a sample. So which text you want? Toe beer right here so you can see how that looks like you can sort them out and so on and so forth. So That's basically it for the fun. See the next video. We're going to talk about free images, why they are important, and especially where you can find them on the Web so you can use them on your projects, so I'll see you there. 36. Using Free Images Adobe Xd Basics Course: Whatever you're designing, you need images to represent what you're trying to portray in your designs, and especially if the client's budget state. And if you're just starting out, you want to use free images as much as possible, but you don't want use just any free images. You want to use high quality images, which are created with a purpose, and they will look good in your designs. And, most important of all, they're going toe represent what you're trying to show in your design better than those free stocks that you find on Google. And you don't even know if the license is covering it. If they don't have the license is somebody is going to sue you later and so on. In this video, I'm going to show you a few different resource is or free images that you can use in your designs. They're all really high quality, and I really recommend that you use them because it will make your designs look more polished and more professional when you use these free images. So to get started, maybe most well known resource is on splash dot com. Now all of these images are free for you to use in both personal and commercial work. You can license back to the photographer if you want to, but that's something that is an option for you, not a requirement. You can read more about their licenses, but basically you can use them free of charge without any a recognition to the original photographer, and you can use them in both personal and commercial work. So if you scroll down, you can see how they look like, so they're really high quality. You can sort them out by categories, and you can even type right here. So if I took car, for example, it will show me various different cars and these extended tags right here. So for the brains off cars, if you want to download any of these images from an splash, you can simply click right here and you can collect it and you can add it to your collection, which is really important, especially if you're sending these images. Toe didn't developers, so you can create your free account right here on an splash, and you can collect these images, add them to your collections and then simply when you're finished with them, you can send the link to the collection to the developers, and they can use them in high resolution if that's something that they want, or you can simply navigate back to the collection Donald, all of these images in the biggest possible size, and then send that ZIP file back to the developers if that's something that they required. If you want to download these image, you can do it from here. So if you're using Google from like I do, you can simply right click copy image and then baste it directly into your ex D. Or you can simply download for free right here, and it will show you this prompt at the bottom so creating isn't required, but it is appreciated and allows photographers to gain exposure. You can copy the text below or embed a credit badge to your website. So again, simply hit copy right here, and it will copy this text and you can send that back to your client. And if they want, they can show it on their website or if you're using this for your block, for example, it's nice if you want to credit it, but as I said it isn't required, but it's just a goodwill if that's something that you want to dio. Next resource is picks a baby, so it's basically the same as on Splash. But on picks obey. You have to create an account in order for you to download images. You can download them from here. So, for example, if I click this image, I can simply copied the image. But it will downloaded in really small size. If you want toe, get the biggest possible size for this particular image, for example, you have to log in and you have to sign up. Sorry for the free account, and then you will be able to download it in the biggest possible size. You can also create collections right here can like images. You can follow people if you like their images, and every time that they upload, you'll get a notification and you condensing the jump back and explore their images. You can even leave comments right here if you want to. And all of these websites are making money. You can see that mail Chimp is sponsoring the UN Splish and Adobe stock is sponsoring picks obey or this is simply an affiliate link on their side, and when you click right here, they will get the commission. So that's how these websites are making money. But images are free, and you can simply upload your own images if you want to share them with the world. And that's how these photography communities are born on these websites. Next up we have pixels, which is basically the same speaks Obey and Becks. ALS is a bit different because they're collecting images from different websites and their own. So if I scroll a bit down, you can see that these are the users who uploaded these images by the first scroll even more down. We're going to find some, as you can see, which are uploaded by these other brands so you can see images from an splash right here or from picks obey, especially videos, because sometimes they upload these really nice videos, and you can use them in your work, obviously, for free. But in those videos you can see that they are uploaded by, for example, picks obey or an splash, or some of these other websites, and they're trying. By doing that, they're trying toe attract you as a visitor, for example, back to pics, abate or back toe on Splash. So all of these different websites are sharing the traffic between each other. Next resource is burst that Shopify dot com and that name really should bring a bell because Shopify is this online platform where you can purchase a website similar Toe War wordpress if you have a business and you can set up that business. So, for example, if you're selling anything online, you can go to Shopify and by the website basically, and you can created and rearrange it to fit your needs, and you can add as many functionalities to it as you want. Basically, you're paying them once a month or once a year, and you can sell and have your own business of wire your own website using Shopify. But they have this burst of Shopify dot com images collection, and they're geared more towards small businesses and entrepreneurs. So, for example, if you want to use some of these images in your business, you can see So if you're running coffee shop business, for example, you can click on this collection and you can use some of these images there really high quality, and you can see that there are a lot of people in these images because that will bring a humane site to your business rather than just using cups and mugs and just standing coffee like this. You can see that, For example, if you sell jewelry online, you can click right here, and you can see how all of these images look like, and they're even giving you some tips and tricks. So this is not just an image sharing website, but they're trying to help you move your business along, and by doing that off course, they want to sell you Shopify. But they're really helpful in those steps. And you can really apply some of those steps, especially if you're taking your own photos for your own business. So you can see how some of these photos look like online, and you can see some tips and tricks further. And finally, I want to show you this resource, which is the stocks dot i am, and this resource is really huge because you can see right here all of the, uh, premium as well as free resource is on the left, and whichever one of these You click. It will take you to that website and we just saw burst by Shopify and when I click right here, it will open it in a new tab. So it's giving you all of these different resource is we talked about on splashed. When you click right here, it will take you to an splash and you can explore some of these directly through this website so you can see this website you can without leaving the stocks. Thought I am. You can download in these images and videos. Finally, you can see right here that we selected photos. You can select colors and it will load about table so you can select some different colors . You can see some icons, but its law loading the shutter stock. So that's not free. You have to pay for it. If you click videos is going to load motion elements. And if you want to use these mark ups, you can see that you can use them as well and its load intact wolf so you can see some fun pairings. And so so it's really a nice resource. If you want to use the free images and you can find free colors, free phones, free icons and so on. All waiting this one website so you don't have to browse through all of them. But if you want to our if you like a certain style from one of these websites. So, for example, you like this and splash style of images you can use just on splash if you want to. In the next video, we're going to talk about icons and where you can get free icons, so I'll see you there. 37. Using Free Icons Adobe Xd Basics Course: I consider really important in your design work, especially if you're working for the Web or, for the moment, ABS, because what icons you can represent more than just with the basic text. And that's why designers are using them more and more in the latest years. So to get these free icons, you can go to material that I owe, which is the Googles own. So same, like the ghoul funds in the previous video. They have this material design dot io, which is They're basically material design style off design off their APS and off their android operating system. So you can download and use these icons free of charge. And you can use them for both personal and commercial use because they are open source, as you can see right here. Just don't try to sell them because you don't want Google to, so you think that's really the last thing you want to do. So basically, how you can use them? You can simply click on any off these icons, and you can download it. You can sort them out by field, outlined around it to tone and sharp, and you can use any of them So, for example, this filled I could simply click, and it will show me right here. I can ah, load it as an SVG and I can expand this toe, learn more and I can included to be white or Toby black. You can change this however you want. You can select it for IOS or android or use these DP functions and you can see this as an icon fund how you can use it in your coat and you can choose if you want to donald it as an SVG or as a PNG are lower, it is recommended. You download and use them as SVG is because SPG is elector file format, while PNG is going to lose quality when you uploaded to the Web or if you use it in your mobile design work. So basically you can dollar that as an SPG, it will not lose quality, and you can scale it up or down as much as you want. And you can even go inside and weak this icon a little bit so you can see these arrows. For example, if you don't want those arrows for whatever reason, you can delete them and you will just be left with this three D text. Next resource is box icons, and you can see it's basically the same thing. You can click on one of these icons you can doll owed it as a PNG you can use on HTML quote , and you can dollard SPG once again on the recommended Use them as an SPG, and you can see it as a component because thes box icons are created to use for the Web and you can download these icons separately. You can download this version and you will have it as a weapon fund, and you can then use it as a weapon with all of these icons included inside. But as always, I will not recommend it, especially with these large icon collections, because, as you can see, it will take a while for you to find which I can you want if you don't loaded. But right here you can click search and you can type, for example, profile. You can hit, enter or return, and it will show you all of these icons for the profile, and you can use them from here or very ethically cried here. I've been profile or person and you can see right here those icons. Next we're back on creative market and you can click this get free goods. Same like I showed you for the wants. And sometimes you can find some cold free icons right here, and you can use them in your work. And finally, we have designed free by freebies from you. I ate dot net and you can visit this website. They're basically the same thing as creative market they're selling Premium resource is for designers, but they have this freebie section you can see at the moment they have 344 design freebies . You can see all of these different You I kids, more cops and someone. But because in this video we're talking about icons, you can see these icon collection right here. For example. You can use these Halloween icons and you can scroll down and see all of the different icons that they have. The even have some illustrations and something so on and so forth. So you can use all of these different resource is in your work. In the next video, we're going to talk about illustrations where you can find them and how you can use them inside Adobe X'd. So I'll see you there 38. Working With Illustrations Adobe Xd Basics Course: sometimes when you want to use illustration in your work, it's really hard, because if you're not an illustrator yourself, it's really hard to replicate the same style using different illustrations, because illustrations are oftentimes created differently. So you can really see that the designer has used different illustrations from different styles from different people, and it can really translate into nonprofessional design. And that's why it's really hard to create illustrations when you're not an illustrator, the way around it is to pay and professional illustrator who will create those illustrations for you if you don't know how to illustrate yourself. But if you're just starting out, it's really difficult to manage funding for that. And when you're working with clients, often times they don't have the budget for illustration, so you often end up with using either images or just icons. Luckily for us, Eggs D has this awesome plug in. So when you click right here to the plug in spinal, it's called andro, and when I click on it, you can see that it's created by this person. Katarina limp. It's only help. I pronounced that correctly, and you can see that there are attribution free illustration for clients personal design projects in any color you prefer. What that means is you can enter clients colors right here, and it will speed up the illustration using those colors, and you can also switch the nightly illustrations so it will basically replace these colors from white to basically almost dark. So how can use those illustrations? You can simply click right here, but it's a search. And, for example, if I typing car and press center, you can see that all of the different illustrations that has have car in it will show up. And, for example, if I want to use some of these illustrations, let's say this one. All you have to do is simply click on it, and it will be ready to paste in now. These illustrations are created in SPG, which means they will not lose quality when you work with them, and all you have to do is simply click done because it's already copied to the clipboard and you can based it anywhere here on your design. So in a click right here and hit control or command V, it's going toe. Based in that illustration. Inside off my our port and my click on my our port and jump to the layers. You can see that it is here now. One downside off these frustrations is if I opened them up, you can see that all of these are different parts, and you don't have any of these layers named, which makes it really difficult to work with sometimes. But you have to do what you have to do because these illustrations are created using the same style. So they make you work. Look really professional. So what you have to do if you want to remove this guy from the front, for example, or you just want to remove everything and have just a car in focus, all you have to do is you can on group. It's so right. Click right here, hit on group, and it will on group all of these different layers for you, and you can simply jump inside. Click on one of these layers and you can hold shift and simply select multiple layers. And when you selected however many layers you want, you can simply click delete on your keyboard, and, as you can see, it's going to be late. Majority off these layers. Now you have to do this if you want to remove parts off the illustrations. And let's say that we just want to remove this guy from the illustration and you have to do this a few times so I can hit delete on your keyboard. As you can see, we're making really good progress. But because they're created so delicately and they include all of these different shadows, sometimes you have to go through a couple of times in order to delete some of them. Now with these elements, which are located outside off the illustrations. So, for example, all of these flowers at the bottom, you can simply select them like so, using your left, most click and you can simply hit, delete and remove them from the scene. But if you saw too much as you can see in this case, I just want to select the rock up to here. But when I moved slightly up, it's going to select the road as well, so you have to do these two techniques, so you have to use your shift key for majority of them. And if they are located outside off the grouping you can simply select them using your left mouse Click now, for example, If I say OK, I'm done. Maybe I just want to remove these Leafs from the background, and I can simply select him like so. And maybe I just want to remove all of them and have this just one line and maybe I would want to remove this background and here we go. We're left now with the car illustration of the recommended You can click on this layer, for example. You can see it's this letter right here. Double click on the layer name is simply typing the road because that's our road. And that way we can know that all of these other layers are layers for the car so you can hit control G to group all of them and simply call this group car. And now you can know that this is a car. Now, if you want to change any of the colors off these illustrations and you want to make them your own, you can do that because, as I said, this is an SVG. If if I zoom in ah, lot closer like so you can see that it doesn't lose any quality. So let's say that I just want toe change some of these colors for the wheels so I can hold my control key and click directly inside. And if I hide my layer, you can see what it is. And maybe I just want to change it dark color. So, for example, this one and I can do the same for this other will and I can simply cover right here and click or can simply go all the way down and you can see that it changed color American jump inside and change all of them. But you get the idea of how it's done, and it's really simple. As you can see, all you have to do is simply select all of these layers You can name them, especially if the illustration is lighter with some off the elements inside. So if we jump inside undrawn once again, you can click right here and typing phone, for example, and you can see that we have some really nice simple for illustrations, and we also have some more advanced ones. So just imagine, we use this one and I can click somewhere outside. Let me just move my car to the left and he'd control. We took place it in. As you can see, all we have right here is the phone and this background. So it's a lot easier to work with. But in some cases, like in the case off this car, we have a lot more layers to play around with and we can add it them at will. Now, finally, how can you get this Andhra plugging? You can simply click right here and you can click on the search and typing on dro and then press enter. And here it is right here, because of have it installed, it will show you installed bottom, simply click on it and you will have this plug in and you can then search for whichever illustration you want now because they don't have as many illustrations as you might think . And they will not cover all off the businesses and niches out there. You sometimes have to work with illustrations which are close to your niche, but they look similar to what you are looking for. In the next video. I'm going to show you how you can work with more cops directly inside of Adobe X'd. So I'll see you there 39. Working With Mockups Adobe Xd Basics Course: When you're finished, your design work and you want to present it toe either your community or to your clients. Sometimes you have to use more caps because more cops show how that screen might look in some real scenario. Whether it's a mobile app or a website design in exit, EU can use more cops directly and the best more cups. I found our angle more cups. So if I show you how they look like here they are and you can buy them for $50 at the moment off, creating off this video. Or you can simply download a free sample test amount now. At the moment, because X'd is basically so new and people usually marked their stuff up in either photo shop or sketch for eggs, the I found that this is the best solution There is so far so basically what they have. A 600 devices and more cops for existence. Catch because this is a pact that works both for sketch and eggs D. Now this is a particular eggs the back, and you can see it's 100% elector. You can simply place your screen with an angle plug in is designed to work with Adobe X'd, and you get all of the school wallpapers in Vicari solution android devices of 600 devices in total. You can see some of these testimonials right here, and you can as a set by them if you want to, or simply download a free sample, you can doll Oh, the free sample And all they have to do is simply install this plug in called angle. And once again, you can click right here and click on the search and simply typing angle for a center. And you can see it's this 1st 1 right here. Just make sure it's updated. So if they have any update, launch simply updated from there. And what you can do is simply I have my chatty you like it, which I created right here opened. And perhaps maybe I want to use this first our port to present it into a mobile device. How can I do that? So when you purchase and the angle, this is how it looks like when you downloaded. So you have all of these different devices open up. You have that this angle plug in which you can install from here as well. And you have this angle more cups, X defile knife just quickly jumping through this. Maybe I can open this iPhone tennis and you can see in front front clay position for clay, white, black and so on. This is how they look like basically, for all off these different devices. And if you want, you can simply open up the X defile with all of the devices inside right here, and you can use any of these toe present your work. So perhaps maybe I want to use one of these. Perhaps. Maybe, I don't know. We can use one of these right here. Maybe I can use this one so you can simply click on it. Should control see to copy it. And I want to paste it in right here to the spaceport. Here it is. And I just want to use this 1st 1 which is called Splash. And what you have to do is simply locate the screen for layer. So if I jump back to the layers panel, you can hit control and click directly inside and you can see her mosque, glass and the screen. You can click on the screen layer jumped your plug ins panel. Click on the angle. Apply mock up, and what you have to do right here is located the first screen, which you want to include, and I want to include this splash screen all have to do is simply click Apply, and it'll work its magic in the background to apply that screen to your mock up, and you can see if I zoom in a little bit closer. You can see it's really high quality. There are some glitches, so, for example, the screen is running out right here. You can fix those issues if you want to, but when you're creating a presentation, it really you can't really tell if it's there or not, especially if it's viewed from this angle. For example, when you have multiple off these screens right here, as I said, you can use multiple off these. So, for example, you can put many of these as you want and you can use. And these are ports right here, which they already created for these mock ups. Or you can use your own as I already showed you. So once again, angle more cops in my opinion. The best mockups currently for Adobe X'd, and you can download our free simple, as I said, or you can simply purchase them if you want to. And, as you saw there, coming with a lot off different Marcus, which you can use in your projects. And here you can see how they look like on the webpage, for example, and you can see all of these different Grady INTs and wallpapers in the back. Now I can show you that, too, if I jump inside. They are angle legs D more cups, which are showed you and wallpapers as well. So if a double click and jump inside, you can see all of these different bowl papers. And if I hover over one of them, for example, you can see it's 5120 with 2880 pixels, so it's really huge. But it's optimized and just 117 kilobytes in size, which is fantastic because they are pretty optimized. That image for you. And anyone who has there ever done of Web site design knows that they have toe optimize their images when they send them to develop pursuit can see that this five K image is just 189 pixels. Sorry. Kilobytes in size. And if I open one of them up so you can simply check it out. So this is how it looks like. And maybe I want to switch them and simply show you a few of them. You can see that they are really huge. Anyway, zoom inside. You can see are lots off details in these images, and you can really create some different variations with them. So you can perhaps use just this portion of the image and create some different attraction to your design. So basically, those are more cups in Adobe X'd. And in the next video, we're going to talk about you. I kids more in depth and I'm going to show you in the next series of videos how you can create mobile app design using some of those free you white kids that you can find on adobes website. So I'll see you there 40. Design Using UI Kits Adobe Xd Basics Course: when you're just starting out in your design career, you like it's are a great resource toe have because you can explore more experienced designers hard, they structure their files how some designs are created and you can really explore the techniques. More experienced designers used to create designs, and you can simply copy those techniques and then simply later on, when you work and work and have some experience in design, you can simply adapt those techniques and create your own. So to get started, you can go to adobe dot com slash products slash eggs d slash resource is and get the, um, kids that you want. You can see that your kids is selected right here. And as they explained in New York, it's video you can choose from Apple design material designed for Google and Microsoft. You WPT sign. But you can also go down and explore all of these different you I kids that you can use where personal and commercial projects and in today's video, we're going to use this knave ago. You like it and you can simply go to this page and hit download, and if you want to shortcut this page you can simply go to home in your ex deep. You can click adults and then click you like it's and it will take you to that page. So when you don't load now, you go you like It's all of these. Your kids are going to be a bit different because off their structure, how many screens are included inside, as well as which components and assets are included in the download, and you can use them on this particular page. Or you can go toe here and then simply click. For example. This is for iPhone. You can click on the iPhone, and it will open that our port in the new document, and you can simply copy and paste the elements to this particular our port. So let's quickly explore it. You can see in the acid panel right here because as his panel is selected that we have some missing funds. But let's go from the top. You have the colors so you can right click on these colors, edit them and simply adjust. However you want him to look like, and you can see them updating in real time. This is also useful if you have a client dedicated color. So this is the main color. And for example, if I choose this nice blue three e c six f f press center, you can see that it goes to blue and everything changes to blue. Now this is on awesome feature to have inside of Adobe X'd, especially if the client is changing their mind. They want to explore, for example, darker colors or lighter colors or different colors altogether. And you can simply jump right here and change all of these colors at once. You can do that for all of these different colors below that we have funds, and some of these funds are missing. But that's really not an issue. You can download and install these funds, but you can also use your own funds below that we have the components, and all of these different components from icons, cards, posts and so on are selected by these designer and created. And you can click right here to expand the view. And you can also expand this if you want to, however you want. Oh, and you can get a greater and clearer picture right here to some of these components so you can really adapted to your needs. You can make it as white or as tall as you want, and you can also bring it back like this. So let's explore these you like. It's and it said all of them are a bit different. But with this never go. You like it? You have this basically tutorial right here, and you can hit play button right here to preview this prototype. And, for example, if a click up somewhere out here, let's see what Yeah, you can see right here, and you can type, for example, you can go back, and you could really explored this prototype into more details. But let's get started. You can see in the assets panel right here. You can change the phones, colors, everything, as I explained, and you confined this front on the type kit phones. Gibson, if you want to use exactly the same fund as this designer did, and we have the guide right here below, so we have the basic elements. We have Heather's inputs. We have the card. So all of these different assets and components which are created right here, we also have right here, so you can select them, copied them from here and then baste them to your own design. And I'm going to show you in just a moment how you can do that easily. Next we have main up so you can see some exploration. You can see some maps, cards and so on. We have the splash screen, which is the main screen as the user opens the APP. Then we have the guide, which is going to guide users through the welcome screens and get started screens and so on . And we have few variations on that. We have signing and sign up screens right here. Next, we have activity and profiles all of those created using these different components. And you can really explore these and change them as you will next to have stats and info. So we have basically all of this activity statistics, history, music and some below that we have menus and extras. So all of these extras air basically pop up screens and menus you can see and you can change them at will. Now, when it comes to your kids, you can work in this document so I can simply click right here. because I know these are iPhone screens and I can simply click, for example, on some of these. Let's click on this one, for example, and it will create that are part for me right here. And I consider jump inside and I've bean home screen, for example press center. And that is going to be my home screen so I can simply jump inside. As I said, you can use these basic elements and components or you can use different elements from these screens. And also another way is, as I said, you can jump here, then click here on the iPhone, our ports, and it will open that our port in new document. You can double click right here, change its name and do basically the same thing. But for the sake of time, we're just going to use this same document so you can jump back. And, for example, let's use these base elements. You can jump to the layers panel right here, and you can see base folder right here not to jump deeper inside off. Some of these you can hit control or command, and you can click inside, and it will take you directly toe that later and you can see. But let's just use this one so you can hear control, see, and you can jump all the way to your our port. That's why I said, Maybe it's a better solution to use a separate document and let's do that just so that you can see some more features. So let's use this and I'm going to simply name at home screen from here, and I'm going to hit control V toe base, this element in place. I can click right here to position it to the top, and I can enlarge this. Toronto you can hit control zero to snap into position could minimize this. And now let's go back and, for example, maybe I want to use this so you can see Heather's are right here. And once again, you can hit control. Click inside. Find this Heather. It's this one is You can see this is the one which is selected. You could hit control C and then jump into other ex. The documents hit Control V and now because we don't need this status bar anymore because we have it right here, I'm just going to delete it because we have it conveniently placed inside off this heather so I can switch back. What I need right now are some cards. Maybe I can choose this card and I can open it up and see which one. It this. It's this 1st 1 you can hear control seek. And as you can see, it's created as a component. You can jump back to your other filed hit control V, and then simply position it how ever you want. I will line them up and then simply hit shift and bottom arrow. 1234 or maybe even to position in 20 pixels front. And this Heather, I can also move it just below, because it's been all the header and I condense simply jump back and maybe I can use some other elements from here. Maybe I can use this card. I like it. Hit control C jump into her other file hit Control V and and simply move it at the same distance as the one at the top so you can line it up like this. As you can see, it shows 20 pixels and let's say that this is our screen and maybe we want to use something for the bottom off our screen. Maybe we can find it. So, for example, either button or we can create a tab are so we can create a tab are by simply going to the home indicator because we want users toe be able to get out off this up. You can position it down at the bottom, and now I just need some icons right here. I can simply to switch back, located their icons, and I really encourage you to use your own icons. Or maybe we can see if they created some tap bar off their own for this up, they didn't. But it doesn't matter. We're just going to create our own so you can jump inside the icons and you can simply select whichever icons you want. So perhaps maybe I want to use this cycle, which is for filter search share. And let's use this one for settings. For example, it hit control C jump into other file hit Control V and then simple hit control G and called This step are move it all the way down below, and home indicator is going to go all the way down So locate the damn bar and you can hold shift in bottom arrow to nudge it all the way down. And what I'm going to do is simply reposition some of them. So, for example, I'll move this down search is going to be a second app. This is going to be our first step. And perhaps maybe we can switch settings and share so you can hit shift and arrows to nudge all of these icons left and right. And what I'm simply going to do is reposition them. So shift 1234 for example, and then simply selected these two by holding shift and I can position it to here, for example, shift 1234 and then finally do the same for this one. 1234 But maybe even six. Then select this and select this and more with 20 pixels toe right to the left. Sorry. And then simply click right here to position in the centre. And you can also nudge them for example, 20 pixels up from this home indicator. So that's basically how you use these you like, It's And now let's just quickly changed this Toby home screen. And now if you want to change any of these, you can simply double click inside. You can see that the fund is missing. What? You can change this phone to something else. So, for example, little photo center and you could see how that looks like. And if I jump to hear toe assets panel, you can see that it transferred all of these different assets from the original file. But if you want to make them local file, you can do that and simply you can select all of them, right click, and you can delete. And it's going to delete all of those different assets. And when you jump back to layer, spell and open some other, you can see that there are no longer assets included right here not to create your own personal assets. You can simply change these. So, for example, I just want this to be called Filter. I just want this to be called Search, and you can select this text and just leave the search in. I just want to do this ST Ng for the share and finally same thing for the settings, so I just want to create my own. And as you can see, they'll have these backgrounds. So if I open all of them up, you can see all of these BG layers, which are for backgrounds. I don't need them so you can open all of them, hold control, click on 1st 1 and then simply click on all of them, hit the elite and is going to delete all of those background layers. Now, if you want to create assets from them, you can simply click on 1st 1 hit control or command K and do the same for all of them. And now, if we jump back to my s a special, you can see that now we have our APS here. Now, if you want to select some of these colors So, for example, I like this white color. You can simply click right here. And as you can see, it shows these missing funds and you can fix them by installing this fund. Or you can simply change the front right here. Now, for example, if I want to change any of these, maybe I want to create this image to be larger. I can jump back to my layers panel hold control. Click inside. You can see picture and you can see that it has quite a big corner radius. But perhaps I want to make it smaller. Maybe 5%. Er you can see how that looks like, and if you want to expand it, you can do the same. Perhaps I want to position these icons on top of the image like so. And maybe I want this image to cover everything up to here, for example. And all I have to do is simply move it right here. So everything all of these different elements will come on top. And perhaps if I even want to change this image, all you have to do is have your folder with your images open like I do. And for example, you can simply select one image drag and drop it inside, and it will fill this background layer with your image, and you can also play around with even more settings for it and letting quickly create a darker image as the background. Like so and what I want to do from here, it's simply select all of them, and maybe I want to make them white. So, like this and you can locate the contents of this is water and just make sure that you understand that some of these are not really all that well positioned. So as you can see, we have too many different folders for my liking, at least. But you can really play around with it, and you can create your own structure. So, for example, you can see that everything on this card is located into this content folder. If you find that confusing, you can right click on group and then group your own on, just simply leave it like this outside. Now let's quickly changed these so I can select all of them using shift. And I can simply click and choose the white color for here. And that's basically how you edit these you like. It's as I said, you could change this funds. So what we used here is Roberta, I can maybe selected these and I can select these two texts and maybe even all of them, like so and then simply choose a rowboat from right here. Press enter and it's going to apply that selection toe all of these different funds, and obviously you can do the same for all of them. Now, just imagine that we want to change the color of this card to access it more easily, can hit control, click insight and then simply change the color off this car to whichever color you want. Perhaps I want to make it a lot darker, perhaps Like this. Maybe I want to go to this direction. And perhaps I want to change the color off this text toe white so it is typically cried. Here, apply that, or if you have the color selected, you can simply click right here, and it will apply that color toe that text. So that's how easy it is to create using you. I kids, As you can see, all you have to do is really copy and paste some of these elements, and then you can jump inside and edit all of them. You can reposition these. You can include different drop shadows. So if we hit control and click inside this bee, Gee, if I open it up inside off my layers panel and scroll down, you can see that it has this background shadow as well as the background blur. If you don't like how that looks like Dennis. Simply switch it off, or if you want to use that same effect on some of these, you can simply click on it, right? Click copy and then simply, for example, in this one right click and based appearance. But just so you know, it's going to based exactly the same appearance from this one to this one. So as you can see, it changed from that dark color to this white color. But you can jump inside and simply select it from here once again. Or you can simply located here in your ass pound if you have it, and then you can apply that color. So here it is. And then you can simply apply that same color as you can see, because all of these edges are straight. It moved all of those edges to be straight on this one as well. But you can switch it back and you stand, for example and see how that looks like. So get really added it further and further. So that's how easy it is to use your kids. Really encourage. If you're just getting started to download, play around with them, you don't have to use one. You like it for your project. You can use several different you I kids, but just make sure that you have some consistency. So, for example, if your phones right here are 16 for example, don't make this one to be 30. This want to be 15 and so on. Don't use usually more than two different phone styles, maybe even three, but just don't go over that. If you're using colors, just make sure you stay consistent with your color palette. You don't use to many different colors, so you don't have. For example, 50 different colors just have, like 567 colors, something like that. And just work your way around that. See what works best for your design and then simply explored. Play around with exit. Play around with these you like. It's because once again, their free and you can use any of them however you want, and you can really play around with them. And I really encourage you to think off your own project and then simply work your way around these your kids to create that project. Just think rich screens do I need and then simply applied these techniques so that you like it and that final design off yours that you want to create 41. Conclusion Adobe Xd Basics Course: designing using Adobe X'd is really fun because it's free. Constantly updated, it has great community in new features are added All of the time you can go from designed to prototype to share and get feedback all within one app. And because it's rector based files are really small, so you don't need an expensive machine to run it. I encourage you to take action, practice using two tips from this course and just get started. Don't worry about your designs not looking great at the start. They will look amazing over time, but you just need to get started, work on your skills and keep developing over time. If you like this course, take a look at my other courses on Adobe X'd, where go into a lot more details on projects, wire frames, prototypes, animation and more. And if you're watching this and YouTube, consider subscribing for more videos on design. Thank you for watching and have a creative day. Take care 42. Course Update And YouTube Channel: que designer Alex here. And I just wanted to give you a quick thank you for taking this course. I really hope that you got some value out of it and that you understand How can you use Adobe X'd in your projects and how it can benefit your workflow in your daily use? A lot of you asked me about updating discourse and adding more like steps or techniques, but I'm not going to do that because this is a Toby X'd basics course and whole idea. This course is to make it free and available toe anybody in the world just to learn Adobe X'd and what it can do and what escape off. And then I have my premium courses if you want to pay more in depth techniques. But I also have created a YouTube channel just because this purpose and you can go and visit YouTube channel, I believe the link down in the media and you can access it. Simply click on it, and it will take you to your general where I take this in depth videos and I'm going to show you how you can do wire framing how you can do apple designs how you can do Web designs were also talking about freelancing and what you can achieve as a freelancer. We're also talking about passive income techniques. So if all of these things interest you and you want to get as much free value, it's possible that head on over to the YouTube general and a promise you're going to get as much value as possible free of charge. Of course, my premium courses are still here. And if you want to access that, you can. Whatever you're watching this course and you can always go to my website, which is Alex on design dot c o. And you can check old courses. They're free and premium ones as well. So here, no work to the YouTube channel. And I promise that you're going to get as much free while you as possible and you're going toe learn adobe exceed even better than just by taking this free course. So thank you once again for taking this course, and I really hope that you are going to check out my YouTube channel. They care 43. Join My Free Facebook Group: Hey, designer, I really hope you enjoyed the course, and it you got as much value as possible out of it. If you want to receive even more value from me and from the design community, I started a Facebook group. Where you can join is just a Facebook group for my students alone so you can join by clicking the link down below order. Nate off course is a Facebook account, and it's a free group to join. The group is formed in order to provide you additional feedback so you can attach your designs by following this course and using examples from this course or any other off my courses. Or if you have your own examples. Off design works from the past from the present. You can upload those works to Facebook Group and then received feedback either for me or from other design members. I also encourage you if you have a job positions available to share them in that group so everybody can benefit from that group. Once again, the group is free. It's easy to join. Simply click the link in the pdf, and I really expect to see as many of you as possible in that group just to share our experiences as designers, and I will try to post some additional video, some additional tips and techniques into that Facebook group. But for now, we're just getting started. We're just going to form its, and I really encourage you to join and to share your best work there. To inspire other designers or toe ask for additional feedback. Just make sure please, when you're asking for feedback, asked for specific things. Don't just ask. What do you think of this design? Because nobody is going to reply to that. Or if they do, they're on Lee thing. They're going to say to you Is it looks nice or it doesn't look nice. Make sure to ask for specific feedback on your designs. For example, do like this color combination. Do you think I should use a different front? Do you think that these images correspond well with the background color, for example, things like that, So make sure to ask for specific feedback when your designs, because it's going to be a lot easier for me and for other designers in that group to give you are specific feedback that you can improve a lot quicker, then by just asking what? Everything off this design. So thank you once again for taking my course, and I really hope to see you in sight off my Facebook group Digger.