mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 14:00:37 +00:00
f40686d205
Document stroke per side and its tokens, path editor changes, image bounds resize, configurable shortcuts, tokens from a shared library as tokens source, canvas background color tokens, Penpot board presets, the 3x export scale, the text editing context menu, the organization and team selector, the hide resolved comments option, account security and the Check for updates option. Fix outdated notes about WebGL exports, background blur exports, library token import and path editor shortcuts. Add the images for these sections and remove the ones no longer used. AI-assisted-by: claude-opus-5-5
101 lines
6.8 KiB
Plaintext
101 lines
6.8 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, 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>
|
|
|
|
<h4 id="tokens-from-library">Use tokens from a shared library</h4>
|
|
<p>A file can use the design tokens of a connected shared library instead of its own. This keeps one source of truth: tokens are defined once in the library, and every file that uses it gets the same tokens, sets and themes.</p>
|
|
<p>A file uses one tokens source at a time: its own tokens or the tokens of one connected library.</p>
|
|
<ol>
|
|
<li>Connect the library to the file (see <a href="#shared-libraries">Connect shared libraries</a>).</li>
|
|
<li>Open the <strong>Libraries</strong> panel from the assets tab. The <strong>This file</strong> tab lists the file library and the connected libraries, with how many tokens, sets and themes each one has.</li>
|
|
<li>Click <strong>Set as tokens source</strong> next to the library. The current source is labelled <strong>Tokens source</strong>.</li>
|
|
</ol>
|
|
<figure>
|
|
<img src="/img/libraries/libraries-tokens-source.webp" alt="This file tab of the Libraries modal with a connected library set as tokens source">
|
|
</figure>
|
|
<p>The button only appears for libraries that have tokens of their own. A library that already uses tokens from another library cannot be a tokens source.</p>
|
|
<p>You can also change the source from the top of the <strong>Tokens</strong> tab, which shows <strong>Source:</strong> followed by <strong>This file</strong> or the library name. In the <strong>Assets</strong> tab, a tokens icon marks the library that is the current source.</p>
|
|
|
|
<h5>What you can do with library tokens</h5>
|
|
<ul>
|
|
<li><strong>Apply</strong> them to layers, as with local tokens.</li>
|
|
<li><strong>Activate themes and sets.</strong> The active themes and sets are saved in each file, so two files can use the same library with different themes. When you set a library as source, the file starts with the themes and sets active in the library.</li>
|
|
<li><strong>Edit them in the library.</strong> From a file that uses library tokens you cannot create, edit, rename or delete tokens, sets or themes. Use the open-in-new-tab button next to the source name, or <strong>Edit themes</strong> in the theme menu, to open the library on its Tokens tab.</li>
|
|
</ul>
|
|
|
|
<h5>How changes reach your file</h5>
|
|
<p>Token changes in the library reach the files that use it right away. You do not need to accept them in <strong>Updates</strong>, which only lists components, colors and typographies. When sets or themes are added, removed or renamed in the library, Penpot shows a notice in the file.</p>
|
|
<p class="advice">If a token applied in your file is renamed or deleted in the library, the layer keeps its value but the token appears as missing. Apply the new token again.</p>
|
|
|
|
<h5>Switching back to the file's own tokens</h5>
|
|
<p>Click <strong>Set as tokens source</strong> on the <strong>File library</strong> row. The file's own tokens were kept while the library was the source, so they come back. Tokens applied from the library appear as missing unless the file has tokens with the same names. Disconnecting a library that is the tokens source also switches the file back to its own tokens.</p>
|