Use the Assets panel to manage assets and symbols in your project.

Manage assets easily using the Assets panel

You can use the Assets panel to manage all the assets in your project.

The Assets panel displays assets (such as colors, gradients, and character styles) that you add from your project. It also displays any symbols (a special type of linked asset) that you create in XD.

To open the Assets panel, click  in the toolbar, or press Command + Shift + Y (on Mac) or Ctrl + Shift + Y (on Windows).

The Assets panel
The Assets panel

A. Colors B. Character Styles C. Symbols D. Add assets E. Icon indicating a missing or disabled font 

Add and remove assets

To add colors and gradients (linear or radial) to the Assets panel: Select an object or a group of objects on the artboard, and click the + icon next to Colors in the Assets panel. 

To add character styles to the Assets panel: Select text or a text box on the artboard, and click the + icon next to Character Styles in the Assets panel.

To delete an asset from the Assets panel: Select the asset in the Assets panel, right click (on Windows) or Ctrl click (on Mac) and select Delete from the context menu.

You can also select an artboard or a group of artboards and click the + icon to add all the colors and character styles from the artboards to the Assets panel. 

Observação:

Colors, gradients, character styles, and symbols added to the Assets panel remain there even if you delete the asset itself from the artboard - allowing you to reuse the asset whenever you need it next. 

Label assets

You can add custom labels to the assets in your Adobe XD file. In the Assets panel, switch to list view and click the label to rename it. For example, you can customize the name of a color from the HEX value to Title Background Color.

When you rename Symbols, the change applies to all instances of the symbol in the Layers panel for better identification.

Adobe XD also allows you to add emoticons to the labels.

Label assets
Label assets

Apply colors from the Assets panel

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 character styles from the Assets panel

Select a text object on your artboard. In the Assets panel, click a character style. 

Reorder elements in the Assets panel

You can reorder the assets such as colors, character styles, and symbols in your project. You can move the frequently used assets to the top of the list or arrange them as groups.

Reorder elements in the Assets panel
Reorder elements in the Assets panel
  1. In the Assets panel, click-and-hold the assets and drag them across the panel.

  2. If you want to move multiple assets across the panel, hold down Ctrl (Win) or Cmd (Mac) and multi-select assets.

Using symbols

A symbol is an object that can be reused multiple times across artboards in your document. All instances of a symbol used in your project are linked. That is, any update made to one instance is instantly reflected in all other instances.

To convert an object into a symbol, perform one of the following actions:

  • Right-click the object and select Make Symbol.
  • Select the object and press Command + K (on Mac), or Ctrl + K (on Windows).
  • On a Mac, select the object and then select Object > Make Symbol.
  • Select the object and click + in the Symbols library.
Symbols library. Click '+' to make a selected object a symbol and add to library.
Symbols library. Click '+' to make a selected object a symbol and add to library.

Edit symbols

To enter symbol editing mode, double-click a symbol. In this mode, the symbol is displayed with a thicker border. You can make changes to style, size, shadow, and/or position and see that these changes reflect in all linked instances.

If your symbol is a group of objects, then in symbol editing mode, you can edit every object in the group. 

To delete a symbol from the Symbols library, right-click the symbols and select Remove Symbol.

Reuse symbols

To reuse a symbol, drag it from the Symbols library onto the artboard. Alternatively, copy and paste a symbol within an artboard, or from one artboard to another. All linked instances of a symbol are indicated with a green border. You can also copy and paste symbols from one XD document to another. 

To make style changes to a symbol instance without affecting the others, right-click the instance and select Ungroup Symbol. You can then go ahead and make the changes. 

To make text or bitmap changes to a symbol instance, you don't have to ungroup the symbol. For more information, see Override text and bitmaps for symbol instances.

Observação:

If you ungroup a symbol and create a symbol using the same objects again, a new symbol is created.

Override text and bitmaps for symbol instances

You can make text and bitmap changes to instances of symbols without impacting the original. Overriding allows you to reuse the same symbol across your XD documents with individual text or bitmaps per symbol instance.

Overriding is especially useful when you create buttons or other navigation elements that share the design element but need different text blocks or images.

To override text or bitmaps in symbol instances, select the text and type in your new text. Or, replace a bitmap in a symbol instance with another bitmap.

The change to the text or bitmap occurs only in that single instance. It does not affect the original symbol.

To propagate text or bitmap changes in a symbol instance to the rest of the linked symbols, right-click the symbol and select Push Overrides.

Replace symbols

You can replace all instances of a symbol with another symbol. Drag a symbol from the Assets panel on to another symbol. When you drag it on top, the icon changes into an arrow indicating that the symbol and all its instances are replaced.

Replace all instances of a symbol with another symbol
Replace all instances of a symbol with another symbol

Using linked symbols

With linked symbols, you can share symbols across documents and maintain a single source of truth for UI kits, style guides, and sticker sheets. When a linked symbol is updated in the source document, Adobe XD notifies whenever you have copied the source linked symbol in another document.

For information on how to use linked symbols, see Work with linked symbols.

Search and filter assets and symbols

Filter assets based on asset type

You can filter assets from the Assets panel in Adobe XD. By default, all the assets are displayed in the panel. You can filter the assets by type using the drop-down arrow in the Assets panel. Click the drop-down arrow and select one of the asset types: Color, Character Style, or Symbols. Based on your selection, the specific asset types are listed.

Filter assets in Adobe XD
Filter assets in Adobe XD

Search assets

You can search for colors, character styles, and symbols in the Assets panel. To search for colors, type the hex code of the color that you want. Similarly, to search for character styles and symbols, type the string that matches with the asset name. Based on your search string, Adobe XD displays the relevant results in the Assets panel. 

Search colors using the hex code in Adobe XD
Search colors using the hex code

Adobe XD remembers the last five search queries for each session. These queries appear in the search history.

Highlight and find assets and symbols

Adobe XD allows you to quickly highlight and find elements. To find where all an asset has been used in a project, select the color or character style or the symbol in the Assets panel. Right-click and select Highlight on Canvas. Wherever the asset has been used, the element is highlighted in the artboard.

Highlight and find assets on the canvas
Highlight and find assets on the canvas

This functionality is useful to identify wherever you have used a particular asset or symbol in your Adobe XD file. 

When a symbol is not used anywhere in the project, the application displays the message: "0 copies of this symbol is used."

Reverse highlight selections in Asset panel

Adobe XD also allows you to reverse highlight which asset is being used for an element that you select. When you select an object on the canvas, you can quickly find the color, character style, or the symbol that is used for the element.

To reverse highlight from an element, select the element from the artboard. Right-click the element, and select one of the following options:

  • Select Color: Highlights the color that has been used, in the Assets panel.
  • Select Character Style: Highlights the character style that has been used in the element.
  • Select Symbol: Matches the symbol that is already added to the panel.

The application highlights the assets that are used for the selected element.

Reveal assets used in a selected object in Adobe XD
Reveal assets used in a selected object

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online