Here we are again, with another Adobe XD tutorial. You’d be surprised at how many of these plugins work with other prototyping applications such as Figma. However, in this tutorial, we will show you how to use Color Designer in Adobe XD. If you wanted to use a colour wheel generator, you would need to leave Adobe XD and go to that website.
Getting Started with Color Designer Plug-in
Color Designer’s plugin allows you to create different colour harmonies to tints and shades within the application.
Let’s begin. You will find plugins in Adobe XD’s main menu, Plugins and select Browse Plugins. Or in the bottom left-hand corner is an icon that looks like a Lego piece, go ahead and click on that. Click on the + symbol to Browse Plugins. Your Creative Cloud account will launch with a list of all plugins. In the search field on the left, enter Color Designer. Choose Color Designer from the list. Click on Get.
Let’s open up the plugins panel and select Color Designer. A pop-up dialog menu will appear with all your options. The colours saved in your assets panel will show up on the left for you to choose.
If you don’t have any colors in the selected layers or assets, it means you need to close this panel and choose something. A reference point is required for some colours to appear. So select an object to use as a reference point.
Tints and Shades
When you select Tints, you will see your colour’s tint down to white, with the ability to slide for more or less. With shades, all the colours will be shown down to black with a slider allowing you to change the amount.
Colour Harmonies
There are many colors and varieties of harmonies to choose from. Colour Harmonies can help you choose from many combinations of complementary, split, and triad harmonies. Simply hover over the color and click the plus icon to save it to your assets panel. Finding other colors that work with your mockup and prototype is easy with this tool.
Color Picker
When using the Color Picker, this will give you a grid of colours to choose from; Green, Blue, Red, Orange, Purple, Yellow and Gray.
Adobe Stock
Then you have images where it generates photos you can license on Adobe Stock that have the same colour scheme as your work; from Backgrounds, Textures, Patterns and More.
View Online
Click on View Online, and it will open Color Designer’s website with the same tools we just went over such as color palettes, tints, shades and color harmonies.
Once you’re back into your workspace, all the colours you saved are in your assets panel for you to use. Using the colour designer plugin is awesome for speeding your design workflow versus stepping away from Adobe XD and using a website. Everything is contained in one application!