Adobe XD Design Blog 2

 

Adobe XD Design Blog 2

In this article i'm going to share with you the top 10 things you need to know to get started in adobe xd right now. let's jump in and start with the first thing you need to know in adobe xd , that is artboards we have an artboard on our canvas right now and it's sized at 1920x1080 and so you can see all the dimensions of our artboard right there we can also change the resolution or the perspective of our artboard simply by toggling landscape or portrait. we can turn on responsive resize which is a little bit of an advanced feature we can change the scrolling pattern. we can also fill it with a different color if we want and we can turn on a layout either layout or a square grid so that we can line things up that's our artboard, if we want to create new artboards we're going to press either a on our keyboard or we're going to use the artboard tool on the left hand tool panel we choose either one of those either the artboard tool or by selecting a we get the ability to either draw custom size artboards or select pre-made device sizes from the right hand panel like an iphone pro or maybe an ipad maybe we want another desktop, website size or maybe a watch size for our interface next up we have masks and fills and images you can see on my artboard. i have a little shopping cart design and there's currently some squares that represent the images that will soon go in there. but they are represented by these wire-framed gray boxes, i can change the fill of any shape element whether it is a box here or a button that i've created out of a rounded rectangle and i can change the fill by selecting the fill right here in the fill panel right now.

I have this nice blue but i could change it to something else if i wanted to i'm going to undo that change. because i like that i can also add borders to things by clicking on the border options and we get size dash and gap options as well as getting outline stroke round caps and also round joint options you can turn off your border and turn on something like shadows manipulate the different elements of the shadow and you can even play with background blur or object blur we not only can fill elements with colors but we can also fill them with linear gradients or radial gradients as well simply by selecting one of those options we get the multiple gradient slider and we can choose the colors that go in there we can also fill objects with images and we can do that by finding an image we have on our computer and simply dragging it and hovering it over our shape and dropping it inside what that's done is added the image and it's actually masked the image for us and so we can actually double click on the shape and we can play with this object and actually mask it inside moving it around.

We can also add images loosely onto our canvas or onto our artboard simply by dragging them inside and if you'd like to do it this way you can grab both elements the square and our board game let's make sure that our board game is somewhere near our square inside we can grab both of them and we can say mask with the shape once we do that we're getting the same controls a masked image inside of a shape that we can control the bounding box and the image itself really really easily let's talk next about components components allow us to create reusable design elements that we can change once and have those changes be reflected across one ten or a hundred art boards at the same time so as our projects get bigger we don't have to change the color of a button on 100 art boards but instead we can do it in one place case in point we have our button down here and we like our button it's the right color size and text inside that we want to use across our entire project.

So we're going to press command or control k depending on your operating system to turn it into a component you'll see that our component has become our master component and you'll tell that because of the little diamond on the top left-hand edge it's green and it's filled if we wanted another instance or version of this component somewhere we could hold down option and drag it out or we could flip over to our assets panel that we'll talk about more here in a second and drag another instance out these are instances if i make changes here they will override the styles in the master component you can tell this is an instance because it has this white diamond in the top left-hand edge of the component versus the master which has a filled green diamond in the top left-hand edge. if i make changes to the master for instance i can change the color to be something like a pink it's going to change everywhere across my entire design.

 If we don't know where our master component is because we're somewhere else in our design we can right click and say edit the main component and it will take us back to the master and lastly we can override certain styles in our components. by selecting an instance of the component and then changing something from the design this will not override the master it will make just a slight change in that instance in that instance alone so we can change something like the typography from a semi bold to a bold and that's not going to change anything anywhere but if we were to change the size of the text from 23 to 33 that's going to change everywhere across the board in all of our project the next thing we're going to talk about is not just components but component states. component states are a way for you to create one component that has multiple variations or states all locked within that single component instead of having one button that is filled and another component that is an outlined version.

We can come up with multiple versions of the same button so we have our button here and it is a component and we want to have multiple states here you can see once i create a component by pressing the plus button or pressing command k we're now told that this is the main component and it currently has a default state the default state is this aesthetic and all these details that we're looking at right now the blue. it's filled in that's the current state but we might want to create another state a new state and this state might want to be an outlined version of our button. so with that selected we might want to grab the shape and turn on a border selecting that same blue color and we might want to then turn off our fill and increase the border size it's an internal or inside border like just like that and i think that works out fine for us so now we have one button one component that has a filled state and it has an outline state we can also create hover states if we'd like to and they have baked in prototyping built right into them so we can choose a hover state what do we want to do with our hover state well maybe we could simply take our fill and darken it and move our words over to one side for some reason okay and we can go back to our default state and we press play on our prototype you can see when we hover over.

