Please subscribe to watch this video
User Experience Design Essentials - Adobe XD UI UX Design
Daniel Walter Scott || VIDEO: 36 of 93
Hey there, welcome to this video, all about color. We're going to find out how to steal colors from say an existing logo or brand, and use those. Then we're going to convert them into our Assets panel. We're also going to turn them into this handy kind of reusable option down the bottom here. We'll also jump and have a look at something like this, where there's kind of inspiration for color, and how to use those. All right, so let's jump in there now, and start making colors.
There's a few ways of working with color in XD. First way is, I'm going to pull it from a logo. So we're going to go 'File', 'Import', then we're going to try and bring in, under our 'Exercise Files', 'Images', you can see my 'ai' files. Currently in this version, you can't actually just bring in ai files, which is a bit of a pain. So what I do is, just open them up in Illustrator, copy them, and paste them in. You can paste really easily, weirdly. I'm going to use this logo here. What I want to do is-- you can double click it, or ungroup it. I'm just going to double click it. Eventually, I'll get the H, and you can see, there's the Fill color. What I'd like to do is, hit that blue '+' button there. And this is going to add it just like easily accessible colors.
Also, in your Assets panel, which are these two little blobs here, we can go to 'Colors', and because it's selected, it will add it in here as well. So it's good to have them at both those places while we're working. Now, to get other colors, to get maybe color inspiration, a nice place is Adobe Color. It starts to create. I like to jump to this one that says 'Explore'. It just gives you kind of ideas of color groups. You just might use one of these to get started with. They've got a range of them, these concepts. And all you need to do is click 'Save'. You need to log in with your Adobe ID, and pick 'CC Library' for it to go into. Then inside of XD, you can go to 'File', open up your 'CC Library', and in our case, it would be 'Instructor HQ'. And there'll be the colors waiting there. It's not the method I want to use for the moment.
If you don’t want to use that CC Library option or you're working in a place where you just can't use it, you can just use this website. Click on them, and say 'Edit'. You'll see down the bottom here, it's easiest to copy these Hexadecimal numbers. You can copy them into XD. So draw a rectangle. And over here, click on the icon, and just paste that in there, and it will give you colors. It's a way of transferring them without CC Libraries. Another way to get colors is to look at our Mood Boards. I'm going to zoom out a little bit. I want a kind of a peachy red color I want to use. So maybe something like that, maybe not. Now I'm just looking around for a color. So maybe something like somewhere in there is what I want.
So what I can do is I'm going to draw a rectangle and I'm going to use the Eye Dropper tool, and this Eye Dropper tool allows me to go off and just pick a color from here. And you can see, followed with that Swatch. That's kind of close to what I want. What you can also do though, it's a nice little trick, you can kind of move this and kind of see stuff underneath, and your Eye Dropper tool will actually go down and pick things underneath as well. So you don't actually have to pick it just from the XD panel like you do in lots of other Adobe products.
So I've got this color here. It's kind of it. I'm going to double click it over here and I'm probably going to go through and just drag this down a bit. Now I'm just messing about. It's kind of where I want to be. So with this, I'm going to copy it, and then delete it. Come down to here. And what I'd like to do is, just in the paste board up here, I'd like to build out my Swatches. So I'm going to draw a little square, holding 'Shift'. It will give me a perfect height and width. I'm going to start with my green. And what I'll do is, I'm going to have no border. And I'm going to have two of them. One of them is going to be that color. And I like to have, like a secondary color that's just a bit darker. So let's drag this down here. So there's like a darker version of it. Then, I'm going to start with that peach color. So I'll use you, the Eye Dropper tool, take it from that. You're done and dusted. Now I've got another Swatch here, and yours can be a little darker again. And I probably want black. Not black, but I want quite a dark kind of-- probably somewhere out here is what I want. It's kind of gray, but just a little bit of red left in it. And those are going to be my Swatches for this course. I can select the four that I don't already have in here, and hit '+'. All part of that gang. And over here I need to do it a little more individually. So, you, add, and you add. They're handy now, they're in both places, I promise.
Two more things we want to do before we move on. I want Instructor HQ to be part of the Symbols Library because this is kind of a working logo, just kind of made it quickly to give the company a brand, but we haven't really agreed on our logo yet. So I'm going to add that to Symbols so later on I can update this, and it will update in all the usages. I've got another version I want to bring in, it's the stacked version. I'm going to copy that, paste it into here, and I'll add it to our Symbol. Great!
Drop me a line if you've got any other questions about colors. We're using RGB because we're going out for digital displays, not CMYK colors. Anything else, drop me a question, and I'll answer it in the comments. All right, let's get on to the next video.