Assets

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

Asset types

In Penpot you can store different type of assets:

  • Components: A component is a layer or group of layers that can be reused multiple times across files (projects and teams in the future). Learn more at the components 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.
  • [Deprecated] Graphics: In Penpot versions older than 2.0, bitmap and vector images can be stored at the Graphics section. This type was deprecated in favor of components.

Add assets to libraries

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

Components

There are two ways to add components to an assets library:

  1. Main components are automatically stored in the local library at the moment of being created. Learn more about components at the components section.
  2. Clicking the “+” to launch import an image that will be added as a component.

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.

Tip: If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.

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.
  • Colors: Rename, edit, delete.
  • Typographies: Rename, edit, delete.

Use Assets

  • Components: Drag the component directly from the library to the viewport.
  • Colors: With a 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 clicking, the color will be applied to the stroke.
  • Typographies: With a text layer selected click a typography style from the library to apply it.

Organize assets

Learn how to better view and organize your assets:

Assets list views

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.

Sort assets

Click the sort 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 of your choice (components, colors or typographies).

Multiselect assets

Group assets

There are two ways to create groups in a library.

  1. With slashes (/): Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".
  2. With the "Group" option: Select one or more assets at the library, then right click to show the menu and then select "Group".

Ungroup assets

You can ungroup the assets the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.

Drag assets to groups

One very direct way to move assets between groups at the libraries is by dragging them.