Asset Libraries

Assets Libraries allows you to store elements and styles that are likely to be reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize your the pieces of your designs and speed your workflow.

File library

Each file has a File Library that allows to store assets that belong to it. You can find File Libraries at the workspace. To access them click the assets panel icon at the bottom of the left toolbar or press Alt/⌥ + i.

libraries

Asset types

At Penpot you can store four type of assets: components, graphics, colors and typographies:

  • Components: A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). Learn more at the components section.
  • Graphics: Both bitmap and vector images can be stored at the Graphics section.
  • Colors: Create your color styles and use them on fills and strokes.
  • Typographies: Penpot allows you to save typography styles with a set of properties that can be reused. You can always unlink a typography style maintaining the properties for the text layer.

Add assets to libraries

You can use the “+” icon to add assets to most of the categories but still each asset type has its particularities:

  • Components: Each Main Component is automatically stored at the library so there is no button or specific action to do it. Learn more about components at the components section.
  • Graphics: Click the “+” to inspect your local files and choose one or more images to upload them to the library.
  • Colors: Click the “+” to launch the color picker and add a color to the library. Learn more about managing color.
  • Typographies: All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.

libraries

Edit assets

Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.

  • Components: Rename, duplicate, delete, group.
  • Graphics: Rename, delete, group.
  • Colors: Rename, edit, delete.
  • Typographies: Rename, edit, delete.

libraries

Use assets

  • Components: Drag the component directly from the library to the viewport.
  • Graphics: Same as components, just drag the selected graphic to the viewport.
  • Colors: With shape or a text selected click a color from the library to apply it as a fill. If you press Shift while click the color will be applied to the stroke.
  • Typographies: With a text layer selected click a typography style from the library to apply it.

libraries

Manage and organize libraries

Learn how to better view and organize your assets:

View modes (list and grid)

You can switch between list and grid views.

  • Grid view: With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.
  • List view: Optimized to identify the assets by their names and view more assets at the same time.

libraries

Ordering

Click the ordering button to change the alphabetical order.

libraries

Search assets

Use the Search assets box to filter the assets with names that match what you write.

libraries

Filter assets

You can decide whether to show all asset types or only one (components, graphics, colors or typographies).

libraries

Multiselect assets

Press Ctrl/⌘ + left click to select multiple assets and be able to perform operations on them simultaneously.

Grouping assets

Penpot allows you to create groups inside libraries. To create groups you just have to use the slash-separated naming convention and the groups will be automatically created. e.g. group / subgroup / asset_name.

The other (maybe simpler) way to create groups is right click with more than one asset selected and then click “Group” at the contextual menu.

libraries

Shared libraries

You can turn any regular file into a Shared Library. That means that the File Library of this file will be available to be used in any other files of any project of the team.

To add a Shared Library from another file launch the libraries panel, where you will be able to search and select the available libraries.

libraries

Shared libraries will be displayed at the libraries panel. Click at the link icon at the right of the Shared Library name to go to the file where the library is and edit its contents.

libraries