Work with document assets in Adobe XD

Search
  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
    11. Changes to XD Starter Plan
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids in XD
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups in XD
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components in Adobe XD
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects in XD
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links in Adobe XD
    10. Preview designs and prototypes
  5. Share and export
    1. Share selected artboards
    2. Share designs and prototypes
    3. Work with prototypes in XD
    4. Coedit documents shared with you
    5. Create shareable links
    6. Review prototypes
    7. Work with design specs
    8. Share design specs
    9. Inspect design specs
    10. Navigate design specs
    11. Review and comment design specs
    12. Export design assets
    13. Export and download assets from design specs
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents
      1. Issues with XD cloud documents
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Looking for information on how to manage document assets in XD? You're in the right place!

Document Assets panel is the central location from where you can create, manage, and share colors, character styles, components, and audio assets used in your design projects.

document assets

Why use document assets?

Meet Richard, a design lead responsible for standardizing the creation and usage of design assets in cloud-based systems. He is training himself to manage colors, character styles, components, or audio assets across design systems.

 

  • 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.

Read on to learn how we can introduce him to Document Assets in XD and help him get started.

New to Adobe XD?

Get Free Trial app

Learn app basics

Already on XD?

Update Your App

Check out What's New

Try it yourself

Get Sample File

.xdc; 604 KB

Before you proceed

Be familiar with these concepts in XD:

Add document assets

To start curating your design styles and components, click Libraries  in the toolbar, or press Cmd + Shift + Y (on Mac) or Ctrl + Shift + Y (on Windows), to open the Document Assets panel .
Once you are in the Document Assets panel, follow these steps to add colors, character styles, components, or audio that you want to reuse across your document or publish later as part of your library. 

Add colors

  • Click the + icon to add Colors and gradients. XD extracts the fill and border colors text layers, color, and subrange styles associated with the selected objects.

Add character styles

  • Click the + icon to add Character Styles. XD extracts all the styles associated with the text layer including any subrange styling.

Add components

  • Click the + icon to convert  a selection into a component. When you create a component on canvas, XD automatically adds it to the Document Assets.

Add audio

Add audio assets

  • Audio files added to a prototype in the Property inspector in Prototype mode automatically show up within the Document Assets.

Things to watch out for

  • 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. 

Best Practices

  • 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.

Apply and reuse document assets

Now that you can view the added assets from the Document Assets, select an object or a group of objects on the artboard, and click the color or character style to apply it to the selection.

To use one or multiple components in your design, select them in the Document Assets panel and drag them to canvas. Instances of those components will be created on canvas.

Follow these steps to reuse color, character styles, or components: 

Reuse color

Reuse color

Do one of the following:
  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.

Reuse character styles

Do one of the following:
  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

Reuse Components

Do one of the following:
  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. 

Best Practices

  • For a consistent usage, once you have saved your colors and character styles, ensure to apply colors and character styles from the Document Assets to the selected objects.

Edit document assets

Once you have added and reused your assets, you can edit them from Document Assets to make global changes across your document. This facility provides a streamlined way to modify your color and character styles across the document. 

Before you proceed, ensure that you are editing the correct asset:

  • Right-click the asset in Document Assets, and select Highlight on Canvas to find all the objects that use that color or character style, or find the instances of a component.
  • Select any object on canvas, right-click, and choose Reveal Components in Assets to locate that color, character style, or component in Document Assets.
Highlight on Canvas
Right-click the asset in Document Assets, and select Highlight on Canvas

Reveal Components in Assets
Select any object on canvas, right-click, and choose Reveal Components in Assets

Follow these steps to edit document assets:

Edit colors

Edit color

  • 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

Edit character

  • 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

Edit component

  • 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.

Things to watch out for 

  • When editing a color or character style used across multiple objects (>100), the changes may take time to propagate from the panel to all the objects on the canvas.

Best Practices

  • 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.

Manage and organize document assets

After you add assets, you can manage and organize them in the following ways:

  • View and sort assets
  • Search and filter assets
  • Hover over assets
  • Reorder, rename, and delete assets

To learn how to group assets, see Organize assets into groups and subgroups.

View and sort assets

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

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.

Hover over assets

Hover over assets

Hover over asset thumbnails to reveal the following information: 

  • Colors: Displays the Hex value or the custom color name. 
  • Gradients: Displays the gradient value stops.
  • Character styles: Displays properties like line spacing.
  • Components: Displays the number of instances of that component on the canvas.

Reorder, rename, and delete assets

  • In the list view  , drag to reorder assets within each category.
  • Right-click to rename or switch to the list view  and rename all your assets.
  • Right-click and select Delete to delete a color, character style, component, or audio from Document Assets. When you delete a component from the panel, instances are ungrouped as regular objects on the canvas.

Things to watch out for

  • When working in the list view , you cannot see a large preview of the Component.
  • Reorder assets to group them across various categories. 

Best Practices

  • 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 indicate a gradient with 2 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.

Organize assets into groups and subgroups

You can easily organize and structure your document assets by creating any number of groups and subgroups.

Multi-select assets and create a group
Multi-select assets, right-click, and create a group

Create groups within each asset category (Colors, Character Styles, and so on) in any of the following ways:

  • Multi-select assets, right-click, and choose New group from selection.
  • Right-click the asset category (Colors, Character Styles, Components, and so on), and choose Create subgroups.
  • Right-click an asset, and choose New group from element.
  • Right-click an asset, choose Move to, click the folder icon, click Create, and then click Move.
  • Multi-select assets, right-click, choose Move selected items to, click the folder icon, click Create, and then click Move.
Create a subgroup within a group
Create a subgroup within a group

Once you create a group, right-click it to do any of the following:

  • Create subgroup: Create any number of subgroups.
  • Move to: Move assets between groups with the asset category.
  • Rename group: Provide custom names to your group.
  • Ungroup: Remove the group and move the assets within it one level up.
  • Delete: Delete the group and the assets within it.

Once you create your groups and subgroups, you can drag the assets to move them to those groups. Alternatively, right-click the assets, and select Move to, to easily navigate and choose the groups you want to move the assets to.

 When you publish a linked library from your XD cloud document, all the groups and subgroups are preserved in the library.

Things to watch out for

  • The group path for your assets is not displayed when you publish design specs.
  • Groups paths for components are not visible in the Layers panel.

Best Practices

  • 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.

To get some pro tips on organizing your document assets, watch this video:

Share and publish assets

Now that you have created all your reusable colors, character styles, and components in your document assets, learn how to use Creative Cloud Libraries to publish and share your design system assets with the rest of your team.

Learn more

To learn more about working with Assets, watch this video:

What's next?

We've got you started on how to work with assets and libraries in XD. Take a step forward and learn how to use Libraries to share your assets, components, and designs systems or migrate your existing XD cloud document to Libraries.

Have a question or an idea?

Ask the Community

Have a question to ask or an idea to share? Come and participate in Adobe XD Community. We would love to hear from you and see your creations!

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy