Learn how to use linked assets across cloud documents for enhanced productivity workflows.

With the ever-increasing design surfaces, designers need an easy collaboration to create, and maintain consistent designs. With Linked Assets, designers can create a contextual library based in a cloud document comprising all the assets (colors, character styles, and component) required to scale their designs consistently.

With the latest version of Adobe XD, you can easily share and consume not only components (what was formerly known as symbols) but colors and character styles as well in just a few easy steps. This can be incredibly handy if you are sharing out a brand kit or a sticker sheet with your team. Or, simply wanting a way to reuse design elements of your own from project to project. Linked assets complement the workflow of linked components. When you modify a linked asset in the source document, all the consuming documents with linked assets receive update notifications. From there, you can preview and accept the updates.    

Here is a visual that depicts how to use linked assets in Adobe XD.

Linked assets
Use a linked asset

Create a linked asset

To create a linked asset, do the following:

  1. Create a single source of truth for your assets through populating the Assets panel the colors, character styles, and components in an XD cloud document.

  2. Click Share> Invite to Edit. In the Invite tab, add the email address of the invitees, add optional message if any, and click Invite.

  3. Click the Link Assets button for empty Assets panel or click  icon next to Assets panel for populated Assets panel.

  4. To add any XD cloud document to the Assets panel, select the document from Link Assets window. The assets (colors, character styles, and components) from the linked source cloud document are added to the Assets panel under its own filter named after the cloud document name. 

    Here is a visual that depicts how to create linked assets in Adobe XD.

    Linked asset
    Create a linked asset

Search and filter linked assets within linked cloud documents

You can search for both linked and local assets in the Assets panel. To search for linked colors, type either the assigned color name or the HEX code of the color that you want. Similarly, to search for linked character styles and linked components, type the string that matches with the asset name. Based on your search string, Adobe XD displays the relevant results in the Assets panel. 

To filter assets from the linked cloud document in both list and grid views, select the linked cloud document from the drop-down in the Assets panel.  The Assets panel filters and displays linked colors, linked character styles, and linked components from that filtered linked cloud document.

Here is a visual that depicts how to search and filter assets within linked cloud documents.

Search Linked Character Style using letters
Search Linked Character Style using letters

Work with linked colors and linked character styles

Similar to document colors and character styles, you could apply linked colors and linked character styles to selected elements on the canvas by selecting them in the Assets panel.

For example, if you want to modify the linked color or linked character styles in design files, follows these workflows:

Apply linked color as fill and border

Select an object in the active XD document, and then do one of the following:

  • Click a color in the Assets panel or right-click the color and select Apply as Fill.
  • To apply a color stroke (border), select the object, right-click a color in the Assets panel, and select Apply as Border.
Apply as fill
Apply linked color as fill and border

Edit linked colors and character styles in source document

You can edit linked Colors and linked character styles in the Assets panel. Right-click the linked color or linked character style in the Assets panel and select Edit in Source Document. The source document opens, and the linked color or linked character style is highlighted in the Assets panel (list view by default) in the source document. Modify the linked color or linked character style in the source document and preview the changes in the destination documents (cloud document). 

Edit Linked color in source document
Edit Linked color in source document

Highlight linked color/ linked character style on canvas

Highlight all instances of the object using the selected color/character style. Right-click the linked color/ linked character style in the Assets panel and select Highlight on Canvas.    

Highlight linked color on canvas
Highlight linked color on canvas

Copy HEX value for linked colors

To copy the HEX value of an existing linked color, right-click the linked color and select the #HEXValue. The Hex value is copied to the clipboard.    

Copy HEX value
Copy HEX value for linked colors

Rename a linked color/linked character style in source document

To rename a linked color/ linked character style in the source document in list view, do one of the following:

  • Double-click the linked color/ linked character style.
  • Right-click the linked color/ linked character style and select Rename.
Rename linked color
Rename a linked color/linked character style in the source document

Delete a linked color/linked character style in source document

You can delete linked colors/ linked character styles in the source document only if the linked color/ linked character style has a broken link. When you delete a linked color or linked character style, the linked color/ linked character style is removed from the Assets panel. All the objects that are linked to the deleted linked color or linked character style are not linked anymore and remain on the canvas.   

Delete linked color
Delete a linked color/linked character style in the source document

You can convert a broken linked color to a local color. Right-click the linked color in the Assets panel and select Make Local Color. All the objects that were previously linked to the broken linked color are now linked to the local color.

Any update to the linked color in the source document does not impact the local color.    

Make local color
Convert a broken linked color to a local color

Convert a broken linked character style to a document character style

You convert a broken linked character style to a local character style. Right-click the linked character style in the Assets panel and select Make Local Character Style.

All the objects that were previously linked to the broken linked character style are now linked to the document character style.

Any update to the linked character style in the source document does not impact the local character styles.

Convert broken linked character style
Convert a broken linked character style to a document character style

Preview linked color/linked character style updates

When a linked color/ linked character style is updated in the source document, the destination document receives an update notification indicated by a blue badge  icon in the Assets panel. 

Hover the mouse over the  icon on the linked color/ linked character style to:

  • Preview the updates and view the last modified date and source document details before committing the changes.
  • View the updated changes on both Assets panel thumbnails (list and grid views) and canvas in context of your designs.

Accept updates for a linked color/linked character style

You can accept updates for a linked color/ linked character style in list and grid views. To accept a single-color update, do the following:

  • Right-click the linked color/ linked character style and click Update.
Accept updates for a linked color
Accept updates for a linked color
  • Click the blue update  icon in the Assets panel. 

To accept multiple updates, click Update All.

Accept all updates
Accept all updates

Accept updates for a newly added linked color/linked character style

You can accept updates for a newly added linked color/ linked character style in source document. To accept the update, click the blue update  icon in the Assets panel.    

Accept updates for a newly added linked color
Accept updates for a newly added linked color

Work with linked components

Linked components replace what has been symbols in the past and make the task of building out repeated design elements infinitely more streamlined and powerful. Adobe XD introduces linked components (previously known as Symbols), design elements with unmatched flexibility. With linked components, you create and maintain repeated elements like a button as well as override a specific instance of that element for different contexts and layouts. Also, you can:

  • Modify the foundational element to propagate to all instances.
  • Resize an instance independently.
  • Swap a nested component as an override.
  • Link and edit components across documents.
  • Override:
    • Content properties (text and image fills)
    • Appearance properties (fill, border, effects, text style, and so on)
    • Layout of objects inside an instance (size, positioning, layer hierarchy, constraints)
    • Structure of an instance (adding and subtracting elements).

You can view linked components in both list and grid views of the Assets panel. 

For information on linked components, see Work with components in XD.

Delete a linked cloud document

To delete a linked cloud document, hover on the linked cloud document in the Assets panel filter and click the  button.

Deleting a Linked cloud document
Delete a linked cloud document

Once a linked cloud document is removed from the Assets browser:

  • Linked assets from the cloud document are removed from the Assets panel.
  • Linked cloud document filter is removed from the Assets panel.
  • All linked components on the canvas are converted to regular groups.

When you delete an XD source cloud document, all subscribing documents are notified of broken links on switching the focus. Click Relink from the context menu of the Assets panel.

The Assets browser displays all the available cloud documents that could be relinked. Select an XD cloud document that has the same element IDs so that all the broken assets are now relinked to the new document. The new relinked source document is added as a filter.

If the relinked XD cloud document does not have any or has some of the element IDs, then only the available assets are linked. The remaining ones continue to have a broken link.

Relink missing linked assets
Relink missing cloud documents

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策