The Assets panel

The Assets panel has been introduced by Adobe in the August 2017 update.

This section is located on the left side of the screen, and, if not visible by default, it can be displayed by clicking on the Assets panel icon at the bottom of the left toolbar.

In this section you can see, edit and re-use the Colors, Character Styles and Symbols present in your XD project.

assets panel xd

 

Colors

Add Colors to the Assets panel

The colors used in your project are not included by default in the Assets panel. If you want them there, you need to add them first.

• You can easily add every single color used in your project by first selecting all the artboards in your document and then clicking on the “+” icon next to the Colors label in the Assets panel. The Colors section will now expand and show a list of every single color and gradient used in your project.

• If you don’t want to all the colors of your project, but just a few ones, then only select the objects you want their color to be included in the Assets panel and then click on the “+” icon.

 

Apply and manage Colors from the Assets panel

You can easily apply the colors included in your Assets panel to new or existing objects included in your XD document.

• To apply a fill color, just select an object and then click on the color you want to apply in the Assets panel. The fill of the object will be instantly changed to the new color. You can do the same thing by right clicking on the color thumbnail in the Assets panel and selecting “Apply as fill“.

• To apply a border color to an object, select it, right click on the color thumbnail in the Assets panel and select “Apply as border“.

• By right clicking on a color thumbnail in the Assets panel you can also Edit the color, copy its Hex values, or delete it from the Assets panel.

 

 

Character Styles

Add Character Styles to the Assets panel

As for the colors, also the character styles used in your project are not included by default in the Assets panel. If you want them there, you need to add them first.

• You can easily add every single character style used in your project by first selecting all the artboards in your document and then clicking on the “+” icon next to the Character Styles label in the Assets panel. The Character Styles section will now expand and show a list of every single font style (name, weight, size and color) used in your project.

• If you don’t want to add every character style included in your project, but just a few ones, then only select the text objects you want their style to be included in the Assets panel and then click on the “+” icon.

 

Apply and manage Character Styles from the Assets panel

You can easily apply the character styles included in your Assets panel to new or existing text objects included in your XD document.

• To apply a character style, just select a text object in your document and then click on the character styles you want to apply in the Assets panel. The font style of the selected object will be instantly changed.

• By right clicking on a character style in the Assets panel, you can also Edit the style or delete it from the Assets panel.

 

Symbols

Symbols are a very specific type of objects and they deserve a chapter on their own. See the next chapter.

 

I suggest you get confident with the Assets panel. When used correctly, it can bring a huge productivity boost to your Adobe XD workflow.

 

PREVIOUS CHAPTER                                                                                       NEXT CHAPTER