Creating realistic buttons in Adobe XD with paste properties

Hello, in this great video we're going to look at how to make Buttons. Seems simple, but I have a tendency of making squares with text in them. And users don't know that they're buttons so there's a little bit more to it. I'll show you best practices by looking at something like material.io, where they have good examples, and documentation. And we'll also learn a cool little trick that you can use for all sorts of things in XD where it's copy and paste properties. All right, let's go and make Buttons. 

Now working with buttons, it seems like a simple job but it can be a little bit complicated. I think that I draw them, make them, put them on the sites, and I get feedback from staff, and they’re like "That doesn't look really look like a button," and I'm like, "No way." So sometimes what you feel is a button, just drawing a box and putting a type in it is not enough. So probably one of the easy ways to get started is if you look at material.io, remember, this is Google's kind of Style Guide for online and apps. And if you go to Components', 'Learn More', it's a bit of a rigmarole, I find, this web option, and a bit of components, and you'll find there's a bunch of buttons. We've kind of looked at this before. 

And in here, what you can do is-- there's kind of like some technical documentation, but if you actually just click on this button here, it says 'Raised', it gives you kind of bunch of different ways and styles of doing things. So you might just use this as a Style Guide. It does tell you the CSS, and everything for these. Another nice way is, back in XD, if you go to 'File', 'Open', and on our 'Exercise Files, in the 'UI Templates', under 'Google Material', this 'stickersheet' has buttons as well. And in here, there is one that says 'Buttons', there he is there. And it's just an easy way to find what looks like a button. And it's only simple things, like this one here, just has tiny rounded corners, this tiny rounded corners, nice little drop shadow. 

A nice easy way to steal formating from other XD files is this, at the moment is a grouped object. It's actually a symbol, so I'm going to ungroup it because I don't want the text in this case, I just want this. And I'm going to go to 'Edit', 'Copy', or you can just use your shortcut. So just simple old copy, then jump to your sheet. I got the Rectangle tool, and I'm going to draw out a button here. Now when you are drawing buttons, and working on size again, you need to be 100% otherwise you'll have to join them as buttons, I do it all the time, and pick a kind of a size for your button. Nice kind of, going to be mine. And then what you can do is, go to 'Edit', and there's 'Paste Appearance'. You can right click it, and pick 'Paste Appearance' as well. It's just a really quick easy way to steal formating. 

I'm going to change the color. So I'm going to use the Eye Dropper tool. Actually I'm just going to use this. This one. Okay, that's it. You can obviously go and customize your buttons to be anything you like, but following standards that either Apple or Google create is often good practice, because they are the boss. They are teaching the world how to use the internet through their UI, and you can borrow ideas from them. 

You can skip along now, because what I'm going to do is just fill in my Type. I'm going to grab my Type tool, click in here, and this one's going to be the sign up. 'Sign up'. I'm going to select it all, pick my Button style, and I'm going to fill it with 'White'. Actually, to be honest, this one here, I'm going to actually change Globally because I'm going to do these colored buttons all the way through. I drag it at the top here, 'FFF', that's going to be white. So now they all follow that style. I'm going to duplicate these. And you'll notice, when you're dragging boxes around, you're like "Oh no, I selected that column," it doesn't really matter when you start dragging it, it kind of ignores it because it's locked. And this one here is going to be our 'Live Demo'. What I'll do for the other buttons is I want to draw some icons which we'll do in the next video. You're going to be that. 

The last thing I need to do before I go is put our logo down here. Our logo is looking a little bit big at the moment. I didn't take a lot of time earlier on showing you how to turn it into a symbol, but getting it the right size first. So one of the features that need to happen for XD which it doesn't have at the moment, is that you can't resize your symbol. A little strange, but it's version 1 and we have to live with some of the new version drawbacks. So what I'm actually going to do is, right click it, and ungroup it. Now I get to resize it. Put it in the top here, and weirdly I converted it back into a symbol. There you go, but now I have two sizes of it. Really I do need this to be a symbol, so I just keep both versions because I've been working in the background, and I'll show you, actually here it is here. It's not quite done. I feel like this is getting close as I-H-Q. I'm not sure, because it can be flipped upside down. I'm doing this because I'm reading Dan Brown's book at the moment. Everything needs to be super secret code, flipped upside down stuff. Like that awesome Illuminati icon. You've read the book, you know the one, maybe. So I want it to be a Symbol, because I want to go and update it. So that is creating Buttons. Making them look like actual buttons rather than boxes with type in it that I seem to create too often. 

One other thing before we go. Just a little bonus track if you watched the whole video. Under here, 'Assets', in here, 'Search', if you do 'UI Kit' you'll find some more kind of styles of buttons. They're going to be pretty similar but you'll find in here, there's just things you can download. Although I can't zoom in, there are lots of good examples for our buttons in here that might be slightly different from this if you're not happy with the dropshadow/rounded corners and want to see some different examples. All right, that is it. Next video please, Dan. You know that it's me.