It already has interaction it already has that prototype baked right into it for us and so we can create one button with multiple states and then when we pull out a new version or a new instance of our button. we can choose which state we want selected or displayed in our project so that's pretty cool now that we have all of our components and our component states we might want to take a look at that asset panel that we've looked at briefly instead of being over here on our layers panel we're going to open up the asset panel and you can see that i have a few of the assets. i've already created for instance my button that has all those great states inside of it but we also have an extra close and each one of these different line items that has a game inside of it that's a component as well what other types of assets can we have inside of our asset panel well maybe we keep using this blue over and over and maybe that would be a good color to keep in our color palettes or our asset panel so we simply select the button and we can click plus on the colors and that's going to add that exact shade of blue right over into that panel we could probably do the same for our gray that we're using and maybe our off black that would be a good one to use as well now that we have colors added to our assets panel. why don't we add some typography as well so we stay consistent through our project.

 

 I can grab a piece of typography and come to character styles and press plus it's going to give me the details of that text right there i can grab multiple at the same time if i want to and add all of them in at one time and you can see every single piece of text that we select is gonna get added to our character styles that we can use over and over for instance later on down the line if i'm doing a new version of this and i've played with my title and i think maybe i made it a little too big i can bring it right back into line with what it should have been by simply selecting the character style up top and there it is identical keeping that consistency through the project we can also select elements on our screen and we can select the colors to change them which is pretty cool we also have the ability to change these color assets and whenever we do by right clicking and editing them. we change it any component that's using this color you can see is going to change as well so everything's kind of cascading down using the colors as kind of a master element the next thing you gotta know about inside of adobe xd are repeat grids it's a way for you to create multiple elements in a grid structure and be able to edit them on the fly without having to be tedious and edit every single one you can see, i have a new version of my artboard on my screen and by selecting that element and pressing command or control r.

 I'm going to take this item and immediately expose some vertical and horizontal drag bars i'm going to drag down and we get multiples of the same item this is really cool but why is it so cool because if i change something in one place it's going to change everywhere for instance if i think maybe the title and the actual vin number or sku number of my product is too close. i can move it to the right and as i move it it moves everywhere in each item in my repeat grid pretty cool right. i can also grab my element and i can grab multiple images that i might have inside of my finder or my computer and when i upload it into one spot inside of that repeat grid it's going to drop images everywhere once we select our repeat grid you can see hovering over the gutters in between the elements will allow me to evenly space my elements apart from each other. so i can do negative spacing or positive spacing or right there down at zero and so everything is lined up perfectly and this is a really really great way to create grids quickly if you're done working in your grid because you want to maybe be able to customize one thing here without customizing it everywhere you can always right click on your grid and say ungroup the grid and now these are all each individual elements that you can mess with let's talk about some basic prototyping inside of adobe xd basic prototyping will allow you to connect all of your designs and make it feel like an actual application using basic transitions you can see here on my canvas.

 I have a new artboard that has a simplified view of my shopping cart with a checkout button. i want to be able to tap my checkout and actually navigate over to this more complex screen that has all the payment details inside of it. so i'm going to click over to my prototype tab and i'm going to select the button and it tells me i have a default state and that's great it has a hover that's already working here in my prototype but i also want to add another prototype not just a hover state for the button. but when i tap this button i want to go somewhere else so i'm going to grab the little plus and i'm going to drag it to the screen on the right and release and now i have a new interaction okay so that interaction is going to be a tap interaction or it could be a drag you could use keys and the gamepad to do things or you can use voice interactions we're going to do a basic tap trigger for our interaction and when we do that we want to transition and we want to move over to this shopping cart screen so we're going to choose shopping cart and we can do a simple dissolve or we could do slide left or right let's play with a simple dissolve and see what it looks like we click on our button and it's just gonna dissolve in to that space. we can change that and maybe do something like a slide left if we want and now we're sliding our entire prototype over to the left these are basic transitions that you can use and they have some easing options like maybe we want a snap option and maybe we want to be slower like an entire second so why don't we press that with a little bit of easing and a little bit of timing change it changes the tone of your entire prototype the next thing we want to talk about is auto animate inside of adobe xd auto animate will allow us to not just transition with dissolves or pushes or slides but actually animate the elements on your screen getting as close to using something like after effects without actually having to use something like after effects.

You're going to get real motion real animation with really good controls so auto animate is a lot of fun to play with here's what we have on our screen right now we have our checkout screen and when we click on our button it moves over does this hard transition over to our payment details when we click shopping cart it goes back but you can see we have this box. here called pay details and we want to make sure that this element slides in and out and that our button is going to move our boxes resize the whole thing it's going to be great some of the keys that you need to know about auto animate is making sure that your layers are named the exact same way and that they're positioned in your layer panel in a really really similar way and so we have our pay details with our button on top of it so we're going to take our pay details and make sure that it's here and our button is on top of it then we're going to move it over to the left hand side and we're going to take the opacity of this down and now it's on the screen and it's ready to be animated.

Okay we also have the exact same list here as we do over here everything is exactly the same we're going to come back into prototype select our button select our tap trigger by selecting on the line just like that and instead of transitioning we want to auto animate over to shopping cart with a little bit of snap at one second then we're gonna do the same thing with the transition that we had here choosing our trigger from transition to auto animate snap at one second and we should then be able to press play and see things auto animate just like that and things move back so we're getting a basic hover with our button that we already established we're getting basic auto animate things are actually scaling like our lists are scaling and our payment details are coming in you can have all sorts of fun with auto animate it's such a cool thing to do it really brings your prototypes to life the next thing we're going to talk about in adobe xd is plugins adobe xd has tons of great plugins that you can use to make your job as a designer so much easier simply by clicking on the plugin menu down below on the left hand side we now have access to lots of different plugins and these are the ones that i've currently installed.

If you want to install new plugins you can hit the little plus icon on the top right hand section it's going to open up the plugins explorer and we can see all the different plugins that are available to us we can look at collections like maybe sketching plugins or we can look at things like using undraw to add illustrations maybe we want something that is good for let's see we'll browse the rest of them here maybe we want something for icons. i have icons for design installed i have a calendar one installed maybe we want something like this uh wire framer to be installed we simply just click on it we can see all the details ratings of it everything in our plug-in store we press install and boom it's going to install directly into adobe xd you can see it's spinning and now it's installed so we can head back and look for wireframer in our plugins menu and there it is we're going to tap on plugin and we can get started this plugin will allow us to add some cool wireframes directly into our project so we have something to go off there are plugins to make mockups plugins to make grids plugins to make images and icons and to find avatars there's plugins for everything you could possibly need and if you can't find one you can make your own plugins. i'll leave some information down the description how you can sign up and become a plugin developer if that's your thing the last thing we want to talk about in adobe xd is sharing your project handing it off to engineers getting feedback from stakeholders and maybe even doing a little user testing you can do that inside of adobe xd simply by going up and clicking on the share tab it's going to show us our design and we have the entire flow that we've been working on this animation back and forth everything about it.

We want to create a shareable link for people to play with and touch so we can go ahead and create a new link and we'll call this uh prototype and we can select what type of permissions or functionality we want the share link to have is it for design review is it for development is it for presentation or user testing or do we want to customize one of my favorites is actually the development handoff feature and that's going to create the ability to export for web and have a handoff space for your engineering and development teams and so we want to say make sure that anyone with a link can view this maybe we only want invited people or we want to make it password protected we're just going to say anyone with a link we're going to go ahead and create that link inside of adobe xd all right it's updated and now we have our link let's go ahead and create one more before we get going let's create a new link we want to call this uh user test and let's make this for user testing purposes anyone with the link and we will go ahead and create that link as well all right now that we have development selected let's click the link and it's going to open it up in my browser and i get to see exactly.

What my engineers will see which is i can see my prototype i can actually interact with it just like it is in my design file if i click anywhere on the screen it's going to blink blue and tell me what are my interactable areas just like that i can leave feedback i can say something like this looks cool if i spell the word looks correctly okay so i can leave some feedback. i can even pin something like hey uh i want to make a comment right here that says uh this is a cool game and now people can view my my pins that i've made i can also mention anybody that's invited to this on the team from here i can also look at the development environment so i can hover over and view the specs of this design and this is going to give me or my engineering team the ability to see the viewport size all the colors when i hover over any particular color it shows me where in the design it's used i can see all the colors or character styles and where they're used in the design. i can also come down and see the different interactions right the interactions that we have take place here on this screen.

If i click on any one element i get measurements in between it and surrounding elements and because this one was outputted for web and not mobile i'm gonna get css where on the other ones you might get android or ios code to implement for your engineering teams after this i can head over to the variables and i can see the different variables in code that it's created for me to implement into the project and that's pretty much adobe xd well there you go that's the top 10 things you need to know to get started with adobe xd right now.

I hope you guys enjoyed the article.