Organizing and reusing design elements using Library panel

The Library panel in Muse offers a convenient way to store and manage common page elements. Add items to the Library so that you can quickly access them and add the content to pages in your site. The Library can contain many types of elements, including logos, site images, color swatches, guides, customized widgets, embedded HTML, paragraph, character, and graphic styles. In this article, you'll get an overview of how to use the Library panel to streamline your design process.

Creative Cloud Add-ons allows you to choose from a wide range of design elements that help enrich your design. To download, see Creative Cloud Add-ons for Adobe Muse.

You can access the Library panel while in Design view. Choose Window > Library or click the Library tab in the docked panel set to make the panel active.

Manage folders in the Library panel

Create a new folder

To begin using the Library panel, you'll create a new folder. Follow these steps:

1. Click the Create Folder button (folder icon) in the bottom of the Library panel.

2. Enter a descriptive name in the field next to the folder icon.

Folders are sorted alphabetically in the Library panel by name, so you can use similar names to keep related items together in the list.

At any time, you can double-click a folder in the library to rename it.

Once you've created a folder, you can add items to the Library.

If you are planning on adding several items to the Library, you can create and name a set of empty folders before adding the items.

Add page elements to folders

To add elements to the Library so that you can quickly access them and add them to other pages, select any element on a page. If you are selecting multiple items, press and hold the Shift key or click-drag the Selection tool to select the desired elements.

Choose from one of two options to add elements to the Library:

Option 1:

1. Right-click on the selected element(s), choose Add to Library, and then select the folder to save the library item.

The selected item(s) are added to the folder and a preview is displayed in the Library panel.

2. Enter a descriptive name for the element in the provided field.

Or, use this workflow to add the selected item(s) to the Library:

Option 2:

1. While the elements are selected, click the Add Selected Item(s) button (page turn icon) in the lower right corner of the Library panel.

2. Enter the name of the element in the provided field.

Once a folder contains at least one item, you can click the downward arrow to the left of the folder name to toggle between expanding and collapsing the folder's contents.

In larger project files, you can collapse all the folders in the Library panel, making the list of elements shorter, easier to scan, and more manageable. To open or close all the folder in the Library panel, option + click the arrow (alt + click on Windows).

Rename and organize folders

As mentioned previously, you can double-click a folder to rename it at any time. If you are storing elements for a specific client or site section, it is helpful to name all the folders in the Library panel so that the folders are listed next to each other.

It is a best practice to name folders and Library items descriptively — do not use the default untitled names assigned by Muse. Adding descriptive names enables you to quickly locate items by scanning through the list of folders. This practice also lets you search for specific library items, as described in the next section.

Manage assets in the Library panel

Search the Library panel

Once you've added many different elements to the Library panel, it can become challenging to remember which folder contains an item you want to use. You can always expand each folder to view its contents, but this can become time consuming when working with larger libraries.

To search the Library panel, type any part of the name of the item in the Filter By Name field.

Any matching items are displayed in the list below in expanded library folders.

When you are finished searching, click the X button to clear the field and see the entire list of items in the Library panel again.

Import assets

Custom Library assets can be shared between users, making it easy to collaborate with other designers and standardize the look and feel of site designs. The exported Muse Library files are saved with the .mulib file extension.

To import a Muse Library file into your current project, double-click a .mulib file. Muse launches (if not already open) and the contents of the library file are added to the Library panel.

Or follow these steps:

1. Click the Import Muse Library button in the bottom left corner of the Library panel.
2. In the Import Library Items dialog box that appears, browse to select a .mulib file on your desktop, and then click Open.

The imported folder(s) appear in the Library panel, ready for use in the current file.

If you'd like to import library items while not working in Design view, you can also choose File > Open Site and then browse to select one or more .mulib files in the Open dialog box that appears.

Use Library items in your designs

You can store and manage various kinds of assets including graphics, vector images, forms, headers, footer elements and so on. You can use these items for your designs in two ways:

Placing library items:

Select the item that you want to use in your design. Drag the Library item into the Design view.

Placing library items with breakpoints:

If your Library item includes breakpoints, you can place the items in your layout along with the breakpoints. To use Library items with breakpoints, click the plus symbol next to the item. Drag and drop the item in the Design view.

