🚨 Heads up! This course is no longer supported. Check out our Figma Essentials course - it's our go-to UX design tool.
How to use color in Adobe XD
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
It is now time to upgrade yourself & learn Adobe XD.
What are the requirements?
- You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
- No previous design experience is needed.
- No previous Adobe XD skills are needed.
What am I going to get from this course?
- 87 lectures of well-structured, step by step content.
- Learn to design websites & mobile phone apps.
- Work with fonts & colors.
- Prototype your designs with interactions.
- Test on mobile phones.
- Send your designs for feedback & commenting.
- Export production ready assets.
- Create your first UX brief & persona.
- Create quick wireframes.
- How to use premade UI kits.
- Learn professional workflow tricks & shortcuts.
- You will get the finished files so you never fall behind
- Downloadable exercise files
- Forum support from me and the rest of the BYOL crew
- All the techniques used by UX professionals
What is the target audience?
- This course is for beginners.
- Aimed at people new to the world of design & user experience.
- No previous Adobe XD experience is necessary.
- For anyone that needs to add ‘UX Design’ to their portfolio.
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Certificates
We’re awarding certificates for this course!
Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.
Downloads & Exercise files
Transcript
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.
How do you change colours in Adobe XD?
Select an object, click its Fill colour swatch in the properties panel, then choose a colour using the hue slider and colour field. You can also enter HSB, RGB or hexadecimal values, or sample an existing colour with the eyedropper. For wireframes, stick to greys or one accent colour.
How to Use Colour in Adobe XD: Fills, Eyedropper and Borders
Key Takeaways
Keep wireframes simple so feedback stays focused on functionality.
Choose fills, neutral greys and transparency with the colour picker.
Enter precise colour values and save colours for reuse.
Copy colours quickly with the eyedropper and the I shortcut.
Remove borders cleanly and select multiple objects with Shift.
First, a Few Handy Zoom Shortcuts
Before getting into colour, there is one shortcut worth getting into the habit of using: Command + 3 on a Mac, or Control + 3 on a PC. It fits whatever you have selected into view.
If you are working across several artboards, click an artboard’s name to select it, then use that shortcut. Much easier than fiddling with the zoom until everything fits nicely.
Here are the zoom shortcuts together. Use Command on a Mac and Control on a PC:
Command/Control + 1: zoom to 100%.
Command/Control + 2: zoom to 200%.
Command/Control + 0: fit everything into view.
Command/Control + 3: fit the selection into view.
Why Your Wireframes Probably Do Not Need Colour
Here is the slightly odd bit about learning colour in Adobe XD: my first piece of advice is not to use much of it.
When you are making wireframes, the important discussion is about the task flow and how things work. Can people get where they need to go? Does the arrangement make sense? Those are the questions you want feedback on.
Introduce a range of colours and, just like choosing fonts too early, you can accidentally change the whole conversation. Suddenly it is about whether that green matches the company brand, or whether somebody likes red.
Those discussions have their place. It is just later, after the wireframes.
Use greys as your default. If you do introduce colour, keep it to one accent colour, perhaps the brand colour you are working with. Pick one and move on. Spending ages finding the perfect shade is not the job at this stage.
Change an Object’s Fill Colour
A basic shape starts with a white fill and a grey border. To change the inside colour, select the shape and click the Fill colour swatch in the properties panel.
The colour picker gives you two main controls:
The hue slider: choose the general colour family, such as blue, green or orange.
The colour field: choose a lighter, darker, more saturated or less saturated version of that hue.
For example, move the hue slider into the blue range. Then click inside the colour field, or click and drag around it, to see the selected shape update. You can go from a very strong blue to something softer or darker without needing to choose a different colour family.
Choose the hue first, then adjust its saturation and brightness in the colour field.
Pick a Proper Neutral Grey
For a neutral grey, move the selector all the way to the left edge of the colour field. At that edge, the colour is completely desaturated, so it does not matter where the hue slider is set.
There is a little trap here: almost at the left edge is not quite the same as being on it. A colour that looks grey can still have a hint of green or blue.
My simple method is to click and hold, then drag beyond the left boundary before releasing. The selector stops at the edge, giving you a proper neutral grey. Move up or down that edge to choose a lighter or darker grey.
White: drag into the top-left corner.
Grey: use the left edge between white and black.
Black: drag to the bottom edge of the field.
Adjust Transparency and Enter Exact Colour Values
The colour picker also includes a transparency control. Think of it as the amount of see-throughness: lower the opacity and the fill becomes more transparent.
You can drag the transparency slider or enter a value directly in the field at the bottom of the picker. If you know exactly what you want, typing it is easier than trying to land on it with the mouse.
HSB, RGB and Hexadecimal
You do not have to choose every colour by dragging around the picker. Adobe XD also lets you work with different colour value formats:
HSB: hue, saturation and brightness, which correspond to the adjustments you make visually in the picker.
RGB: red, green and blue values.
Hexadecimal: a colour code that is particularly familiar in web design and development.
These are different ways of describing a colour. Switching formats does not, by itself, change the selected colour. Use whichever format suits the information you have.
If you are copying a colour from a corporate specification manual, enter or paste the supplied values rather than trying to match it by eye. If you are simply blocking out a wireframe, dragging around the picker is perfectly fine.
Save a Colour You Will Use Again
Once you have chosen a colour you want to reuse, click the little plus button in the colour picker. This saves it as a reusable swatch in the picker, ready to select again later.
That saves you from trying to recreate the same shade for each new shape. Choose it once, save it, and get on with the layout.
This is enough for basic colour reuse. Gradients, colour styles and more detailed stroke controls are separate topics; there is no need to tackle all of those just to colour a few boxes.
Copy an Existing Colour with the Eyedropper
Suppose your product placeholder already has the colour you want, and now you want a button to match. You do not need to reopen the picker and hunt for the same shade.
Select the object you want to recolour.
Activate the eyedropper.
Click the existing colour you want to sample.
There are a few ways to activate it. You can open the colour picker and click its eyedropper icon, or use the eyedropper beside the Fill control in the properties panel.
The picker’s eyedropper gives you a magnified sampling view, which helps when you need to choose a colour from a small area. Sampling from a big coloured rectangle is easy enough, but that extra precision is handy.
The shortcut you will probably end up using is I. That is the letter I, not the word “eye”. Select your object first, press I, then click the colour you want.
Sample the existing fill to give the buttons the same accent colour as the product placeholder.
Change or Remove a Border
The Border colour swatch opens the same kind of colour controls as Fill. You can choose a new colour, use a saved swatch or match the border to the fill.
But if you do not want a border at all, do not make extra work for yourself.
You could make it transparent. You might also be tempted to reduce its width to zero. The straightforward option is simply to untick the Border checkbox. No border, done.
Select Two Objects with Shift
To work with two shapes together, use the Selection tool, click the first object, then hold Shift and click the second. Both are now selected.
This is useful when checking or applying shared appearance settings. For example, select both buttons and confirm that neither has a border enabled.
Keep the Colour Work Simple
For basic Adobe XD wireframes, you now have what you need: choose a fill, adjust its transparency, enter an exact value when necessary, save a reusable swatch and sample existing colours with I.
The bigger lesson is knowing when to stop. Keep the wireframe focused on how the design works. Greys are ideal; one accent colour is fine. Two? Now you are getting yourself into trouble.
Key Terms
Fill
The colour inside a shape. It is controlled separately from the shape’s border.
Hue, saturation and brightness
Hue is the colour family, saturation is the intensity of that colour, and brightness describes how bright or dark it is. Together, these form HSB.
Opacity
How opaque or see-through a fill is. Reducing opacity increases transparency.
Eyedropper
A tool for sampling an existing colour and applying it to the selected object. In this workflow, its keyboard shortcut is I.
Border
The outline around a shape. Untick Border when you want to remove it.
FAQs
Should I use colour in Adobe XD wireframes?
Prefer greys so feedback stays focused on layout, functionality and task flow. If you need colour, keep it to one accent rather than introducing a full palette.
How do I get a neutral grey in the colour picker?
Drag the selector fully to the left edge of the colour field. This removes saturation, regardless of the selected hue, and lets you choose between lighter and darker greys.
What is the eyedropper shortcut in Adobe XD?
Select the object you want to recolour, press I, then click the colour you want to sample.
How do I remove a shape’s border?
Select the shape and untick the Border checkbox in the properties panel. There is no need to make the border transparent or change its width to zero.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
