Work with document assets in Adobe XD

• He is looking for information on how to create and manage assets in XD.

• He needs help with creating an asset management system in XD.

Add colors

• Select an object on canvas, and click the + icon next to Colors in the Document Assets panel. XD extracts the fill and border colors associated with the selected object.

Add character styles

• Select text on canvas, and click the + icon next to Character Styles in the Document Assets panel. XD extracts all the styles associated with the text layer, including any subrange styling. 

• You cannot add colors from shadows to Document Assets.
• You cannot group character styles with common properties. 
• You can delete audio files only from the Document Assets.
  
  

• You can add audio files from the Property inspector in Prototype mode.
• You cannot rename or reorder audio files.
• Audio files are not linked when linking to a cloud document. 

• Use the list view  in Document Assets to rename and sort the assets to match your organizational needs. The grid view  is optimized to reuse assets given the larger thumbnails and assets renditions.

• For a preflight check, select all the artboards in your document to extract every color and character style used in the document.

Reuse color

1. Select an object or a text layer and click the color swatch to apply it as a fill color.
2. Multi-select objects and apply a color or gradient to the selection.
3. Right-click a color swatch from Document Assets and select Apply border color to apply it as a border color or copy the Hex value for reuse.
4. To apply the same color to an object's border, select the object, select the color, and press Opt (macOS) or Alt (Windows).

Reuse character styles

1. Select a text layer or a part of the text and click the character style to apply it.
2. Multi-select objects and apply a character style across a selection.

Reuse components

1. Drag the component from the Document Assets to the canvas.
2. Multi-select objects and drag multiple components on canvas.
3. When dragging a component, you can hover over another component instance to swap it. 

Edit colors

• Right-click on a color swatch and select Edit to modify the color value across the document. 
• All objects on canvas using that color update in real time. This is a great way to preview a color change at scale and make edits.
  

Edit character styles

• Right-click on a character style and select Edit to modify that style across the document. 
• All text layers on canvas using that style are updated in real time.
  

Edit components

• Right-click the component on canvas or in the Document Assets panel and select Edit Main Component to highlight the main component on canvas or re-create if deleted.
• Any changes made to the main component are propagated to other component instances.

• To determine the impact of the edit on your design, Use Highlight on Canvas option before you edit the assets from the Document Assets.
• To edit colors in character styles, change the color value and then the global color value to preserve the character styles.

• If you update a linked color or a linked character style, only the objects with linked colors or character styles applied to are updated.
  

View and sort assets

• Grid view : Optimized to display thumbnails, you can visually identify the assets.
• List view : Optimized for organization, you can view the names of all the assets and reorder them.
• Sort by Name: Alphabetically orders asset categories and all the assets within them.

You can add, reuse, and edit assets in both views. 

Search and filter assets

Use Search to search for assets.

Use Filter by Type to filter the document assets by Colors, Character Styles, or Components. For more, see Search and filter assets.

• The filters in Document Assets allow you to filter and view only a specific category or source of assets.
  
• Unsure about how a change will impact your design? Use Highlight on Canvas to view instances of that asset across your document.
• To identify unused components, select all objects on canvas, right-click, select Reveal Component in Assets, and drag the highlighted components to the top of the list.

• When you hover over a:
  • Gradient, the tooltip displays the start and end value of the gradient. A ‘-’ between the values indicates a gradient with two stops and a ‘...’ between the values indicates a gradient with multiple color stops.
  • Component, the tooltip displays the number of instances of that component on canvas.
    
• When renaming assets in the list view , use TAB to rename the next asset in the list view, and SHIFT+TAB to go in the reverse direction.

• If you have already organized your document assets in an artboard, right-click the artboard name and select Reveal Components in Assets, Reveal Colors in Assets, or Reveal Character Styles in Assets. All the assets in the asset category you selected get highlighted and selected in Document Assets. Right-click any of those assets and select New group from selection to easily create a group with all those assets.

• If your document assets are named and you want to quickly group them, use Search to narrow down those assets to match your search criteria. From there, you can quickly create a group with just those filtered assets.