The breakpoints from the Library item are added to the page. This feature allows you to add a set of breakpoints across master and child pages, with a single click. You can also retain the breakpoints across different Adobe Muse projects.

If there are existing breakpoints in a page, and if you add a Library item with breakpoints, all the breakpoints are included in the page.

Export images and other assets

Once you've added content to the Library panel, you can export it as a self-contained file in order to share it with other designers (or to speed your own design process when working on multiple machines).

It's important to note that content linked to your website (rather than embedded in it) such as Adobe Edge Animate OAM files, video clips, and other linked content is not included in the .mulib file you create when exporting the elements from the Library panel.

Follow these steps to export a Muse Library file that also contains image files:

1. In Design view, create the element or set of elements to add to your Library. This set of elements may include rectangles, text, and image files.
2. Before adding the item(s) to the Library panel, open the Assets panel (Window > Assets), right-click on the image(s) you want to export, and choose Embed Link.

Note: If the Library item(s) you want to export do not contain image files, you can skip Step 2.

3. Select the desired elements and add them to your Library.
4. Click the export button at the bottom of the Library panel.

A .mulib file is created and saved to your desktop (or wherever you specify). Distribute the .mulib file via email or file transfer to another designer or team member.

When the recipient opens the .mulib file and then adds the Library item to a page, the images appear in the Assets panel as embedded images.

Create custom swatches

Using the Library panel, you can save an element that contains all of the colors used in a site design. You can also select a custom set of guides and add them to the Library panel. These practices are very helpful for standardizing the look and feel of your site projects.

Follow these steps to import a specific set of colors into a new .muse file to speed up your design process.

1. Open the .muse file that contains the colors you want to store. Use the Rectangle tool to create a single rectangle shape, and then Option/Alt-drag the rectangle to duplicate it several times. Set the fill of each rectangle to one of the site's primary color values, using the eyedropper tool in the Fill menu.
2. Create a new folder in the Library panel to store the color swatches.
3. Use the Selection tool to select the entire set of rectangles. You can either right-click the selected group of rectangles and choose Add to Library or click the Add Selected Item(s) button at the bottom of the Library panel. Enter a descriptive name in the field to label the swatch set.
4. Select the folder that contains the swatches and click the Export button at the bottom of the Library panel to export a Muse Library file with the selected content. Send the .mulib file to your team member via email attachment or transfer the file via a USB drive.
5. The recipient of the .mulib file launches Muse, creates a new site, opens the Library panel, and clicks the Import button to import the file containing the swatches to their Library. (Alternatively, they can choose File > Open Site and open the .mulib file.)
6. Next, they drag the element containing the colors from the Library panel and onto a page to add the swatches to the Swatch panel.
7. The recipient then opens the Swatches panel (Window > Swatches), right-clicks on the Swatches panel and chooses Delete All Unused from the context menu that appears.

After deleting the unused swatches in the Swatch panel, delete the library element from the page, if desired.

Create custom thumbnails

The preview pane of the Library panel is designed to give you a visual indicator of the selected content, which makes it easier to select the items from the Library and add them to pages. However, the preview pane is set up to display files that are basically square. You may find that if you add a longer or taller element or set of elements to the Library the resulting preview image thumbnail is scaled.

If desired, you can create a different thumbnail image to use as the preview for the Library item. Follow these steps:

1. Use the Mac Finder or Windows Explorer to search for the following directory on your computer:

• Mac: ~/Library/Preferences/Adobe/AdobeMuseLibrary/
• Windows: %AppData%/AdobeMuseLibrary/

2. Locate the folder name that corresponds to the Library folder in Muse that you want to update. In this example, the library folder is named nav - background.
3. Open the folder to see its contents. It contains a PNG file.
4. Using an image-editing program such as Photoshop or Fireworks, open the PNG file. Edit the PNG file as desired.
5. Save the PNG file in its current location and quit the image-editing program.
6. Return to Muse and select the item in the Library. The PNG file you edited is displayed in the preview pane.

To learn more about working with Adobe Muse, visit the Adobe Muse Help and Tutorials page and check out the Adobe Muse Support Forum.