Adobe Xd 2021 Basics - Free UI / UX Design Course

hey designer my name is alex and welcome to this free course on adobe xd 2021 in this class we are going to cover basic tools of adobe xd and i'm going to guide you through my design process and show you all of the main tools and features that adobe xd has to offer so that you can be a better ui ux designer i am a design products creator and so far i have over 500 products which i have created i'm also a course creator and so far i have more than 20 courses and i have more than 30 000 students enrolled in my courses and in this adobe xd free course you're going to learn what is adobe xd how you can download it and how the updates work mac versus windows and what is the difference how interface works and all of the key features of interface like shapes pen tool text tool artboards libraries layers and plugins we are going to explore repeat grid and what it can do for your design how you can use masks which are 3d functions in adobe xd how you can use mockups which are the shortcuts to improve your speed working with different files and how can you open different files and work with them in adobe xd how can you work with free resources and what is the difference between free and premium resources and why one is better than the other using ui kits to improve your workflow creating a design projects and going from creating design prototyping your design sharing your design with clients and developers exporting your design creating a design system creating design tokens creating style guide how to create great presentations and finally future of design tools everything i'm speaking about in this course will be linked down below so you can easily access them and follow along with this course i'm also talking about my new course which is called adobe xd master class it's over 20 hours long so if you are interested link is going to be down in the description below you can click on that link and enter the coupon code to get the massive discount which i'm providing to everybody who is watching this video but just make sure to hurry up because it's a limited time only adobe xd is one of the best tools out there for ui ux designers i truly believe that because i'm using it every single day on my youtube channel i have created bunch of these different videos explaining all about adobe xd different tools and techniques so if you want you can also check that out for now without any further ado let's get started with the course adobe xd is a ui ux design tool created by adobe you can design prototype share and collaborate all within one app you don't need to change the apps you don't need to install separate things on your machine you can do it all inside of one app it's great because it's free to get started and you can get started simply by downloading and installing adobe xd on your machine i'm going to show you that in the next section but basically what you can do in this tool if you check right here and start scrolling down you can see it's for design so you can create mobile app design you can create a website design dashboard design whatever kind of ui ux design you want you can even create style guys and you can see you can prototype include different interactions include different animations you can share with clients with developers with your teammates all with adobe xd and you can click start here for free to download and install adobe xd and that's what we are going to talk about next adobe xd works on both mac and pc and it's quite simple to get started on their website as i showed you you can simply click start for free it will start to download on your machine and it will automatically install it after it's completed that and after it's done you're going to get this which is creative cloud desktop app and this app is basically used for all of the updates that are legally launched on adobe xd and you can expect updates every single month smaller updates sometimes even bigger but usually every single year in october or november when it's the time for adobe max event then you can usually expect bigger update from adobe xd but every single month they're fixing bug issues they're adding new features they are changing things and you can always go to their user voice on their website and suggest a new feature you would like them to include in a future release of adobe xd so how it all works as you can see right here in your clear cloud desktop app and this app works on both mac and pc and as i said it's used for updates to your adobe xd or any other tool for from adobe's family so you can see right here up xd is up to date where it says update available you can simply click there and it will update to the latest version if you uninstall it for some reason and you want to install it again simply search for it right here and you're going to see it right here it says install and where it says install next to adobe xd simply click right there and it will uns install it on your machine one more thing to note is differences between mac and pc and we are going to talk about that in the next section of this course but before we move on to that i just want to quickly show you this which is basically all the apps they have and you can see under this it says all apps or updates currently i have five updates to the software i'm not even using anymore categories so you can divide by category and you can see under ui and ux you can click right there and the first thing it launches is adobe xd it also launches photoshop illustrator and after effects which are all the tools that ui ux designers are using but in this uh short course we're going to focus strictly on adobe xd and all of its main features and benefits in the next section and in the next video i'm going to explain mac versus windows and what is the difference so i'll see you there so as i said adobe xd works fine on both mac and pc and the crucial difference between those two os's is how they look so basically on windows you have this hamburger menu in the top left and because i'm working on windows i'm going to show you that in just a second but on a mac you have multiple of these options simply dotted around on the top part of your screen and that's really the crucial difference between mac and pc and one more difference is recording of prototypes because adobe xd has this function where you can record your prototypes and you can share them as a video either to your clients or you can share them on social media just to create a bigger influence around yourself basically the crucial difference between mac and pc is you in the mac you have this native option where you can just click record and it's going to record and you can click stop and that's basically the end of it while on the windows you have to use their game recording function and you can access it by hitting windows key and g key and then you can start your recording that way i'm also going to show you that a bit later in this course and finally what i want to mention quickly is if you have windows 7 windows 8 windows vista adobe xd will not work on your machine you need to have adobe xd installed on your windows 10 machine preferably if you can install it on the creator update of your windows machine then it will work flawlessly but it's not supported by older versions of windows such as 78 or even vista so that's what you need to know when you open up your adobe xd you are taken to the welcome screen and i'm going to show you what welcome screen is and how it changes over time so here is the welcome screen and you can see you are on the home screen here you can click learn and you can access some tutorials from adobe xd team you can also click right here to learn about uh their new features and learn about some techniques from their team how pinsky launches usually every single week new tutorials about adobe xd and it's great if you want you can follow him on behance as well for these live streams about adobe xd basically that's what learn tab is cloud documents because xd is cloud-based usually but you can also save local documents to your machine if you want to cloud documents are all of your documents which are inside of the cloud so you can simply click right here to access them shared with you are the documents which are shared with you by the clients or by your teammates deleted are all the files you have previously deleted because remember you have limited space on the free version of adobe xd and you just have one single prototype which you can share with your clients or stakeholders in order to have multiple prototypes at the same time available to you you need to upgrade to the paid plan and that's why i'm showing this to you on a free plan you can see i'm on a free plan because it says up upgrade and it says starter plan but i wanted to show you uh that you can do all of these things within the starter plan especially if you get started so you don't need to pay for premium versions right from start you can test out this tool you can see if it's right for you if the ui ux is right for you and then if it is you can then proceed and pay for this tool so moving down the line we have manage links so basically these are the links which you have shared with your clients or stakeholders and on your computer you can locate the files on your computer here you can see it says design prototype share because that's what adobe xd does and that's what it is and below that we have some r ports which you can create from here these are pre-created artboards and you can see for mobile we have iphone sizes we have google pixel uh ipad nexus and so on then for the web you can see we have 1920 by 1080 and if i click right here you can see that they are giving you these pre-composed options if you want to use them then we have social media sizes so you can see we have instagram story post twitter post header facebook facebook cover and finally youtube video and finally we have custom size so you can use this custom size for any size you want you can enter pixel value right here and you can simply click on it and then it will open as a new document and with that our port size inside so as i said you can use any of these or you can simply enter a custom value right here and finally here we have recent documents so these are just the documents that you opened and you can click right here in order to access some of the more recent articles from their blog and help post and so on as i explained one thing to note is this welcome screen is going to change over time so just make sure to understand that if you're watching this video or this course in the future and you're checking this out and it doesn't look the same as yours make sure to understand they're updating it all the time but these are just the basic features and tools that you can expect here on the welcome screen so to get started i'm just going to choose one artboard size so perhaps 1920x1080 and i'm going to enter it here just to show you how this looks like so 1080 you can click enter or you can click right here in order to open it and this is how it looks like once it's opened let me enlarge it a little bit and we're now going to move on to adobe xd's tools and features and what you can expect the beauty of adobe xd is it has really simple to use interface so i'm on a windows version as i said and this is the key difference between windows and mac because on windows you have this hamburger menu and you can access all of your tools from here and you can also right click on any part of your document to access some additional features like these you can right click right here and then you have sub menus that you can enter and use some of the features while on mac you're going to have all of these options right here at the top and below that so that's really the crucial uh difference between xd on a mac and xd on a pc so when it comes to interface you can see it's divided into three parts right here you have your tools so you have your select tool to select multiple things you have your shapes right here then you have a pen tool text tool artboard tool and finally zoom tool and below here we have libraries we have layers we have plugins right here on the top we have design prototype share because those are the things which xd is famous by and you can simply switch between these three tabs in order to access different functionalities of adobe xd finally we have this panel right here on the right and depending on what you are doing on your artboard depending on what is selected this right panel is always changing it always has some features inside for all of the things that you are doing for example positioning and so on but it keeps changing depending of what you have selected whether that's design prototype share whether that you are working something right here on your artboard so let's now move on to shapes and i will explain what kind of shapes you have in adobe xd and what you can do with them let's get started with the shapes and shapes are located right here and you can see you have rectangle you have ellipse you have polygon and finally you have your line tool and finally you can create custom shapes using pen tool but i will dedicate a bit more time for the pen tool itself so to use any shape from here all you need to do is simply click on it to select it then simply draw on your artboards and as soon as you do that you have some values right here so let's go one by one and i will show you what all of those values are for each of these shapes so first things first let's quickly draw these shapes so that i can show you how all of them are look like this and i'm simply using v on my keyboard to use this select tool in order to position it and finally let's go ahead and create a shape with our pen tool and let me quickly show you differences so you can see right here in your layers panel which you can hide by simply clicking right here we have rectangle which is this one ellipse polygon line and finally pot because we use the pencil to create this custom pot now what you can do with all of your shapes is if you select the shape you can see all of these tools available to you right here so here we have positioning tools so you can position it to any part of the airport you want we have a repeat grid and i will explain repeat grid a bit later in more detail and what you can do with it then we have merging tools and boolean operations so basically you can select uh two or more of these tools and you can add subtract intersect and finally exclude overlap and i really encourage you if you don't know what all of these things are to select two or more shapes and play around with them and see what you can do but basically you can combine them into a single shape or you can add some multiple properties to it like for example excluded outline and more if we move on down then we have transform and you can change your width you can change your height positioning on x and y axis you have your rotation so if i enter 45 degrees for example you can see it rotated but you can also hover right here hold the shift key for example and it will rotate in increments or you can hit ctrl z to go back next we have flipping so flip horizontal flip vertical below that we have a horizontal scroll and i will explain that a bit later what it is we have vertical scroll and we have scrolling in all positions finally we have fixed position when scrolling so when you're creating website designs or app designs you want some elements to be fixed in place once users start scrolling so this is what that's used for and i will show you that in a later example as well below that as i said we have responsive resize and i'm going to show you a bit more about responsive resize later as well below that we have opacity so you can change the opacity of your object by simply using this slider or you can use keyboard shortcuts so one is for ten percent four is for forty percent for example eight is for eighty percent and zero is for one hundred percent below that you have blend modes and you have multiple blend modes basically the same as in photoshop illustrator so if you ever use photoshop i really encourage you to test out these blend modes because they work almost the same as in photoshop but they don't have nearly as many functions as in photoshop obviously because in xd it is just streamlined for ui and ux work below that we have corner radius so at the moment it's zero but if you want to round the corners you can use these dots and simply click and drag and it will round the corners and you can see as i'm doing this values here are changing or you can simply manually enter for example 20 for the corner radius and it will round your corners to that value you can also round the corners of each of your corners so for example i will hit zero and you can see top left is zero right here and you can do that for all or you can simply click right here enter 20 and it will round on all corners next up comes the fill color you can click right there and you can change the fill color you can enter the hex code right here so for example 3e c6 ff for a nice blue and you have your border values right here but before we move on to borders you can change from color spectra by here you can change how light or dark your color is going to be you can change the opacity of your color you can add a hex code or you can simply click right here to save the color as a swatch so you can use it later by simply clicking on it and it will apply to whatever object is selected or in your artboard next if you click right here it's going to open linear gradient or radial gradient and basically you have these three options so at the moment it's the solid color if i click right here you can see we have linear gradient and you can add as many stops as you want you can simply click right here then you can rotate your gradient to go from one side to another and finally for each of these stops you can add a different color or you can add a different shade of your color you can also click and reduce its opacity like so for each and individual color but it radio gradient basically works exactly the same but it's in circle but i'm just going to use solid color for this example to keep things nice and simple below that we have border and if i click right here you can see the border is disappearing and if i increase the size so for example 10 you can see now it's increased you can also click right here to change the color of your border same story opacity hex code you can also add it as a swatch or you can click right here to sample a color for whatever you want and let me quickly sample this blue color as my border but let's go back to here and let me explain all of these so we have stroke width which is basically what you are seeing right here then we have the dash and if i said i don't know 50 for example you can see that it's divided into these dashes and gap is also 50 but if i increase the gap to 100 you can see now the gap is much bigger between these dashes you can always go down to zero and down to zero and see how that looks like and right here we have some different uh stroke options so inner stroke outer stroke center stroke and i really encourage you to test it out and to try for yourself for all of these different options and to see what they are doing next we have butt cap round cap and projecting cap and this is really useful if you want to have rounded edges on your lines for example next we have meter join rounded joint and bevel join and this is basically how the corners are going to look like finally we have the shadow so this is the background shadow of your shape itself so let's enter for example something really huge so 20 20 and 20. so this is the x-axis this is the y-axis and this is how much blur you want to use for your shadow so if i for example increase this you can see that it goes down on the y-axis if i increase it to here you can see it goes right on the x-axis and if i increase it to here you can see that the blur value is increasing massively as i go up in size and you can all only go to uh 100 so that's basically how the shadow looks like and you can also save for the color and the border you can change its color you can go from color spectrum you can enter hex code you can use color swatch and you can always lower it down in opacity from here finally we have the background blur and background blur option is really useful but you need to have two or more elements in order for this to work so let me switch this up a little bit so i moved the rectangle above ellipse just so that i can show you how this looks like so if i lower down my amount lower than my brightness you can just start to see the circle behind our rectangle and you can see how that looks like so i can lower my amount or increase it i can increase or decrease my brightness and i can increase or decrease my opacity depending on what i want to do so basically that's how this works and that's how this looks like if you want you can use background blur for all sorts of things inside of adobe xd especially useful for images if you want blurred backgrounds if you want to use something like glass morphism in your design then you can use this option with the background blur finally we have mark for export right here and this is really useful if you want to quickly export all of your files which are marked for export you can simply click right there to check it out or you can always go right here and says mark for export and then you can quickly export all of your files which are marked for export later for the designers developers or clients so if we move one down basically you can see that for all of these we have some of these options some of them are the same some of them are a bit different and finally for this one i wanted to show you because this is the polygon tool which is this tool right here and you can share how many corners you want so currently it's set free so it's a triangle but if i change it to five you can see how that looks like if i change it to eight it looks like that you can also increase or decrease the size of your shapes by simply holding your shift key and clicking in one of the corners to increase or decrease the size of your shape as we explained you can change how big the border is going to be and finally we have corner radius here like this so let's go with 20 and you can see that all of the corners for each of these corners is going to be rounded uh no matter which value i enter right here finally we have the star ratio and i don't know let's say for example 50 and you can see that it creates these different stars so if i enter let's say 10 you can see it's kind of a cog or 70. so it creates this different sort of shapes right here but if i go to 100 it's going to go back to our original shape what you can also do right here is hold like this and then like this so uh greater than and then number three press enter and it's going to create a heart which is a simple hack that adobe xd team created just to make your life easier when you start creating these icons so basically we have the same options as we always did so now you can create you can add it the fill color you can add it to the border color and you can always go back to where you were previously so you can create all of these different options so for example let me create three and i can go to my fill color to something like this you can add your background shadow background blur and all of these options which we explained finally let me quickly cover this pen tool part and i'm going to go back to it in just a second and explain the pencil so what you can do with it is exactly the same for all of these shapes but this is just a custom shape that you created using pen tool and we are going to move on and i'm going to explain what pen tool is now and i'm going to show you how you can edit complex shapes and how you can create complex shapes using pencil so as i said you can use pen tool to create all sorts of shapes but usually you're using pencil to create these more complex shapes like this one is which i created but let's go once again so you can click on your pen tool and you can click wherever you want and you have these anchor points and once you're done completing your shape you can create a click on the anchor port and you can move it wherever you want so let's say that i want to move this one right here and if you double click on it it will become this arc and then you can change how you want this arc to be positioned and you can also hold shift to go down in these increments if you want so it will keep the angle of your anchor point to whichever angle you want so for example 45 70 90 180 and so on so you can do that for all of this simply double click or if you change your mind at any point you can simply double click back and it will revert back to a straight path what you can also do uh we explained this in previous sections you can change the fill color border color but let's go back and i will show you how these look like so i will zoom in really closely and i will click on my shape like this so let's go to the round cap and you don't see this at the moment but for example if i click right here then here and here then hit escape just to create this line and let me select it once again if i zoom in really closely now you can see this is how the butt cap look like looks like so basically it's really flat this is how projecting cap looks like so it's really flat but it sort of extends where your point is in the bat cap it's right in the center but here in the projecting cap it's right here so that's the difference where your end point is while with the round cap you can see it rounds your cap and it rounds your line and your shape so you can really play around with it that way basically if you click here and click round cap you can be sure that every single one of these anchor points contains that round cap so if you for example want to delete one of these like this one you can see that it contains that round cap and it's still inside of that shape so as i said you can play around with all of these different settings and you can click and you can move all of these anchor points and let's go with the fill color and let's quickly add a fill color let's add a different border let's give it 10 so you can see what's going on and you can also click whatever you want to add new anchor points you can extend them double click and change and create basically different shapes if you want to draw using adobe xd you can put your sketch inside of adobe xd then let's imagine that this is the shape that you are creating you can position it over your sketch like this for example then you can lower down the opacity and then you can simply click on your shape and you can then adjust all of these later which is extremely useful uh if you're working as a ui ux designer if you're creating icons for example and you're using pen and paper to sketch these different icons then you can use adobe xd to adjust all of these and you can adjust the border thickness to 20 or to 2 or whatever you want and basically this is how the pen tool works and how it looks like in adobe xd when it comes to entering your text and using text in adobe xd you have some great features but it's not as advanced as something like illustrator or or indesign which is used for print so let's check it out you have your text options right here you can also hit t on your keyboard so let me type in some random text something like this just so that we have some text on the page and so that i can explain what everything is so let's say that we have completed that and if i select it you can see that we have these options right here so once again same for the shapes we have these positioning options at the top we have these transform options flipping rotating and so on responsive resize and here we have the text panel which is important part of this text you can increase the size of your text by simply hovering over this dot clicking on it and simply dragging and it's really useful thing to do if you want to position your text you can use these as i said and finally let's now move on to text so you can choose your font family here so let's go with poppins for example which is a free will font and i'm going to simply position it in the center like so then what you can do is use the size so currently it's at 47 you can use shift and up arrow to jump between 10 different increments in size so 5767 and so on next we have how the font weight is going to look like so depending on which font you have selected here you might have different weights so some of them have one or two some of them have 10 20 so depending on which one you have selected so let's go for example with extra light see how that looks like light and you can also use the shift key here as well simply go up or down and see how all of these look like next what we have is character spacing and this is basically the spacing between each character so if i use my shift key and increments you can see how this looks like so it's really useful if you want to do that here we have line spacing so spacing between each of these lines of text and finally what we have right here is paragraph spacing but i have to create a paragraph to do that but basically it does almost the same thing as the line spacing here we have left align so when you're typing it's going to go from left to right here we have center aligned so you can see how that looks like and it basically is going to go from center outwards and here we have right align so basically the same thing is left align here we have auto width so no matter what you are typing let's go with left line to show that no matter what you are typing and when you exit you can see it's auto uh width here we have auto height so let's say for example that i want to i don't know type something more you can see that it goes automatically in height as well and finally we have fixed size which is the paragraph i was talking about so if i click right here and lower it down you can see this is a great option if you have loads of text and for example if i did something like this and i know there is more text down below i can always click right here and it's going to show me the text which is down below what we have here is up case we have lowercase title case so each uh first letter of the word is going to be titled then we have superscript so let me add the number two for example and when i click superscript you can see what it does right there we have subscript so basically same thing but below we have underline so all of the text is going to be underlined and we have strikethrough so it's going to go through the text itself you can always click right here to change it and to add whatever you want but basically up case lowercase title case and let's leave it at that for now below that we have a basic appearance so same as for the shapes we have obesity so if i hit 2 and my keyboard is going to go 20 in opacity blend mode fill color border color shadow background blur and mark for export so basically all of the same things that we had inside of our shapes next up let's move on to artboards and i'm going to quickly explain what our ports are and what are some benefits of using airports versus not as we explained in a previous welcome video where i said about our ports and where you can create them and how you can create all these different sizes inside of adobe xd there is also one more option for the r ports as well so when you click right here on your left you are going to be presented with all of these different artboard sizes which is basically exactly the same as here on the home page so all of these sizes are located here as well but why are artboards so useful and what you can do with your artboards basically you can click right here you can change the size so let's say that this is our main screen and you can change the size from your artboard directly from here you can rotate it so you can click like this or like this and let's say that i want to change the size to i don't know let's say something like 2453 for whatever reason it's going to extend to here you can also click responsive resize so when you start resizing you can see how the text is going to act and this is really useful obviously when you're doing responsive design which you're going to talk a touch on a little bit later then you have auto and manual you can click and decide whatever you want responsive resize and how you want it to work next up when i click right there you can see we have a vertical scrolling and we have none but you can also use those options which i mentioned previously about horizontal vertical scrolling and scrolling in all directions and i'm going to touch on that a bit later next we have appearance so if we click right here you can see this is the color of your artboard itself so you can leave it at white or you can change it to whichever color you want and finally below that we have layout so if i click right here you can see that we have layout or we have square if you have your square size you can change it to here so square grid size of 8 i can change it to something huge like 80 and you can see how that looks like if it's easier for you to align items on the grid like this or you can select it from here and then you can change it from square to layout and then you can play around with these columns so columns are usually useful for ui ux design because you can align things to different columns and you can simply count columns which is really easily then translated into code because developers can easily understand in terms of columns how wide something is how tall something is and so on so here we have 12 columns and we have this nice 1920x1080 artboard size which can be really useful for web design for example so if i choose 2 i can use something like 8 columns i can even change it down to 4 but let's go back to 12 and i can change the gutter width to 60 for example and gutter width is basically the spacing between these columns and columns are these blue bits in our case so you can change the column width to i don't know 60 for example to make your columns even narrower and you can change different margins so margins are the spacing between these columns so here on the left and on the right you can change them automatically so for example if i type in 200 you can see margins are now really huge but you can also go right here and to change different margins so if i hover you can see we have margin top margin right bottom and left you can also use default so if i click right here this is the default option or you can make default so if we for example make these changes 60 60 and let's use this as a 60 for example and we want to make this as our default you can simply click make default you can also give it a name and it's going to make a default option for that finally if you think that these columns are too distracting you can click right here and you can lower down the opacity of these columns so they are not too distracting to look at and you can always glance at your content at ease libraries are a great asset to have in adobe xd because you can quickly organize all of your files all of your colors all of your character styles and so much more in one single space where you can easily navigate around and you can access all of those files at once so it's located right here and if you click on it you can see that you can add colors you can add character styles and you can add components so let me quickly show you how that works like so let's duplicate this by hitting ctrl d and let's lower it down to 40 for example and let's change it from medium to light and let's also change the color to this really dark black and let's change this to lighter color or even better let's use something completely different so let's use this color for example and let me click right here and then right here to hide my guides so what you can do from here is for the colors i can click right here and i can add the color of my text as a color swatch and i can also do the same for this one for the character styles i can do the same so click right here and then add it to here so because we have this and let me delete it like so let's now go ahead and change these so let's right click on this one hit delete like so so now we just have this one at 57 and i will also do the same from here so we don't have this subscript anymore so i can click right here and then add it but it also added so i can always click on one of these and hit delete here and there we have it basically so this is how you add colors this is how you add color character styles and you can do this for every single shape so let's use this for example and let's use this and let's remove the border for example and you can simply click right here to add this color you can also double click right here and call it for example main red call this main blue for example like so and let's call this the text color or main text or whatever and this is really useful to do if you're dealing with developers later because then you can create these tokens and it's going to be easily accessible to them now in terms of components let's say that for example i want to duplicate this hit ctrl d then shift alt and left click on my mouse and i'm going to change this and for example let's use these two and instead of this let's create something like this and also if i click on it for example maybe i can change it to 20 and let's say that this is our icon or our logo or whatever and i can go to my layers panel double click right here and call it logo just for example and what you can do is you can click right here to add it as a component you can also click right here to add it as a component or you can hit ctrl or command k on your keyboard and you can add it as a component so for example if you want to create a new artboard let's say that we want to create this one you can click on your logo drag it and drop it right here and you can see that it's an instance of a component because it gives you this hollowed out diamond that you can see right here and because this is our main component you can see it's filled in so if i take them and bring them here side by side you can clearly see the difference let's delete this one hit ctrl 0 to snap back into place and space and left click to navigate around so if i click right here you can see it's filled and this is empty so what that basically means is when your diamond is filled you're working with main component and when your diamond is hollowed out you're working as an instance of that main component what that basically means in plain english whatever changes you are creating and making to the main component they are automatically going to translate to the child component or this hollowed out diamond in this case so for example if you didn't touch the child component at all then whatever change you make to the main component it's going to translate to the child component automatically but for example if you overridden those changes if in our case for example let's say that maybe if i double click right here like so and change it to 10 or even to zero then i jump in right here double click inside to enter my shape and change it to 50 you can see it updated here but not here it updated in the main component not in the child component because we manually changed this value in the child component before we did it in the main component so you can just imagine that you can do this for all of your work uh in adobe xd so let's just imagine that you for example created a navigation for your website and as a main component you have it as so but as a child component let's say that you have items selected in your navigation so it's not going to change in the main component but it's going to change in a child component but in the child component you didn't change background color for example so you can quickly jump into main component change the background color it's going to update all of your child components and you can have as many child components as you want in this case i only have one just to demonstrate how this looks like and let's say that for example in that navigation main component you want to change character style for example you want to update the font family you want to update the font size maybe you even want to update the font color you can do that in the main component and it will update throughout your child components no matter how many child components you have just imagine changes you make to your child components are not going to translate to your main components but they are going to translate the other way around so from main component to child components so let's quickly go back to here and let me explain that a little bit more so you can see on this main component we have this red color selected but if i select this color for example it's going to update child component as well and let's make this a bit more interesting let's hold our alt key or option on a mac and i can make another child component so you can see these uh hollowed out diamonds are not changing so basically you have filled out or you have holdout and that's basically it so let's say that on this one i can jump inside double click and i can change it to blue so let's update this one to red but this blue one is not going to change because it's overwritten inside of this child component rather than in this main component so basically you can see how these components look like how they work and they are really useful especially if you're working with let's say icons if you're working with complex elements such as navigation because for example you can create different styles of components and you can create different elements to your components and then you can move on from there you can also create something which is called component states and that basically means when you move into prototyping later how that component is going to change so let me show you that in a real example so here we have this component and let's say that i want to create a different state for example for the hover state so i can simply click right here and add a new state or a hover state in our case i just want to create a hover state and i'm going to explain all of these states a little bit later in the course in a bit more details but for now let's just quickly explore our states just so that you can understand how it all works so here we have hover states once again you can click right here and click hover state and edit you can also change it so for example hover and inside of the hover state let's add a border or let's add a background shadow let's add some elements so click on the shadow let's bring in some ridiculous size so 20 20 and then 20 so something really huge like that and if i take you back to my layers panel you can see when you click right here you can change between your component state but if you click right here you can see that you also have this component states and here as well because we didn't include any component states before we changed it and included in our main component we didn't include it in our child components so once again whatever change you make to your main component it's going to translate to your child components so here we are at the default state and if we click right here just to preview these changes and if i quickly hover over it you can see that it changes and that it updates in real time but also you can hover right here and you can see that it changes because we made that change here and it also updates same as with the main component but because we have this big corner radius here we don't have it here in these two child components when i hover you can see that it updates and gives us this change because we made it in the main component so that's basically it for the components you can play around with them you can add different states i'm going to explain that a little bit later in this course what you can do with these components and these are the libraries so once again if i take you back to here you can see we have colors you can have as many colors you want character styles you can have as many of them as you want as well you can also click right here to change between grid view and list view whatever it's easier to you perhaps this view is much more suited if you have multiple icons multiple logos and so on and you can also expand this panel to give yourself a bit more space and you can always hide it by simply clicking right here so it's not in your way and you can do that for both libraries layers and plugins as well you can also search document items so for example the logo here it is so it's much easier to find especially if you have hundreds of different icons let's say that for example i have 50 different search icons i can type in search and then i can sort between those search icons right here in this list rather than scrolling down and searching between all of my icons finally you can have document assets right here so if i go back it's going to take you to the libraries and these are the document assets so all of the assets from our document which you can see right here or you can also create my library which is going to take you to the cloud and you can create your library for example with custom images custom colors custom fonts custom icons and so much more in the cloud and you can simply click there with my library it's going to pull up that library from the cloud and you can simply drag and drop the elements from the cloud directly onto your document so that's one great feature and benefit to have with these online libraries basically if you are on a free plan you have this access to online libraries but your space is limited if you have the premium plan you have unlimited space so you can have as many files as you want on the cloud when you're working as a ui ux designer chances are you're going to have bunch of different layers and a layer management is really important to have as a skill but as a sort of habit good habit to have because as your projects grow as they get bigger the amount of layers is going to be huge so layer organization is really great skill to have as a ui ux designer so let me show you in adobe xd layers are located right here so here i have just a project from my youtube channel and you can check it out i will leave the link so you can go and check it out there and see how i created this if you want to create it for yourself but layers are located just below our libraries and same story for the libraries you can click to show and click to hide them you cannot see any layers before you select the artboard so if i select this artboard for example you can see all of these layers right here so let me zoom in a little bit closer and explain what's going on for example in this text so here i have the title i have the air max which is this text right here and i have this mask and we are going to touch up on the masks a little bit later and you can select all of these items for example so if i go from here to here holding my shift key then hitting ctrl or command g so that i can group them in a group i can double click right here and change the name of this group to website for example and then you can organize your layers that way organizing them into groups is really useful because if i unzoom just a little bit you can see that i have a group for my navigation inside of that group i have three items and i always like to go from left to right because majority of the world's population is reading from left to right so therefore i have this organization so i go from logo which is on the left top left search and then menu you don't need to have organization like this it's just how i do things it's really all up to you and how you want to structure your layers but i like to do them that way so you can see i put them in a group because it's much easier to hide this group you can simply do that by clicking here if you want for example to reposition some of these elements and you don't want this navigation to be obtrusive and to be into place you can also lock it so you cannot move it so if you click right here you can see it stays in place and you can also mark it for export so you can click right there and you can export it later if you want to you can also leave some items outside of the groups so as i did right here but you can put them for example i have a group and an item i can hit ctrl g and put them in a separate group so it's really all up to you how you want to structure your elements you can for example also divide the page to top part middle part bottom part you can combine your elements that way so it's really all up to you and how you want to structure your elements inside of the layers panel you can also reorganize some of these so you can select a group for example drag and drop it below certain elements and you can also do that for the elements you can put it all the way down here and you can hit ctrl 0 as many times as you want to organize all of your layers that's basically it for the layers but they are really important and i cannot stress enough how important it is especially if you're getting started learn to name your layers because you're going to be quickly caught up in this moment where you don't know what anything is because you didn't name that correctly and now you have to send the file to your client instead of wasting hours on end just to rename your layers try to rename it as you move along or at least try to put them in a group and rename a group so when you send the file to the developer developer is going to be easily able to understand what everything is and where everything is located on the page plugins are really useful thing to have in adobe xd because it expands xd's functionality and goes back and away from basics and you can really do some really advanced things in adobe xd by using plugins so plugins are located right here on the left you can click right there and it's going to show you the list of currently installed plugins now these are just mine plugins if you're just installing adobe xd this list is going to be empty so you have to start installing plugins on your machine and to do that you can simply click on this plus icon right here it's going to take you here and here you can discover browse and manage if you click manage obviously you can see all of your existing plugins and you can hit update all in my case i have these two which need to be updated so you can browse and let's say that i want to i don't know include a text you can hit enter and you can see all of these different text plugins which you can use to increase and improve your speed i have lorem ipsum in my case which i'm going to show you but that's basically how browse feature works and discover is really great because you have editor's choice you have uh jump start your design so featured collection what they think that all designers should have is located right there so you can check it out or you can form your own list it really depends on what you are doing because plugins i'm using for myself perhaps are not going to be that useful for you here we have essential plugins so document chat fancy maps list plugin and glitch i really recommend to use fancy maps because you can for example install a quick map right there it's going to pull information from google maps and it's going to integrate that really easily you can connect xd to your favorite app so if you're using slack if you're using zeppelin dropbox and so on you can connect it we have collections so popular sketch plugins if you're doing some wireframing for example copywriting and localization testing and usability so for all of these different features and you can also browse through categories so collaboration tools and automation usability and testing publishing hand up and design assets so let's say that i want to click on the design assets it's going to show me different plugins which are in the design assets category or i can simply click right here and search between these different categories or search directly from here basically when you install a plugin so let's say i want to use this ui faces and i can click on it to install it you can read the review or you can click on the plugin you can see what it does you can see all of these different examples and you can see the tags what's new so updates rating you can see who made it and so much more so that's basically it how can you use and update plugins where they are located and let's now explore some plugins so here i have this text and let's say that i want to edit this text but let's say that i just created it and i don't know what to include there what i can use is a user plugin called laura mipsum for example you can simply select your text click right here fill with placeholder text you can choose whatever you want from here and let's see it end with punctuation mark let's say period include line breaks you can uncheck that or check that whatever you want trim text area height to fit inserted text and i have two lines of text so hit insert and it's going to insert this text you can try that again you can fill with place order text last settings quick lot of ipsum quick load and mips on trim height and so much more so let's say that i want to have my fixed size let's say i want to increase it to here and for example to here maybe fill with placeholder text now it fills up with text you can also cut it to height you can also do a fixed size you can do like this and for example i need more text then i can quickly mipsum it's going to fill in maybe i can extend it a bit more down to something like this quickly mipsum is going to fill in so that's basically how lotum ipsum works and how this concrete plugin works but let's say that you want i don't know something else so for example we have this ui faces and let's quickly undo this a couple of times so undo this to my first and original setting which was this so let's say that i need a ui right here maybe ui icon maybe some avatar or something else let's quickly exit of this information so somewhere around here let's say that i want to include a face of a person inside i can go to something like ui faces and i can take my source from unsplash for example you can go to filters and let's say that i want to include a female from let's say i don't know 30 to 40 year old and emotion is happy and that's all i need you can also go to advanced and let's say apply randomly or select photos i'll choose apply randomly it's working in a background and after it scans the website for my specific uh tasks because i tested to find me a female in this certain demographic you can see that it found this free image from unsplash and you can also do this for additional images so let's say that i want to create i don't know two or more so let's say that i want to quickly uh delete this one let's quickly go to here you can also use the repeat grid but i will explain repeat create a little bit later and let's say that i want to fill it in in these three from on splash filters let's say to 30 i don't know male and female and apply randomly it's going to work its magic and obviously the more images you have for it to fill in it will take more time obviously your internet connection speed comes into account here and once it's done you can see what it does right here so here we have three females and i also selected a male so let's say that i want this to be a male i can click outside then uncheck female click apply randomly and it's going to apply a random mail face right here to this image as soon as it found the criteria matched right there so there we have it those are the plugins and you can obviously play around with these different plugins you can install how many of them as you want you can see that i have just a few right here but you can imagine you can have a list of plugins right here and you can scroll up and down and basically uh search for these different plugins and apply them and finally discover plugins i can go to manage plugins and let's say that i want to i don't know delete this pattern maker for example because as you can see it keeps showing up right here i can hit uninstall it's going to uninstall it and you can see automatically we cannot see them anymore right here so basically those are the plugins and it's really all up to you the designer how you're going to use these plugins you can for example just use lorem ipsum and maps you can use this what we use ui faces for these phases to generate these random avatars you can use something like a whiteboard which is really incredible you can also use different plugins which are going to be able to provide you with different layouts already pre-created so you can just drag and drop these layouts inside of your artboards and start creating designs that way so it's really all up to you how you are going to use these plugins and plugins list is ever expanding anybody can create a plugin for adobe xd so make sure to always check it out make sure to follow adobe xd steam on twitter for example when they are launching new plugins which are really cool and they think that more and more people should know about them they will always post to twitter for example and to their facebook page so make sure to follow them there for all the latest plugins and news about plugins repeat grid is this amazing tool in adobe xd which is able to cut short all of these boring tasks of repeating elements so instead of copying and pasting different elements then positioning them below each other you can simply use repeat grid to do these tedious tasks so here we have this design and i'm starting with a wireframe and let's say that i want to create a list of these popular hotels so first things first let's quickly uh get rid of some of these elements and i'm going to move them all in a group like so ctrl g and then i'm able to simply move them down and let's get rid of this so let's say that i need to fill in this space and that i need to include some more information what i can do is simply select this and hit repeat grid what that is what that's going to be allow me to do is expand the amount of all of these different elements so let's say that i want to create two of them and i want to align them on the left with these right here at the bottom and let's say that i want to create i don't know three or four more for example something like that and basically this is how easy repeat grid is to work with and then if you have your text files with you then you can easily drag and drop a text inside and you can easily change it so let me quickly show you how that works let's say that i want to create a text file so let me quickly create one on my computer and call it for example cities this is how it looks like i'm simply using notepad on windows you can use the default option on mac and you can see we have honolulu us let's say that i want to use that one but i also want to use london uk paris france rome italy and let's give it two more for example belgrade serbia and let's say montreal canada let's say that this is all that we have created and now how can you actually use this file in adobe sd really quickly so what i'm going to do is close it hit save and i'm going to simply drag it from my desktop as you can see i named it cities and simply place it on the first one because i don't want to place it right here i wanted to place it on the first one because we created repeat grid from this first one so you can paste it right here and you can see it automatically updated throughout all of these so you can have as many of these documents as you want you can have them for example for male names female names cities countries different food recipes whatever you're doing in adobe xd you can have different files for that different text you can also generate this on the web you can use random websites and you can generate this information which is going to be really useful because then you can create real looking websites real looking apps real looking dashboards really quickly because you have all of these files prepared already so let's say that i want instead of calling this ocean view and whatever let's say that i want to create a different one for let's say i don't know people and i'm going to call them people and you can see if i double click i call that people and let's say that i want to give them names so jack mary i don't know mark stephanie jude and let's say graham and now that i completed all of these names what i can do is hit close and i can locate the images on my computer which i want to include inside or you can use a random tool let's say that i want to include them here and go to ui faces go to pixels this time and let's go with filters male and female and let's say that they are all happy and click apply randomly this plugin is going to work its magic but you can also do the same thing from your computer so i'm going to show you that as well so you can see that it filled in with all of these different images but as i said you can do that for let's say mail and here i have just some of these images pre-prepared and i can simply drag and drop how many of these images i want so let's say that i have six of them i can select six different images and i can simply drag and drop them from my computer let me enlarge this in just a second so six of them i can simply click drag and drop them into the first one and it's going to populate with these six images so as you can see repeat grid is really extremely useful and when you're working with different components you can see that i have this color selected perhaps i want to edit this color i can right click and i can simply go to edit and let's say that i want to use a bluish version of that you can see wherever that color is selected it's going to change to that color and update in real time so you can see it's really useful to work with repeat grid it's really extremely simple all you need to do is simply create one instance of whatever design layout you want hit repeat grid create how many variants you want and you can also use files like i showed you with the text files unlimited number of files so as i said you can do one for the names names of the cities names of the countries and so much more or you can simply use plugins to apply different layouts different elements to your repeat grid designs if you want to have portions of your elements or of your designs hidden from you you can always use masks in adobe xd to achieve that so let me show you on my example how i use masks and how you can do too so here i have an example of the animation of my button so if i hit right here just quick preview and click right here you can see a lot of it is going on and you can see this whole tutorial on my youtube channel but basically a lot of these different things are happening and all because of the masks so if i jump in right here and show you on my layers panel what's going on so obviously i have a different component and different component states with different animations once again if you want to check it out how it's done check out my youtube channel uh that video is going to be there so you can learn how i did this but basically here we have this button and the thing we are interested is mask so basically how masks work is you can see that we have all of these different elements inside so we have deliver truck icon which is this right here delivery sent which is the text you cannot see at the moment purchase now which is this text right here and obviously button so how i created this mask for example let me quickly copy all of it so hit ctrl c and let's say that i want to hit ctrl d right here and let's delete all of these things and i will right click ungroup component right click ungroup mask and hit delete right here so once again what we have right here is this delivery truck let's say that i want to position it right here we have delivery sent and i want to move it out of the way to somewhere around here and we have purchase now with which i want to move right here in the center so how can i mask everything so people cannot see this delivery sent and let's even change its color because it really doesn't matter which color it is so how can you do that simply duplicate this which is the original button hit ctrl d and basically uh in our case because i want to see what's going on i want to expand it just a little bit so shift alt and left click i can expand it to here i can include the border remove the color just so that we can see what's going on in our case position is right here and all you need to do is simply position it to the top click on it hold your shift key click right here to select all of your items then hit shift ctrl m or shift command m on a mask and it will on a mac sorry and it will create a mask of all of these components so basically what happened here is mask has hidden components and elements which are outside of view so basically your view is your mask and because our mask is this big everything which is located outside of our mask cannot be seen everything which is located in can be seen so basically you can see that i can move this to here maybe and you're not going to be able to see the whole truck when i click outside because it's mask from here you can obviously move your mask down a little bit if you want to you can move it up you can play around with it and you can create masks using pen tool for example so if you have complex shapes that you need to select you can obviously use pen tool for that and then you can place that shape you created using pen tool on the top of your layer stack like i did with the copy of my button here then simply select it select everything below that hit shift ctrl m or shift command m to create a mask and then you can play around with it obviously you can create different states like i showed you here and let me show you one more time in our example what's happening here so in the first state when users click or tap purchase now it's going to disappear truck is going to drop disappear button is going to appear once again and we have this delivery sent so as you can see everything is done with a mask everything is done with the component states so masks are really important a really powerful tool to have in adobe sd so i really encourage you to test it out and try it for yourself and see what you can create using masks adobe xd has some 3d functionality and although it is really limited it's great thing to have and a great option to have just to spice up your designs here and there just a little bit but it's important thing to note that adobe xd is not a 3d tool by any means if you want to learn 3d i really encourage you to test out free tools such as blender for example just to understand what real 3d is and what you can do with it but in adobe xd you can really do some fun stuff so let me quickly show you one example this is the video i have created recently uh on my youtube channel and you can check it out there as a tutorial to see how it's done but basically if i zoom in i have all of these cards and let's say that i want to create this card to be 3d all i need to do is simply click right here this thing appears and you can click and rotate and you can see it's really basic so as i said it is 3d but at the same time it's not really all that advanced but you can do some pretty cool things with this tool so if i quickly show you what i have created for that tutorial if i click right here then click here on the preview and click right here you can see that it goes from stock which is this one to 3d with just a single tap so you can see uh your options are really limited with this 3d function so let's explore it a bit deeper so once again if i click right here to go inside of my 3d option what i have right here are width and height so basically the same thing x and y same thing but here we have these three so this is the x rotation this is the y rotation and finally this is the z rotation or the z rotation however you want and this is the z position so instead of x and y now we have the z position as well so what you can do is explore a little bit and see which all of these rotations are by simply clicking here and then holding your shift key and then up or down arrows so if i take you 10 increments at a time you can see what x-axis is if i do the same you can see what the y-axis is and you can go the other way around to negative and it's going to change to that way as well and you can also click right here and to see why what's that doing so you can go for example 30 like this and then you can play around with 30 like this and perhaps i don't know 30 like this and you can have these crazy shapes in 3d or you can simply hit 0 tab 0 tab 0 and then enter it's going to go back to the default option and it's really important if you want to get out of the 3d you really need to hit this right here which is the 3d transforms or you can use controller command t to go inside then it's going to exit from the 3d what's really great is you can use different component states with 3d so for example this is my default state but you can just imagine that let's say that i want to use different let's say background shadow or different colors or whatever else in my next state so let's say that i want to i don't know this first state to be like this but when they click background is going to change the color this is going to change the color and so much more so let's say that that state is going to be called clicked state now you can do that here and it's going to translate into 3d which is really a great addition but that's basically it it's really limited but you can do some really cool stuff what you cannot do at the moment of making of this video is hover 3d that's why i showed you how to do a tap but you still cannot do a hover but in the meantime when you're watching this video perhaps xd team launched that update or they are going to update it in the future and launch that update so just make sure as i said at the beginning of this course to check your updates to check adobe xd team and to see what they are working on currently and the updates they are launching but basically that's all the 3d you're going to have at the moment in adobe xd but perhaps you're going to watch this video in year from now and perhaps they update it so just make sure to check your update and to check the options you might have for 3d using mockups in adobe xd is really quite simple but the trouble is at the moment you don't have that big of a choice of mock-ups so i would really recommend either a free online tool or if you have photoshop your options are basically endless because there are thousands and thousands of different mock-ups online that you can download for free or even purchase different packages and use directly into photoshop so you can export files from xd save them as a png for example or jpg and then simply open them up in photoshop mockups place them in mockups and then create different presentations but if you want to create everything inside of adobe xd the only great option i found is angle it works really great for me but i found some people online don't really get it they get the free version they didn't get the pay version so take it with a grain of salt it works for me and i'm going to show you that it works for me but it might not work for you so here i have my chatty ui kit and you can get this ui kit on my website if you want to i can hit ctrl c to copy this one for example and then i can go back to angle or even better i can take this mock-up for example and you can see that i have a premium angle package this is a bit older version they have newer version and now but let's say for example that i want to use this one off the phone hit ctrl c to copy it and you can see that i have multiple of these and they are not even all of them listed here because they are lacking imac for example so if i take you back to my chatty ui kit let's say that i want to paste in that mock-up right here and i want to position it somewhere around here and let's say that you are creating a presentation so let's click right here and maybe your presentation is 1920 by 1080 let's call it presentation like so let's move that mock-up inside and let's give it some color so if i go right here go with main blue maybe and then yeah let's just leave it like that for example so you need to position your mock-up of this screen into your phone so how you're going to do that simply click control and click go to your layers panel you need to be on the screen layer which i am at the moment then let's see this is called splash screen so you need to go to plugins you need to find the angle plugin apply mock-up then you need to select the splash screen and hit apply it's going to work its magic and in some cases it's going to take a lot of time but in my case because it's really quite simple it applied the mock-up and you can see how that looks like so if you want to for example use this feed number five process is exactly the same so i'm going to go to the screen layer go to the plugins apply mock-up and feed number five let's locate it right here so feed number five here it is and you can play around with pixel density quality orientation so you have best and you have a little bit better you have average and so on but i just choose to be at best hit apply and you can see it's work its magic depending of how big your screen is or how tall it is how many different elements are inside it's going to take you more time or less time but as you can see it takes just a few seconds in my case so as i said this is really a great thing to have and let's go back to this and let's say that now i want to use this mockup or even better let's use i don't know this one hit ctrl c and then i can go back to my main presentation file extend my artboard hit control v to paste it inside perhaps it's going to be located here and now i can click inside locate my screen layer which is this right here and let's say that i want to include this invite accepted screen so let's go back to here apply mock-up located so invite accepted let's see where it is located if i can even find it here on the list here it is invite accepted hit apply it's going to work its magic and perhaps it's going to take a little bit longer because of all of these different elements but here they are so if i select the entire mock-up bring it down you can see that the quality is pretty decent but it's going to obviously compress a little bit so it's not going to be as high quality as this is but this is really great and good enough for presentation so basically that's angle and you can go to their website you can simply type in angle for xd for example it's going to take you there as you can see it works in my case but i found online some people say it doesn't work so what you can do is install their plugin as you can see here it is right here you can simply go to plugins list you can go to the search type in angle and you can see it's right here i installed it and after you install it go to their website and check out the free version of the mock-ups they have see if you like it see if they work for you if they do great then you can really decide if you want to purchase the full premium package and you can see in my case if i show you that one more time how many of these mock-ups there are this is also not the full story because you can also get all of these wallpapers so this is how it looks like so you can get these wallpapers and you can use them in your designs and they are extremely big so let's say this blur number one and let's go back to our angle and let's go back to our design so let's say that i want to include image here and let's go inside to this background for example i want to include this plural i can simply drag and drop it inside and you can see how big this is if i double click so you can really scale it up and if i check one more time i think there are something like 4k or 5k even yeah 51202880 in size so you also get these wallpapers and you get all of these different um angle mockups and you can see we have watch we have pixel nexus galaxy imac and so much more so if you want you can check it out but make sure to test it out for yourself because i saw online some people complaining that they cannot either install the plugin or the mock-ups don't work or they don't work in their case but they work in friends case so make sure to test it out for yourself but that's basically it for the mock-ups in adobe xd if you have photoshop if you have different online options i really recommend those because those are much better in quality in range you can also choose different devices you can choose for example to put your design on a printing truck or to put it on a house or on a sign or whatever but you don't have that option in adobe xd as of yet you can also jump between photoshop and xd and save the image save your designs as images in xd then jump into photoshop position them in mockups there then hit control or command s they will apply automatically to xd files but that's really a workaround so your options are either angle or if by the time you're watching this video perhaps some different options crop up but in my case for now it's either angle or photoshop or some different online tools so once again it's really all up to you to decide what you want what you're most comfortable with using and if you want you can pay for angle or you don't have to you can use the free version which is really limited knowing how to use keyboard shortcuts is extremely important because it's going to speed up your process it's going to speed up your workflow and it's going to make your life as a ui ux designer a lot easier if you know how to use certain shortcuts for the start make sure to learn the most important ones but later on when you move down the line and improve your knowledge of ui ux or adobe xd as a tool then i really recommend to learn some a bit more advanced shortcuts so to show you what i mean here i have a design which i created on my youtube channel so if you want to see how i created it head on over to the youtube channel and check it out there it's actually a series of designs and we are moving from paper sketch to uh wireframe in xd then to design and finally prototyping so if you want you can check it out there and to show you what i mean here we have a bunch of these different elements so let's say that i want to click right here then right click you can see next to all of these you can see these shortcuts obviously the most important and commonly used is undo which is ctrl or command z but you also have control v control c you have command v or command c of course but you have multiple of these so if i right click right here you can see copy you can see paste paste appearance duplicate delete move to front move to back group ungroup so there are a lot of these different shortcuts and i really recommend that you learn as many as of them as you want and as you need especially when you develop your workflow and when you see that you are using same tasks over and over again it's really important to save those tasks as shortcuts because it's going to improve your speed massively to learn these shortcuts you can obviously do what i'm doing right here so you can right click and you can see what everything is or you can go to website like this you can simply google adobe xd shortcuts and it's going to take you official adobe help and you can see keyboard shortcuts right here if you want you can click to download the pdf version of these shortcuts and you can see it's showing both mac and windows options so you can see general shortcuts for edit menu for file menu for pot or pen tool for layers objects groups and so on so you can download the pdf learn shortcuts that way or you can explore them through adobe xd and simply learn what is the best way to save yourself some time when you're working as a ui os designer in adobe xd is by using shortcuts because you're going to see as soon as they go into your daily routine you're going to be able to be much faster much more productive and you're going to be enjoying xd much more because you're not going to think and overthink what you're doing because your mental capacity has increased with all of these xd shortcuts you can work with multiple files and file types in adobe xd so from basic image file types like a jpeg png you can open and save pdf files you can work with svg icons and much more also file types are really important when it comes to document files so for example because adobe sd is obviously created by adobe you can easily open and work with photoshop files you can also work with illustrator files and you can also work with sketch files because they are trying to take as many sketch users as possible and bring them to adobe xd and make them stay there so if i show you here on a home screen what we have is on your computer you can click there and you can clearly see get started with existing design so this is what i was talking about if you have a file so for example a client developer teammate somebody else send you the file type and you need to open it up in adobe xd you can do it from here so here we have psd or ai so photoshop or adobe illustrator file we have xd obviously and this is what xd opens up the best and easiest but we also have sketch files and this is what i wanted to show you so i have some sketch file from envision and i will open it up and one great thing about adobe xd files is they are really small but here with this sketch file with all of these different components layer styles and so much more we have a large file so that's why if you take a look right here it's taking a really long time to open but what adobe xd is trying to do is open up this sketch file and convert it to adobe xd file so as you can see it starts filling up with these components and it's going to show a bit more now as you can see and what it's doing is trying to take sketch components and bring them right here so as you can see we are still missing colors we are still missing character styles but if you update to these fonts which are missing in this case they are going to appear here in the character style panel but basically this is how that is going to look like so we have welcome screen we have mobile version if i scroll down we have tablet version and finally we have web version here as well we have ui colors so be this is basically their sort of style guide we have these main components and you can obviously create components from these elements and you can see that they are bugs sometimes like with this text for example but we have it as a component here we also have symbols which are sketch way of saying components so they are used to be called symbols in xd as well now they are under components so basically this is how that looks like so you can see it does look quite a bit messy but you can still work with these files you can open them you can save them as native components in adobe xd and then you can save the xd file later and you can share that file with clients developers and your teammates so finally let me show you the structure so if we take for example this symbol right here and if i switch to my uh layers panel right here you can see what we have so we have this form so we can edit all of these elements let's say that i want to change the color you can see it updates really easily we have this icon in the center so you can easily edit the appearance of this icon for example we have this text and let's say that i want to update this so let's say that i want to extend the base and the button so let's bring it up to here let's bring this text just a little bit down so it's 60 between icon and this text and this text so basically now this component is updated and i can do the same for all of these other components so we can locate it it's called the form and i can jump in right here i can do what i told you so click right here type in the form because as i said we have multiple of these so you can hover you have form two instances and finally we have form of two instances of this one so perhaps it's a better idea and they didn't do that in the first case because these are main components and mobile symbols i will call this form mobile so let's test it out form mobile which is once again why it's important to test out all of your elements so we have form and form and form but if we created it as a form mobile from the start then perhaps we will be able to find it or mobile still doesn't exist so you have to perhaps close the xd then open it up again and then it will update there and show there but that's basically it that's how easy it is to work with sketch files as you can see there are clearly some bugs and you need to find your way around those bugs for example you can delete these components from this file and then start over or you can do what i did right here and then edit the components close the xd file open it up again and it will show as a native component there then you can save it out as an xd file and you can share with with your development video developers clients or teammates when you're working as a ui ux designer obviously in every single project that you do you need resources now whether those are images whether those are icons mockups whichever other resource you want to use you have two choices you can work with free resources or you can work with paid resources especially beginners and designers who are just getting started in this business tend to use free resources that's why majority of designs online look exactly the same because all of those designers are using basically exactly the same resources as everybody else and that's the one key problem and the other key problem is just selection that you have online so if i show you with the images example but this can also be translated to icons here i have unsplash open which is basically the golden standard of these three images and you can see that you can scroll down and find some amazing images so let's say that for example for my project i want to use this image i can open it up i can see who the photographer is and i can download it right here i will also have to leave the link to this photographer's profile because i will have to credit them you don't have to do this necessarily but unsplash says it's going to be really nicely for that photographer in particular and for unsplash's business as well to leave the link as to where you found your image so you don't have to but it's really nice thing to do pexels does this as well as my as all of these other websites as well so if you go back to the image let's say that i use this image but for example i want to use a photo of this girl in some other positions or let's say that i want to use the photo where you can see this girl as a whole perhaps she's sitting somewhere she's standing somewhere so let's see if we can find a picture so you can see that we have this one image and this is the girl but she doesn't have this flowers so let's see if we can find something else and as you can see we are now stuck so we cannot use that image in a series of other images yes it is the same girl but it's in different outfits it doesn't have that those flowers on her face it doesn't have that same exposure colors are not exactly the same outfit is not the same so straight away we have a problem so how designers are working around this problem they're simply finding other models who are looking similar with the similar exposure on those images with similar color styles temperatures and so much more but basically that is your workaround your designs are not going to be coherent because you're going to take image from this photographer with this exposure this photographer with this exposure and same story goes for the mock-ups so for example if you're using mock-ups which are not from the collection like i showed you angle collection is then one mockups is one mockup is going to have for example i don't know iphone 10 the other one is going to have iphone 11 and then macbook is going to be the older version and so much more if you're using icons same story let's say that you're using outline icons in your case and perhaps you really like the search icon from that outline pack but for example you also need a house icon and you cannot find the same style of icons in that pack so what you need to do is use completely different pack from somebody else who made it that's going to be a chore for developers because icons are not made the same way perhaps this icon is available as an svg this icon is available as a png and then when you send those files to the client you also have to say to the client if you want to use these items so for example this image this icon this mock-up you have to credit all of these designers because they created it and under certain licenses you need to do certain things otherwise you are risking a lawsuit and that's really the main issue with these free resources because over my almost 20 years in this industry i found many many many designers out there complaining about somebody else coming after them either a photographer or a fellow designer or a website because they use a resource especially from google images because when you're using resources from google images you really have no clue who created it why they created it at least with websites like unsplash for example or icon websites like flat icon for example you at least know who created the original item where you downloaded it and who you can credit but if you're using google images for example or google files then you're in real trouble because majority of times you really have no idea who created the original design or the icon or whatever and then once your client uses it they are risking a potential lawsuit so just keep those things in mind number one collections so your designs are not going to look coherent because you can take one image from this person one image from this person so your design is going to look quite messy especially on screens with lower latency and especially nowadays we have 120 hertz screens so if you're using png icon and svg icon users can really tell and especially with these lawsuits so just keep all of those things in mind when you're getting started when you're using these free items from the web so just make sure to understand i'm not saying that you don't use these free items but make sure when you do use them to use them responsibly simply save all of these licenses save all of these resources where you found them you can open google doc for example and then you can list images in a list where you found them for a particular project or icons or whichever other resource you are using and then you can send that list to your client and say if you want to use these resources so same ones i did in my design make sure to follow these steps to thank these people to put the links on their websites and so on so therefore you as a designer are covered and then you're taking the responsibility from yourself to your clients and make them have a choice so if they want to use these items they can but they now know the risks for example let's call it like that or if they want to use some other items then you're cleared as well because you are saving yourself from potential lawsuits and from potential issues in the future but what happens after a certain time when you gain some traction when you get some more valuable clients when you save some money then i really truly recommend that you avoid all of these free resources except for example for fonts because you can use google fonts which are free and open source and really great but once again majority of designers out there are using those fonts so make sure to understand if your design is looking quite similar or even exactly the same as some of these other designers there is great potential chance that you chosen font that other designers have chosen as well icons images and so much more so once again if you want to use premium resources there are many different options out there but what i truly recommend is envato elements so this is how it looks like and you're getting all of these items that you see right here under one single price so you're getting additional 50 million photos you have their photos here as well you have stock video video templates music sound effects graphic templates so print templates websites ui kits infographics we have graphics so backgrounds textures patterns icons presentations photos fonts add-ons web templates such as site templates you also have wordpress themes we have 3d right here we have wordpress cms free files we have ebooks and courses as well on envato tots plus so you're getting all of these different elements under one single price you're paying the price for one year and then in that one year you have unlimited use of these files because on some other sites like ui 8 for example when you pay you have a daily download limit so you have a limit to how many items you can download in a single sitting for example or for a single project while with envato elements you don't need that and you can use whatever you want with envato elements and you're always covered with their license so let's take photos for example let's jump in right here and let's see photos so once again you can go to those 2020 photos and there are 50 million additional photos out there so let's say that i want to use this photo i can click on it and when it opens you can clearly see straight away one huge difference between premium photos and free photos it's the size so you can use these photos for example in a campaign let's say that your client has a campaign they are using this exact photo for print on small surfaces so let's say on a business card or on a flyer on big surfaces so let's say on a side of a building on a website so web pages and let's say for example mobile design as well maybe they're using it in the print maybe they're using it on television so you are really truly covered number one by the license and number two with the file size because the file size is huge and you can work with it really easily now when it comes the time to download it you can simply click right here to download you can create a new project and let's call it our image or a project image or whatever and you can simply click create project our image add and download and it's going to start downloading right away you can download without a license but that way you're going to get watermark all over that image like you see right here so you can use it and send it to clients that way but they will still have to purchase that image so it's really a drag you can see it's 17 megabytes in size so it's really quite huge and let me quickly cancel it so you're not bothered with it because i want to show you even more it's by this person so 74 images so we are looking at this girl so you can open the profile of this person you can also scroll down and see straight away so here it is and you can see how that looks like so straight away you can see it's from this series because lighting is the same models are the same so you can start scrolling and seeing where that image is so let's say for example you need these images from these people you can see that all of them are in this office lighting is exactly the same sizes are huge and you can also get all of these additional images to use from this same series so let's say that you have about us section on a website for example and you want to show your teammates you can use these people if you want to show your work environment you can use these people and it's going to look coherent because it's from the same set created on the same day under the same lighting by the same photographer uploaded on the same place so in this case envato elements and you can use them all on the same license so you don't need to download five images have five different licenses to send to your client and they have to credit each author of those five different images they can simply use this license they don't need to credit anybody they just have that license in case this photographer approaches to them and they can simply show them the license to say take a look my designer got this from envato elements i have the license and then they are covered so this is really the main and key difference between free and paid resources once again you can get started with free resources just make sure to understand when you're using them there are some risks involved and there are some professional levels involved like i explained but when you're using professional licenses and you are paying for those services then you really have no limitation and the choice is really quite huge as you saw right here let me show you one more thing with the icons for example so if i take you back right here and let's say i don't know start up icons for example and you can see right here it opens in different categories so let's say that i need graphics because i need these startup icons you can clearly separate them like so you can also choose whichever file format you want and you also have a bit more of these file formats supported but they are not shown right here at the moment so let's say that i really like these ones and i like how they look like so i can simply visit the person who made them it's just icon and you can clearly see how these icons look like and i can jump in right here and locate the icons and you can see in the exactly same style you have all of these different icons so you can use them in your project and your project is going to be much more coherent also you can clearly see that they are made really precisely and really professionally what you're also getting is color icons as well as the outline icons without any color so you can adjust them however you need and however you want you also get these premium looking illustrations which is one big trend i'm seeing recently especially over the last one or two years people are using this plugin in adobe xd to generate these illustrations and every single design out there is looking exactly the same because all of these designers are using exactly the same illustrations and they are going so far to be that lazy not to change the color of these illustrations and perhaps change the pose perhaps change the size composition or anything else they're just using those icons and illustrations for free so therefore using envato elements for example and services like it gives you that competitive edge because not only are you covered by these licenses your designs are going to look fresh because you have all of these examples to choose from and they are going to look much more professional because you're going to be taking them from designers who have created them inside of the collections so whether those are images like i showed you or icons like i showed you with this case your designs are going to look much more polished and much more professional if you're using premium services like and what elements for example if you don't want to get started from scratch every single time the great way to improve your workflow and to increase your speed is using ui kits and you can use ui kits which are free and really small or which are paid and really big so let me show you a quick comparison right here so here i have a chatty ui kit which is the ui kit that me and my team have created a long time ago so you have all of these elements you have all of these components you have all of this character style right here so you can get started right away so if i click right here and take some of these so for example let's use this and let's say that i want to use for example i don't know this top bar copy and paste it right here i want to use this image copy and paste it right here let's say that i want to use i don't know this button for example copy and paste it right here so you get the idea how quick this is you just need to copy and paste elements and you also can use components so if i take you back one more time for example i can go right here and we have navbar chat for example i can drag and drop it right here and i can simply position it to be right here so you can see you can start building uh these elements really quickly you can change these items you can change the colors you can change images icons and so much more so that's why ui kits are extremely useful you don't need to create these elements from scratch you can simply use them now this was my ui kit but you don't need to purchase anything that we created what you can do is simply use free ui kits which are online but once again you're running into this same issue which i mentioned previously about free and premium items your designs might end up looking exactly the same but not in every case let me show you so if you jump in right here which is adobe.com products xd futures ui kids or simply type in adobe xd ui kits online and go to adobe's website you can go right here and see you have apple design which is a apple certified design and this is really extremely useful if you're creating ios apps so i really really truly recommend that you get this google material design same story but for android aem components so you can do that microsoft uwp if you're working for microsoft platforms uh for amazon so amazon alexa if you're working with voice which is the future adobe xd also supports you have ibm design and you also have bootstraps so if you're working with bootstrap you can start there also you can scroll all the way down and you can see you have signup screen notes app hand-drawn wireframes so you have this design system presentation component state so you can jump in right here and download any of these ui kits to jumpstart your creative process so once again just think about it always start with free ones no matter what you're doing especially if your get started so just test out water see what works for you what doesn't and then later on you can purchase some of these ui kits and elements if you want to but as you saw the free choice is extremely huge and this is just on this official adobe website there are third party websites out there and designers creating all sorts of amazing stuff so i really urge you to check it out and see because ui kits can really save you a bunch of time and a bunch of energy working on any project big or small when you're creating design projects there are few things that you should consider like how big the project is how long is it going to take you but also how long can you go with the structure that you have in place meaning if the client for whatever reason decides to expand that project in the future so if you're doing a website design maybe they want to add some more pages if they are doing app design maybe they want to add more screens if they're doing dashboard design perhaps they want to add a few more sections that you didn't count before so how all of that is going to look to your design process and is your file scalable enough is your structure scalable enough to support that load of additional design requirements and design feedback so i'm going to show you a file which is from my course adobe xd master class which is at over 20 hours long master class and you can get it with a huge discount or if you're watching this course on one of the platforms you can simply go and enroll now and if you are already enrolled in the class then you are going to get this file included in the class files so here is how it looks like and i'm usually starting with the design brief we don't have a design brief here in this singular file because it's an external file and once again if you are in a course you're going to get that design brief you can then replicate that file to your own projects no matter if they are big or small you can use that project file for the design briefs for your both personal and commercial projects so once again you're going to get that file when you are enrolled in a course but here we have this file structure and as i said we are usually starting with the design brief and inside of the design brief we need to get all of this major information like who the client is who their target audience is how old they are where they live what they do how they are going to interact with our app website dashboard whatever we are doing and then we are going to ask the client all of these additional questions which are listed and explained in that design brief video so once again you can check it out in the course and check out the file as well then after you gather all of that information what we are doing is we are starting in this case with the website architecture so here we have the website architecture laying around and i'm not going to zoom all the way not to bother you but this is just the level of all the pages currently at our website how they are interacting with each other and this is just at a very basic level about how pages are interacting with each other if the user clicks on one page where is it taking them if they're clicking on another page where is it taking them can they go from page to page do they need to go to separate pages external pages and so much more once again if you enroll in the course everything is explained in that video below that we have paper wireframes and as i said many times i really like to start with paper wireframes because it's just the so easy process you all you need to do is simply use any kind of pen any kind of paper and you can simply dump your ideas that you have in your head on a piece of paper and as soon as you start doing that you start realizing are some ideas going to work perhaps some ideas might not work with this project then you're going to be able to understand that quickly because you can do that much quicker than with starting with any software including adobe xd because all you need once again is just a pen and paper then once you decide on the overall project style on the overall project structure then you can move on from paper wireframes to adobe xd and here we have paper wireframes right here i scanned them and dragged and dropped them inside of adobe xd but if you don't have a scanner you can snap a picture with your phone and then you can bring that picture in adobe xd and from then on we can move on to wireframes and you can see we have just these basic colors so we have a few shades of gray like really light gray perhaps a bit darker and then this dark gray we have a logo because in this case client sent us the logo we have some structure elements like the footer here and you can see that we just did this one line in the footer links because we still didn't realize at this point what the footer structure is going to contain therefore we just kept it very minimal but at st at the same time it still works as a footer and you still are going to be able to understand what everything is then here we have a login and sign up pages and here we have the major dashboard page which is the home page for the dashboard because when users go through all of these pages they go to login and sign up from any of these pages because we have a call to action button here at the top they can then go there and from there they can log into their dashboard and access all of this major information such as account information transactions loans cards and so on because this is a bank website case study so basically that's how wireframes are going to look and wireframes are there once again at this stage you can start sharing with your client client can start leaving you feedback they can do that in the paper wireframing stage as well but it's much more elegant and it's much more simple here because you've done it in adobe xd you can share the single link with them and then they can leave the feedback perhaps they can start to understand the structure of the website of the app of the dashboard whatever you are doing and then leave you concrete feedback on that structure or on a single page of a structure and you can easily change it because once again take a look at it it's just the wireframe they don't have any images to worry about they don't have any colors to worry about perhaps even not a icon to worry about because you can see in this case we have just used star just to indicate that this is where the icon is going to go once we start with the design we use this color for all of the images like you can see and you have to explain that to your client once you're doing this because sometimes they don't understand and they're going to ask you especially clients who didn't deal with designers before what is this where is the image and you have to explain to them and guide them through the entire structure and the entire design process okay this is just the ideation part this is just the idea this is going to represent the image this is going to represent your logo this is going to represent the icon and so on and so forth so once they are set on the structure or at least partially set then you can move on to the design itself and here we have the design and as you can see we included many different images many different colors this time we also included different transitions which i'm going to show you in just a second as you can see footer is now as a whole because we actually know the overall structure of our page where everything is going how everything is laid out so we can include that footer and once again because of the linking properties i can simply include this as a component and you can see and this as a child component and all of these are children component of this master component and any change you make right here to the footer for example client changes their mind and they don't want cards debit cards for example maybe they want to change it to something else all you need to do is simply go right here to your master component and once again you know it's a master component because of this filled in diamond while the child components are have this empty and hold out diamond so once again if they want to change for example those debit cards you can change them here and it will update automatically in real time across all of your artboards what you can also see right here is we included animations here and we also created different screens for dashboard design as well because now with the wireframes we just had one but it's just to determine that we have that overall style we know what the dashboard is going to contain and how do we know that because we asked our client a lot of these different questions which once again are listed in the design brief and when you start creating you're going to communicate with your client either to through slack through email chats whatsapp viber it doesn't really matter wherever you are taking this communication to you're going to ask them a lot of different questions and then from this single page you can then branch out to all of these different pages because now you know what's the master and required information what's the key information they're going to keep on this page and then you can branch out from there like we did in this case so you can see that we have dashboard account transaction loans and we have all of these pages because once again we asked our clients what are the main main services we included those services and simply branch out from there and once again i explained all of that in the course so you can check it out to see for yourself next what we did after the design process is finished because you can see this is the white design because it's done for the desktop devices such as these large screens and so on so we moved on to responsive website design and here we have just few examples of different grids and this is just how one of these pages looks like so this is just the home page and i showed in the course how you can go from this white layout all the way down to this small layout and adapt your layout to all of these different pages now we didn't move on to all of these other pages because then the course would take something like i don't know 100 hours or something like that so i just explained the overall structure how everything works i guided every single student through this entire process explain how all of these different elements are adapting to these different widths and heights and then we moved on to responsive website design for our dashboard screen now we also did the same thing here as we did here so we just use the dashboard home screen and it's the same thing for this page so dashboard home screen and website home screen here as well and we adapted them through all of these different sizes so basically you have five different sizes and you can know how many sizes your client is going to support by simply asking them if the client doesn't know if they don't understand that they can simply ask their developers about all of these different widths this is especially important in web design in app design as well because just imagine you are creating a design for iphone 12 for example and the client wants to support iphone 8 they also want to go down to the iphone 7 but those older phones do not have a notch on the top so therefore you have to adapt your design to fit the needs of the smaller screen also the screen density is different so therefore you have to prepare yourself by asking your clients all of these questions because it's a different thing if they have just one page in one size and that's it or if they have like we do right here so let's check it out 2 4 6 8 10 12 14 15 different pages as you can see in five different sizes and we also are doing wireframes like this and wireframes on a piece of paper and website architecture and so much more so you can just imagine that project like this is going to take you a month or two to complete depending of how active the client is and how often they respond to your feedback so you can just imagine it's going to take a lot of time to complete a project like this rather than just doing a one single page but that doesn't really matter the process speaks for itself and it stands you have to do all of these things if you want to keep track of what you're doing if you want to keep the client in loop if you want to keep them in the know so you can do all of these things or not but then once again i as i said in the beginning if they want to do more pages you didn't have any structure in place so those pages are going to look different from the original page then you have to change the original page as well and now you're in this loop once again so having a solid structure in place as soon as from the get go so as soon as you start going and start designing is going to help you massively later and is going to help your client scale and grow this project as they grow their business so after the responsive design as you can see we have project style guide and project style guide contains everything from colors to typography and different font sizes and font weights to iconography to different uh components and so much more and you can see right here how many character styles we have how many colors we have and finally how many components we have you can see there are loads of them and finally after that is completed we are then moving on to project presentation and i'm just simply explaining 3d how it works in space and you can see here how these 3d components look like so this is just a single component this is components hover state but we are managing to create it in 3d to give this sort of look after i explained the presentation we are going to move on to q a and you're going to get all of this additional information which is a part of the course and that's basically the course itself one major thing that i want to mention are these components and i want to finally show you how all of this looks like so components are extremely important because you can scale them as you move along so let me just show you one quick example if i zoom in right here to my website responsive design you can see that these are components because if i double click right here we have the hover state and we have the default state and we have the same thing for all of them you can see how our state and default state so if we move on down from there you can see that we have the same thing for here so if i double click right here you can see that we have hover state and we have default state these are large devices so once again our state and default state but because these are medium devices and tablets we only have house sorry default state because that's all we need because on the tablet you cannot hover and same thing goes for the phones you cannot hover on the phone screen so you have to think about all of these things once you start designing you have to adapt all of your pages and you can clearly see that this component is adapting nicely you can see how text is really nicely wrapping around how everything is extending to fill in the necessary space everything looks uh in order and as it should so basically that's all about components and finally let me hit preview so i will click on this flow click right here to launch my preview and i'm going to show you how all of this is going to look like if you enroll in a course and you're going to get all of these different animations so here we have the simple hover effect and you're going to see once i start scrolling we have this glass morphism effect in the background and everything stays put and stays fixed once we start scrolling then we have these hover effects with these animated icons in the background we have this as well we have hover effect for all of these different buttons you can see once you hover these arrows are moving and i can go to accounts page for example from wherever i am and here we have these so we have hover effect here and as well we have these so when you click on some of them they are changing depending of the service which the client is offering at this stage and sorry that my computer gets a little bit buggy you can see there so therefore once you start moving through all of these you're going to get all of these animations finally we have something like cards and we included some deeper animations here with the cover you can see that the heart is expanding something like a heartbeat we have this animation as well with the background shadow here added as well same for these we have this one so the card rotates we have hover effects on all of these different buttons and once you go through all of these different pages you can go to login you can click forgot password or don't have an account you can see that it animates once you log in you go to the dashboard and all of these different pages are containing different information so you can click through all of these for example you can go to your account let's say and you can switch between them here and this is why the components are so important as i keep explaining you can animate these you can get the hover effect here you have these scrollable groups like so and you can go through all of these and basically that is the design and how it's done but you can switch between them you can change different cards you can deposit funds to this card and so much more so that is the design from the course you can enroll in the course and if you're watching this on youtube massive discount is going to be linked down below so make sure to check it out and make sure to enter that coupon code to get that massive discount because this offer is limited so make sure to use it and that's basically it for this entire project i just wanted to show you how you can structure your design projects how you can create them and then that you can scale them at the bigger scale no matter how many screens you have no matter how many sizes you have once you have the good foundation in place then you can scale endlessly when you start creating design as i explained in the previous example you can do a lot of these different things in adobe xd so just want to quickly elaborate on few of these different tips and tricks and you can always watch my courses you can always check out my youtube channel with loads of these different tutorials if you want to go in depth this is just a basic course and i just want to keep it nice and short to provide you with as many information as possible so if we go and take a look at from the previous example here we have this website design i just want to quickly show you how it's done so what we have right here is this navigation and you can see what i mentioned about the component states you can have as many component states as you want you can include different hover states you can do whatever you want with them so in this example as you can see we have default state accounts loans cards invest digital so all of these different menu items and plus we have included component inside of the component which is for this button which has two states so basically this can get extremely complicated or it can be extremely easy and simple when you're just getting started make sure to keep things nice and simple not to confuse yourself but once you get some exposure once you get some understanding of all of this make sure to try and include different component states because it's going to make your life a lot easier and a lot simpler than with just a single component then you can copy and paste it everywhere else in your design now moving on you can see that it's fixed when scrolling so when i click right here to open up this preview you can see when i start scrolling that this is fixed because it's telling adobe xd make sure to stay where i put you when i start scrolling make sure to be there you can see that we don't have any hover effect here and that's on purpose because i didn't want to wow my students too much but i explained that you can include different hover effects but in this case i don't think it works that well because of this glass glass morphism effect that we have in the background i wanted to include that background effect just to keep things nice and simple and make it look a little bit cooler because that's the whole point of this project if you go to the design brief video in the course you're going to understand why because that's the target audience specific target audience for this exact project so therefore a white background is not going to do just that but if you're doing one color background like white gray dark gray black whatever whichever other color you include then you can include hover effect for every single of these menu items like we do here for the login button for example so this is just a default state this is a hover state and you can see it works no matter where you are located but with this glass morphism effect it really doesn't look all that well to have that hover effect so that's how that is completed and next thing i want to show you are scrollable groups now you can see here that we have four different flags we have four here but we have three here we have two here and that's done with scrollable groups so if i take you here to the original page you can see how that looks like so we have two four six different flags with six and different exchange rates but here on the mobile version for example we have just two so let me quickly take you to the this one so it's for the tablets let me quickly enlarge it and let's go down where they are here they are so what users can do is simply tap and scroll between all of these and then go left and right so what this is doing is you are preparing your design for different devices in different device sizes and different screen sizes and you are doing this in this case with something which is called a scroll and when you click right there you can see that this horizontal scroll is included you can also include vertical scroll and i can even show you that in this example which is for our dashboard responsive design or we can even go here if i click right here then click here to preview you can see that we have vertical scroll included here which is great because you can set this cutoff points and you don't need to extend your design all the way down you can simply use the space that you have and then you can simply include these scrollable groups in place so you can show all of this different and additional data and information rather than simply extending your design and making the user scroll through your design as a whole and finally you can do a lot more with this we don't have a map at this concrete example but what you can also do is do these animations so if i double click inside you can see that we have default state and we have hover state it's really quite simple but also there are some drop shadows included there is some circle included right here so there is a lot going on but it looks quite simple and it looks quite nice and also with this example right here for example we have the same card as down below but now how uh hover effect is a lot bigger and you can see that this background shadow gets a lot darker once you are on the hover state so you can do all of these different additional things with your components and finally let's give this a world for example so as you can see this entire section is let's check it out in the layers panel as well so we need i need a loan is as you can see a component and you can go to default state which is closed and all the icons are like this you can go to this first state it's selected other ones are not and you can see when users start clicking between all of these states they are changing depending on what they clicked or they can go to default state and all of this information down below is going to collapse right to here and then when they click right here for example it's going to expand and go all the way down so as you can see you can do many different things in adobe xd in terms of design you can make it as simple as possible or you can make it as complex as possible depending of your skill set and depending of the project in question some projects really do not require any complex animation any complex transitions any complex designs while others require you to do so so make sure when you start learning when you start growing when you start gaining some exposure and some traction in this ui ux design world make sure to try to focus on expanding your skills as much as possible make sure to learn shortcuts as much as possible because it's extremely important later down the line to know as many of these shortcuts as possible because they're going to help you massively next part of adobe xd which i want to cover is prototyping it's really important because in the past for example if you have created your designs in photoshop you have to use external resources something like envision to create prototypes so therefore you have to export all of your photoshop files or link them with envision and then create your prototypes there then you have to send envision link to your client client has to respond there you have email notification which is just too complicated for today's quick developing world so adobe xd has this great features included inside which is prototyping so you can create prototype and share or collaborate with your clients or teammates all within one app within uh without any need to change these apps without any need to pay for external resources you have all within one app and you can get started for free so let me show you in this example we have prototype here so i showed you design when you click prototype you can see that instantly all of these blue pins started to show up and these are for these flows so you can see that on this flow we don't have any connections with this flow we have a lot of these different connections with this flow we don't have any and with this flow we don't have any but when i click right here you can see that we still do and also when i click on this artboard you can see that we still do and it's still connected with some of these main screens so what all of this means in translation to english basically is you can connect all of your artboards between each other you can connect them with one single size like i showed you for the website size but you can also connect them with the responsive size and you can show to your clients directly how all of that is going to look like so when you start sharing and we are going to get to the sharing in the next part then you can share either one flow which is just for example website design for desktops or you can simply share all flows which is all website designs in all sizes so if i show you how these prototypes look like let me go to website design you can see how many interactions we have right here so if i zoom in really nice and close and click on this artboard and you can see it's home page design this is account design loans design and so on and so forth every single one of these and once again you can go in the course you can take a look at because it's over 20 hours long and once again this is just a basic course to explain all of the basics of adobe xd if you enroll in the course we are going to go through all of these different pages and i'm going to explain in course every single one of these interactions why it's connected like this why it's completed like this and what you should done better for your own personal projects so what you see right here with these blue lines is basically you can click from one part of your artboard drag this blue line to another once you are in a prototyping mode then here in the interaction panel which shows up and already explained to you that this panel on the right keeps changing whatever you are selecting so in the design mode it looks different in a prototype mode it looks different and in the share mode is going to look different once again and i'm going to show you that next so here what we have is interaction so first we have trigger so what the users are doing in our case they need to tap in order to go to this page but you can also choose drag hover keys and gamepad and voice so let me quickly elaborate on some of these because they can get extremely complex over time so once again tap you can use it for desktops or you can use them for mobile so tap can basically means the tab of a mouse or the tab of a finger so no matter which device you use you can use the tab drag is basically the one i showed you before in previous video with these flags for example so when they are on a mobile device they can click to drag left or right or they can even do that on website design if you need to cut somewhere so they can drag from left to right for example hover is what we explained multiple times so for example with these buttons you can include different hover effects keys and gamepads is basically if you are creating some experience for a game you can include something like a playstation controller or xbox controller and then you can program what every single key does and then once you start sharing that prototype with your client if they have the same controller they can basically sort of play this game with you inside of adobe xd which is extremely cool and finally we have the voice so you can do something like google assistant amazon alexa or siri you can integrate all of these different controllers if you are designing for voice next up we have action so what happens when user taps which action is going to take we can go transition we can do auto animate overlay scroll through previous artboard audio playback or speech playback transition is basically it transitions from one page to another auto animate is this magical feature of adobe xd which uses ai to learn what you need to do and you can watch my courses or my youtube videos because i use auto animate all the time i really love it and basically it knows what you need to do between two states and animates flawlessly so you don't have to create something like keyframes in adobe after effects for example or something like that we have overlay which is great if you are designing for mobile so you have this menu on the side for example and you need to tap the menu icon and then this menu overlay pops up so that's why that's useful for but you can also use it for menu items in website design if you need that overlay function in place we have scroll to so you can create anchor links for example if this is just a singular page and all of these are different sections then users can scroll through all of these different designs and then for example when they click on this page it's going to scroll to here when they click on this menu item it's going to scroll through here and so much more previous artboard speaks for itself audio playback is if you need for example to create a narrow state when they tap there it's going to play that audio and speech playback is great once again for voice if you're designing for these assistants brazil scroll position basically does what it says on the tin if you click there and for example it goes to here it's going to preserve the scroll position in this case it's going to be on the top but if you're doing that here for example it's going to be at the same position when they go there destination so you can choose whichever one of these artboards you want animation you have bunch of these different animations in place and finally we have easing so how animation is going to look like is it going to go in harsh is it going to go in soft is it going to go out harsh or soft is it going to bounce is it going to snap into position so you can choose between all of these and if you click here you can go from none ease out easy in easing out snap wind up and bounce you have all of these different options and finally we have duration so duration how long this action is going to take so in our case when they tap it's going to transition to accounts design using the dissolve animation with easing out easing and it's going to last for 0.4 seconds now you can add additional actions here so additional animation but i'm not going to bother you at this stage so basically how all of this looks like in place i'm going to click here i'm going to click on the preview i'm going to click on the accounts and it's going to transition to that particular page once they click logo for example it's going to take them to the home page and you can see once they click accounts this is going to pop up but once you click loan it's going to transition there and narrow in size so you can do all of these things and much much more in adobe xd with these prototyping features without any need to go to external tools like envision for example in the past or you don't need to pay for additional services you have all of that included in adobe xd to get started right away another amazing tool that adobe xd has is sharing so as i said you can design prototype and share all within one app and it's located right here at the top so once you've done designing once you've done prototyping and connecting all of your artboards all of your different states all over different screens then it's time to share with your clients and it's important to note you can share at any point of your design process so for example if you are in wireframing stage you can share from there to get feedback and then move on to that feedback and create design uh update that prototype update that link and share it with the client once again they can then provide you with the feedback on website design responsive design and so much more even on style guides and project presentation so at any point of the project uh stage they can provide you with the feedback so how can you actually share it well as i said at the beginning i'm using a free version just to illustrate that you can do this no matter where you are in the world you can get started for free with this so basically with the free version you only have one link sharing option so if you're working on a multiple projects at the same time you will have to pay for adobe xd but on their website it says it's just nine bucks a month or if you have adobe premium package if you have a creative cloud paid for then you have adobe xd included in that creative cloud subscription as well so when you want to share you can simply select what you want to share in our case we want to share this website design you can also share the dashboard design but i want to share this and you can choose different settings so for design review get feedback on your design or prototype that feedback can be provided either by the teammates your clients stakeholders even developers development you can share your design or prototype with developers and what this does is it provides snippets of code for your developers so they can easily see for example inside of the css which colors have you used which spacing have you used which margins have you used so for example with typography which sizes have you used so they can start integrating that right away and if you're using web-based fonts for example these google phones which we're using in this course then they can easily integrate the link to those fonts and then start with the code right away then we have presentation optimized for presenting your designs which is great if you for example go to your client's office and you want to present this on a big screen then it goes into full screen mode without any distractions and you can present it solo sort of like a powerpoint presentation for example then we have user testing which is ideal for testing your prototype and you can hide in this user testing mode for example you can hide all of these different elements like navigation so you are not allowing uh to your users to see where they need to click they have to figure that out for themselves so they can then provide you with the feedback and you can know where you need to move on forward and finally you have custom and you can create customized experience from all of these combined link access so anyone with a link only invited people you can invite them via email and anyone with the password so you can possibly protect your links finally all you need to do is click create link and before i do that you can simply rename this to let's go with new bank website design to match a little bit what we have right here hit create link and depending of your internet speed depending of how big your prototype is depending on how much stuff adobe xd has to upload to the cloud this can take longer or shorter so whatever you are creating just make sure to keep that in mind if you are in a tight schedule if you are on a tight budget make sure to project this into that because sometimes it can take a lot of time for it to upload and then sometimes it can take a lot of time for your clients to open them up if they have slow internet connection as well once the sharing is completed you're going to get a link like this and what you can do is copy that link you can embed that link in a behance presentation for example you can put it in your own website and once again you can access the permissions here and anyone with the link you can change that you can give them access or not and basically once you copy and paste this link in your browser or send it to your client this is how the overall experience is going to look like depending on what you have selected here in adobe xd so is it for design review is it for prototyping is it for developers and so much more so once again what they can do here is they can scroll like it's a real page they can click on any of these links you can see hover effects still work they can make a comment they can drag a pin for example right here and they can say for example delete this circle and once they submit you can see that delete this circle is on this page so home page design and you can navigate your way to home homepage design you can also click right here and it's going to show you all of your different pages from this flow that you've shared because once again we only shared this flow we didn't share any of these other flows so that's why it's just showing this and basically you can go to your work and continue where you left off and you can click there to access the prototype once again so basically this is how all of this works and what you can also do is navigate between these different pages to show to your clients how the pages are going to look like what you can do is show or hide comments you can go to the home page which is this page in this case as i said they can click through different pages so let's go to the loans for example they can go there and you can see that there is a comment on homepage design they can click there and access it and you can see it's labeled number one if we make another comment it will be labeled number two and so much more what they can also do is go back to here you can mention any other user or teammate you can invite people to here you can expand this to be full screen you can hide comments and so much more basically when you start with the developer sharing as i said you're going to get some code snippets you're going to get some css you're going to get some component states you're going to get all of that additional information which is not relevant to your client except if they are not coding themselves or if they don't understand code so they just want to quickly check few things here and there but basically you can share that with the developers as for the user testing you can basically test this out in a full screen without all of this because as you can see if i click somewhere outside it shows where they can click so if they click here it's going to take them to this digital page but in the user testing method it's not going to show them there users have to figure that out for themselves and you have to decide through testing if it's easy for them to access all those pages or not and what you should change at what you should keep finally last and crucial part of this design process is sharing your files after they are completed after design is completed prototyping after everything is finished you need to share those files with your clients and developers and that's what comes next finally last piece of the design project puzzle is sharing your design with clients and developers so once everything is completed you have to export it and you have to package it in a way to be easy to understand for both your clients and your developers so in our case what we have right here is we have a large desktop we have responsive design so just imagine that we created this for all of these other pages so now comes the time to export and to share it with our clients and developers so before we do that i always recommend to people and to my students to create some sort of folder structure and organizational pattern to be able to share this with your clients and developers so they can easily understand it as soon as they get it so they can start working and not bug you down with some questions and additional feedback so what i like doing is i like creating a folder structure inside of that folder structure i like to have my main file which is adobe xd file i also like to create a folder like this which is called assets or all assets or whatever you want and you can include icons you can include images you can include pdf files and you can also do that by simply putting them inside of a folder so images for example and let's copy and paste and let's call this for example icons and inside of those for example if you are using both svg and png icons you can include them if you are using uh png and jpeg images you can include them if you are using for example different pdfs you can then separate them so no matter how big your project gets and how large the amount of files is going to get you can simply divide them into folders and it's going to be much simpler for your clients and developers to navigate that folder structure than just to send them everything in one zip file so they have to fade it out for themselves as for the sizes themselves you can see that we have all of these different pages located right here and for each of these folders i have created once again a folder structure so large desktops desktop large devices medium devices and small devices this is just my case in the case for this particular project so if i take you back to adobe xd file you can see how that looks like but your project might end up looking different just ask your developers which device types and which sizes they're going to support therefore you're going to be able to understand better how can you structure your folder structure when you start sharing these files with your clients and developers so once again with the folder structure depending on which sizes you're going to create you're going to have a larger number or smaller number of these folders and same thing for the assets so perhaps you're using just one icon maybe 10 you can put them here or if you're using large number of icons like we are doing right here so if i take you to my document assets and scroll down you can see how many different icons we are using so therefore we have to export all of these different assets and in asset sizes so just make sure to ask your developers up front do they need to have these icons in different sizes or can you just send them one svg icon for example and then they can fit them inside of all of these sizes so really just speak with your developers speak with your clients about what they need before you start sending them therefore you're going to reduce your workload a lot so when it comes time to actually exporting all these different things so what we have here is for example large desktops and i want to export this image i know it's a png image so what i can do is simply select it i can hit control or command e on my keyboard and i can export it as a png because it doesn't have any background elements right here it's just a png image if it was just a flat image like this this this and this for example then i will choose this to be jpeg if you're dealing with icons it's always recommended if they are svg to export them as spg if they are png to export it as png but one quick tip make sure to use svg icons as much as possible because they are infinitely scalable and they will not lose quality once they are reduced in size so what we have finally here is pdf and what i can show you for the pdf for example you want to export this project style guide what you can do is simply hit ctrl e choose pdf from here and then you can simply export it as a pdf or pdf can have multiple pdf files or pages so your clients or developers can simply scroll through all of these different pages to see where they are but let's quickly go back to here so once again you can once you select your item you can hit ctrl e as we said this is a png you can choose for design it's going to export at 1x if you design this for web which we did it can export it as 1x and 2x but once again make sure to speak with your developers do they need that extra size because we have responsive design in place and just make sure to ask them what do they need exported because that's going to save you a lot of time because in some cases you just need to export the image once and then they are going to adapt it through code but sometimes you have to export that image or that icon maybe illustration for all of these different sizes because they cannot adapt it in code really nicely and you have to do that in design so once again communication is key right here and it's crucial for both you your clients and developers to have a good time on this project so what we have right here is ios so you can select 1 2 and 3x 1x is the original size 2x is double the size and this is triple the size and finally where you want to export this to so if i take you back to here for example we have the home page and we have large desktops so this is going to be our navigational pattern so no matter what you're choosing right here it's going to take you there to that place finally we have android and it's going to export with all of these different sizes and that's just android and how it's organized for svgs you can have all of these different uh attributes and you can choose do we want to use internal css or they can use external optimize minified so it's going to reduce the file size even more pdf as explained and finally what we have right here is jpeg so is it design or is it web once again if you choose web it's going to export at 1x and 2x and finally this is where you want to export your files to that's basically it for exporting as you can see it can be quite simple what you can do and let me quickly show you that as well is you can select multiple of these so for example we have these flags i can go to my layers panel and see where they are so what you can do is simply open up all of these you can hold your alt key or option on mac you can scroll down select all of them and once you do hit ctrl e i know these are going to be png i can use them for design because i don't need them to be at 1x 2x and 3x and i can simply hit export once i have selected my designated folder as to where i want them to be exported simply hit export and it's going to export in all of these different sizes and these different file formats which you have selected and every single one of them is going to be named like you name them right here so once again naming your layers is crucial right here because as you can see it's going to catch up to you sooner or later so here you are sending these files to developers you need to name your files so developers can be able to understand what those files are so they can actually use them in code no matter if you're creating website design dashboard design app design doesn't matter you always have to name your layers so why not start sooner than later and stop wasting your time here after you've done with the project and you just want this to be over with so that's basically it that's how you export files in adobe xd and those are the different formats which are supported by native adobe xd exporter option design systems are great way to organize large projects because as soon as you start scaling your project as soon as you start adding new pages new responsive sizes perhaps even a mobile app everything has to look cohesive everything has to look coherent and everything has to look as it belongs to the same project which believe it or not it can be extremely difficult when you start scaling that's why small and bigger companies especially big companies have all of these design systems in place so what is a design system is it just for design or is it so much more let's check it out so here i have opened carbon design system and you can actually go ahead and download this from their website so what carbon design system is it's for the ibm's open source design system for their products and digital experiences so you can see it cannot be just for products it can also be for digital experience it can be for analog experiences so design system can encompass all of these additional groups and features so what we have right here you can read all about carbon but when it comes to designing you have design kits you have other resources tutorials when it comes to developing you can get started framework and so much more what's interesting here is guidelines so if i click right here you can see they they have this custom grid created for themselves they have accessibility rules they have content rules caller rules icon rules pictograms motion spacing themes typography and so much more so you can do all of these different things providing that you can create this project so i don't know why it's taking so long to open so let's open it up in this tab but while it loads let me quickly show you this so this is audi's design system so you can see if i start scrolling that all of these experiences look exactly the same no matter on which devices you are whether you are on this big device like imac or on a laptop mobile phone watch it doesn't matter it looks exactly the same but what's more important because audi is a car company it looks exactly the same in the car as well so users have exactly the same experience no matter if they're using audi app for example if they've visited their website or if they are sitting in the actual audi product which is the car they are using infotainment system for example they're using navigation everything looks exactly the same and coherent and like it belongs to this entire experience so if i take you here right we have responsive ui we have form tool components so if i click right here we have buttons for example and you can see how their buttons look like so they have small medium large you can see how that looks like we have secondary you can click it you have all of these different animations so you can see how that looks like text button with this arrow you can see this hover effect working you see all of these different icons so let's see a card and a card can be something really basic like this or something like this so you can see this pop-up effect on hover you can see this larger card so action you can click on them you can see how they look like you can go to drag and drop which is also important for example for their ui in a car maybe you want to drag and drop a song right there you can see how that looks like input field which is also important when you click right there you can see this text is going on top search how it looks like multiple text inputs and so much more if we go to the player for example you can see how their player looks like how this looks like icons reverse and so much more if we go to responsive ui you can see their grid set up and this is why this is important you can set these grids to follow up this entire project because for example if you are creating this project let's say in 2021 and then client decides in five years time to go back to you and then allow you to continue and add all of these additional pages additional screens you're stuck because either you put this design process in place and maybe even create this design system on a smaller scale then you can simply pick up where you left off and continue from there if they want suddenly to change the colors to change the styles you can easily do that because everything is in place you have this design system in place you have all of these components in place you have the style guide in place so once again if you want to learn everything about this project make sure to check out my course it's over 20 hours long and i cover all of these things in a lot more detail than i can in this free course but basically what you can is easily scale that so no matter if you go back to that project in one year or five years time you can simply continue where you left off pick it up and simply continue designing if they want to change you can easily change the colors the styles the fonts the colors the logo whatever you want even the images with just a few clicks rather than just starting all over the place once again so if we take a look at here you can see how these cards are scaling for example you can see these grid lines like i explained to you so you can see you can use adobe xd for this you can see how they scale down which is which are good practices which are bad practices and why you can see all of this content spacing lines rhythm vertical rhythm horizontal rhythm so everything stays the same spacing how all of these columns and content look like so everything looks as it should and finally once this loads on the carbon design system and i really encourage you to check this out if i click on a 2x grid you can see how that looks like and how it scales so if i lower this down click play you can see there are two x grid which is once again the grid they have developed for themselves you don't need to use this grid in your projects it works in their project but perhaps for your project you will have to create something else it's basically an eight point grid and you can easily create that in adobe xd and already show you that in the previous section of this course so basically you can see how it scales up and down we can move on to typography you can see the scale style color resources you can see their typeface and what it is how it looks like in code you also have these font families and how it looks like developers can then easily pick this from here and simply move on if we go to icons for example you can see which icons they are using and the overall style of these icons and you can simply copy the name of this icon for example and then they can use it in code later you can see how they looks like and they are divided obviously into categories so alphanumeric commerce and this is relevant to you if you're using something like google's material design icons because you can give them names or use names google is already using if you're using something else like premium for example from envato elements or whichever other place it's really important to give these uh icons real names so that developers can easily use them later so you can see it's called building right here but here is called building32 so this is the actual name they are going to use in code and they can simply download svg from here which once again is a good practice so i really encourage you to explore these design systems because there are a lot of them shopify for shopify has one adobe has one microsoft has one apple has one so just make sure to check them out and to understand what these big companies are doing so you can do that for yourself not on this large scale obviously especially if you're working alone because it will take you years to create all of this stuff but some main and key important factors such as color typography iconography spacing rhythm grids and so much more you can create for your clients and your smaller projects so make sure to check that out if you're watching this on youtube i will leave the link down in the description to some of these design system which i think they are cool and which i think you can pick up some more information from great way to organize your projects and make it easy for you your teammates your clients and finally developers is to use something which is called design tokens so rather than simply naming your color red for example you can tell to your developers what that red is designed to do so if i show you in my example right here we have danger red which is something like when they when users have made an error then it's going to show this red color to them in a form for example in a field in a button but danger red is basically this color token which developers can then use to integrate in code and if i copy this hex code instead of naming it like this or simply red they can simply name it danger red which is obviously useful if you have multiple versions of this color developers need to understand and need to know in which instance you are using which color so therefore giving it this design tokens is really useful because as i showed you in the previous example with design systems it's extremely important especially with icons when you have multiple versions of the same icon so you can remember from the previous section of the course when i talked to you about design systems you can see that ibm has building number 32 because they have 32 different building icons that they are using in their design system so you can do exactly the same you can name your layers like that and you can then help developers easily understand and develop quickly by giving names to your design tokens so once again you can see instead of white we have plain white because for example at some point maybe we want to include dark white maybe we want to include i don't know overlay white or whatever we have dark gray light gray main green secondary green which is also important because this main green is the main color of our project our brand our website and the secondary green is the color of our hover effect for example maybe you can name it hover green maybe you can name it dark gray green on hover maybe you can do something like that but once again it's always best to speak with developers about this and simply ask them how would you prefer your colors to be named and all these tokens to be named so they can easily understand them later in code you can also do that with character styles so here i have poppins 16 but in some cases maybe i want to name this h1 pop-in 16 maybe i just want to name it h1 maybe main h1 this is h2 this is h3 h4 h5 so for example header maybe paragraph text so you can call it paragraph size maybe you if you have some different text on some different places like for example in dashboard screens maybe you have different text sizes there perhaps you can even include it something like promo text maybe you want to include it in the banner so just think about all of these different things as you're designing so therefore you can include them as design tokens and finally for the icons and components you can see we have mobile top nav main top nav main menu icon and we have secondary menu icon and so much more but here is the main difference between these two when you're naming components mobile top nav is important because it goes on mobile while main top nav goes right here on a website design which is instantly easy to understand for developers because they can understand okay so this is for mobile this is for the web and they can get going really quickly so those are the design tokens and i really encourage you to once again name your layers speak with your developers and your clients how do they want you to name your layers so they can easily understand and pull this inside the code so it can reduce you the workload later once you actually finish the project style guides are extremely useful because they can help your clients and especially developers understand which assets have you been using in your designs and they can follow the older style they can follow the color they can copy and paste colors from your style guide so if i take you back to our example here that we're using we have a project style guide right here so if i zoom in real close you can see that we have all of these different colors so they can see plain white which once again if i take you right here here it is light gray so they can quickly glance and see which hex code you were using so they can copy this hex code paste it directly in the code wire it all together in code and they are going to have these colors integrated the other option is because adobe xd is free and always recommend this to the developers which i'm working with over the years is simply to install xd open this file up and simply copy and paste this directly into code if they want because like this they can simply scroll through and understand where have these colors been used same thing for the typography so you can see different colors for different sizes different spacings different line heights different everything is different here so developers can easily understand okay this is that i can use that here i can use that there this is used for that also one thing to note if you're sharing for developers it's going to be much easier for them to give them that link because they can easily copy and paste these styles directly from that shared link into the code but once again this project style guide is really useful to keep things looking nice at a glance iconography so once again they can glance at to which icons have you been using and in this case we have this card so if you have used 50 different cards you can put the text below and call this for example website design card page scroll 3 or whatever so they can know where you have been using this concrete element in your design so that's where style guides come in handy clients can also see these style guides and this is really simplified version you can create as complex the style guide as you want you can include different images in your style guide you can create different mood boards for inspiration you can include them in the style guide you can elaborate more on the paragraphs for example so you can create bigger paragraphs smaller paragraphs you can show how the paragraph looks left align center line right line so you can put as much information in this style guide as you want or some projects don't require style guide at all so once again you have to speak with your clients and developers do they actually need this style guide because if they don't this is just a design exercise for yourself or if you just have too much spare time on your hand you can create this but once again style guide requires a lot of time and a lot of effort and thought put into it so if you don't have to create style guide by all means don't create it but ask your clients and developers do you actually need to create them because when you start sharing you can share for clients and share for developers and both of them can get the picture there instead of you additionally creating this style guide but once again it's important part of the design process itself finally the last part of the design process are presentations you have to have good presentational skills either in person over the zoom call skype call or in the presentation itself so you have to explain what the problem is how do you access this problem how do you go about it how do you go about finding the solution and then how did you solve that problem you have to show everything inside of your presentation and this is usually called case study and each project is the case study for itself but how do you know what you need to present it's really easy simply go to google before you go to google make sure to understand is this project presentation before you start working or after you start working and you have to use it for your portfolio because before you start working you have to explain to your potential client because they are not your client as of yet but you're pitching to them you have to explain what your capabilities are as a designer so you have to sell yourself to them basically to work for them on their project so you have to explain your problem solving skills and how are you able to help them on this particular project if however on the other side you have finished this project and you just want to show off your design skills and your entire process while designing this website then you have to go about it the other way so in the first method make sure to use something like a powerpoint presentation you want to show as many problems that you can solve as possible in that particular niche so the client can understand you easily if i give you an example if you're approaching because we used audi in the previous example let's say that you go to your local audi dealership and you want to redesign their website but what you have done previously is redesigned a bunch of these gaming websites it's not relevant to audi they're not going to hire you no matter how good designer you are because you don't understand the problems that they are facing inside of that industry so make sure when you're pitching make sure to pitch the right pitch to the right client who is going to understand the problems and is going to understand the solutions which you are offering therefore it's going to be a better fit for you and it's going to be a greater project overall on the other side when you finish the project and you want to show it off either in your portfolio in your behance page or even to your future clients which is also important you want to show them how you solved the problems in your previous projects in the same niche they are in and there you have a winning combination so let me quickly go to b hands and i will show you some good examples which i quickly found but you can also explore and find different examples which works best for you so what we have here is this mobile project they call it colored and here you can see what it is you have this nice background animation it's a live saving procedure digitized so you can see what the app does our vision so what is our vision the problems you can see what the app can do straight away one click can save someone's life so that's the solution what we did our approach so branding ux design ui design and for each of these what they did user flow so once again where they found their users how the user travels to this app so user journey basically knowledge base so what they have incorporated bought and chatbot what they have created so you can see all these different um additional information that they are using inside of the app you can see some call out points here fast flow virtual presence so basically they are going even further as smartwatch flow through the app and basically that's how it looks like so you can see this is really complex example of the project presentation it's done extremely well so you can divide your additional time to the presentations because good presentation is half of the sale make sure to know that make sure to remember that because if you have good presentation which communicates really well and it looks really nicely you're already halfway there to landing that project or even that future project one more example i want to show you is this visa website redesign you can see it's from ekaterina mikhailova and basically she went about it the other way around this is the website design rather than this app design so you can do this for anything that you are designing basically and what she is doing here is showing that this page looks like this on mobile straight away she took she takes the branding she spreads out this even more she has these nice animations between the cards she's showing how the scrolling looks like on the page perhaps even some hover effects and so much more this page how it looks like on web on mobile here we have the grid so you can see that she is separating uh real pages and all of these additional details like a font and the sizes between all of this while these guys uh separated everything in sections so it's really all up to you how you want to structure your presentations uh to your clients and basically uh say what you can do for them in a particular case so that's it for the presentations i really encourage you to check it out go to behance see in your industry in your niche how the presentations look like make sure to remember the audi example but you can apply that to any example and in each any industry you are in make sure to communicate right ideas write problems and write solutions with the right clients and then you're going to be on a winning streak so you might be just starting in this business and you might be just wondering what is the future of these design tools should i devote my time to adobe xd should i even go for figma for sketch maybe photoshop or illustrator what should i look for in these tools and where should i devote my time to so i can say to you from my years and years of experience almost two decades in this business that there is really no right answer all of these tools are evolving over time i really like adobe xd because it's part of the adobe family and i really know that if i have my premium subscription to adobe package that is going to be supported and i can use it in conjunction with for example photoshop illustrator if i have to fix some of my images let's say maybe i can use lightroom so i have all of that in the creative cloud subscription so i really like adobe xd for that matter also versatility because as i said in this course you can go from design prototyping and sharing there are collaboration features and the most crucial thing of all is updates are coming each and every month and big updates are coming once or twice maybe even three times a year depending of the backlog of the team and what they have created so far so just make sure to understand when you're choosing these design tools make sure to choose the one which is right for you perhaps you really like to use sketch but sketch is not supported on windows so if you're a windows user then that is not an option perhaps you like to use figma then you can go ahead and use figma in the cloud but if your internet connection is way too slow then that experience is not going to be great with some other experience who has for example somata designer who has better internet connection speeds if you on the other hand like adobe xd like me and you like to use some of the other adobe products then really go ahead and there is not right or wrong option here i can tell you from experience we live in a great times to be a ui and ux designer because we have all of these tools at our disposal only thing we have to do is simply work you can work on yourself you can work on improving yourself and one key thing to pick up from this course and from this part of the course especially is when you know how to use some of these tools like in this case adobe xd it will be much easier for you to understand these other tools like figma or sketch or even photoshop because all of these tools are basically the same it's just up to you and what fits you the best if you want free versions then xd and figma are great option if you're on a mac and you really like sketch or your team is forcing you to use sketch or will you really want to use sketch then you have to pay for the sketch so just make sure to see what's best for you in my case i as i said i really like adobe xd because it's light it provides me with these great options and if you want for example to do some more advanced animations and to show that to your clients or developers you can then pick that adobe xd file go straight to into premiere for example or even after effects and in after effects you can add all of these amazing details and all of these amazing animations you don't even have to because there are so many plugins inside of adobe xd and you can go with plugins for for example user testing there is something called anima as of recently you can directly export code out of adobe xd you can work on so many different options and so many different levels just inside adobe xd without ever switching any of these tools because i remember back when i started we used to create websites in photoshop and illustrator then we have to use tools like envision but it was way later so before envision we have to explain to our clients who are not web designers who are not developers what the design is going to end up looking like once it's developed so it's really difficult to communicate idea like that with your client especially if they don't know and don't understand what you're talking about but with tools like adobe xd and all of these tools extensions plugins and resources that we have now at our disposal it's much easier for clients to understand because as you saw in this course it's much easier for them to provide feedback and to guide you through this project so you can get with the project more quickly it's much easier to communicate with the developer because in the past that was the hustle as well you have to install different plugins to photoshop and it was really a mess but right here you have integrated solutions for exporting your files so it's much more easier to work with developers with clients with stakeholders with your teammates at a glance all within one app and you can get started for free thank you for watching this free course here on the channel if you liked it make sure to subscribe i upload new videos every single week on design passive income techniques motivation and more so make sure to check that out also make sure to check the resources i talked about in this course down in the description below make sure to click on those if you want to check them out further also if you want you can enroll in the course i mentioned the files in this course you can enroll at a massive discount link is going to be down in the description below all you need to do is visit that link click on the buy now button then you can enter the coupon code and get that massive discount so if you want to do that make sure to hurry up because this is the limited time only and this is the limited offer so make sure to use it if you want to advance and get that 20 plus hour long master class for that way cheaper price so that's it for this course i wish you all the luck in your future ui ux endeavors you picked a right field you picked a great field and you picked the field which is expanding way more quickly than other fields of design it is really exciting to work with these big brands but especially with smaller brands because you can help shape the future of that brand through your design and you can guide their users through your design so once again thank you for watching and until next time take care uh

Channel: Alex On Design

Views: 17,027

Rating: 4.9673471 out of 5

Keywords: adobe xd, adobe xd tutorial, ui design, ux design, user interface design, user experience design, ux designer, free ui course, free ux course, adobe xd tutorial for beginners, adobe xd 2021, adobe xd free course, ui/ux design free course, alex on design, adobe xd animation, adobe xd web design tutorial, adobe xd web design, adobe xd plugins, adobe xd components, Adobe Xd 2021 Basics - Free UI / UX Design Course, adobe xd 2021 tutorial, ui vs ux design, adobe xd prototype

Id: 3csABJDMgWQ

Length: 187min 45sec (11265 seconds)

Published: Mon Feb 08 2021