Asset Libraries

Asset Libraries allow you to store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.

File library

Each file has a File Library that allows assets that belong to it to be stored. 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.

Asset Types

In 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 reusable properties. You can always unlink a typography style maintaining the properties for the text layer.

Adding Assets to Libraries

You can use the “+” icon to add assets. Each of the categories have their own specific action:

• Components: Each Main Component is automatically stored in 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.

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.

Using 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 Alt (or ⌥ in macOS) 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.

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.

Ordering

Click the ordering button to change the alphabetical order.

Search assets

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

Filter assets

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

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 a group, use the slash-separated naming convention and the group will be created automatically. e.g. group / subgroup / asset_name.

Another way to create a group is to right click with more than one asset selected and then click “Group” in the contextual menu.

You can also move assets from or to groups by dragging them.

Shared libraries

You can turn any regular file into a Shared Library. This means that the File Library of this file will be available to other files of projects being worked on by the team.

To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries.

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