Files
penpot/docs/user-guide/design-systems/libraries.njk
2025-10-28 11:04:09 +01:00

73 lines
3.7 KiB
Plaintext

---
title: Libraries
order: 2
desc: Use Penpot's libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free!
---
<h1 id="libraries">Libraries</h1>
<p class="main-paragraph">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.</p>
<h3 id="file-libraries">File libraries</h3>
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
<p>You have two ways to access the file library from the file <a href="/user-guide/first-steps/the-interface/#interface-workspace">workspace</a>:</p>
<ul>
<li>Click the assets tab icon at the left sidebar.</li>
<li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
</ul>
<figure>
<img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
</figure>
<h3 id="shared-libraries">Shared libraries</h3>
<h4>Publish as shared library</h4>
<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
<p>There are two ways to publish a library:</p>
<ul>
<li>Using the file main menu.</li>
<li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
</ul>
<figure>
<img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
<figcaption>Publishing a library from the main menu</figcaption>
</figure>
<figure>
<img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
<figcaption>Publishing a library from the libraries panel</figcaption>
</figure>
<h4>Unpublish a shared library</h4>
<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>
<h4>Library updates</h4>
<p></p>
<figure>
<img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
</figure>
<h4>Connect shared libraries</h4>
<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/design-systems/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
<figure>
<video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
<source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
</video>
</figure>
<h4>Disconnect shared library</h4>
<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
<figure>
<img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
</figure>
<h4>Use shared libraries</h4>
<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
<figure>
<img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
</figure>
<h4>Open shared library file</h4>
<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
<figure>
<img src="/img/libraries/libraries-open.webp" alt="Open libraries">
</figure>