Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve readability #39

Merged
merged 4 commits into from
Nov 23, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions user-guide/libraries/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@ title: 10· Libraries
---

<h1 id="libraries">Asset Libraries</h1>
<p class="main-paragraph">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.</p>
<p class="main-paragraph">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.</p>

<h3 id="file-library">File library</h3>
<p>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 <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</p>
<p><img src="/img/libraries-asset-types.png" alt="libraries" /></p>

<h3 id="asset-types">Asset types</h3>
<p>At Penpot you can store four type of assets: components, graphics, colors and typographies:</p>
<p>In Penpot you can store four type of assets: components, graphics, colors and typographies:</p>
<ul>
<li><strong>Components:</strong> 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 <a href="/user-guide/components/">components section</a>.</li>
<li><strong>Graphics:</strong> Both bitmap and vector images can be stored at the Graphics section.</li>
<li><strong>Colors:</strong> Create your color styles and use them on fills and strokes.</li>
<li><strong>Typographies:</strong> 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.</li>
<li><strong>Typographies:</strong> 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.</li>
</ul>

<h3 id="add-assets-to-library">Add assets to libraries</h3>
<p>You can use the “+” icon to add assets to most of the categories but still each asset type has its particularities:</p>
<h3 id="add-assets-to-library">Adding assets to libraries</h3>
<p>You can use the “+” icon to add assets. Each of the categories have thier own specific action:</p>
<ul>
<li><strong>Components:</strong> 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 <a href="/user-guide/components/">components section</a>.</li>
<li><strong>Components:</strong> 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 <a href="/user-guide/components/">components section</a>.</li>
<li><strong>Graphics:</strong> Click the “+” to inspect your local files and choose one or more images to upload them to the library.</li>
<li><strong>Colors:</strong> Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/color/">managing color</a>.</li>
<li><strong>Typographies:</strong> 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.</li>
Expand Down Expand Up @@ -74,14 +74,14 @@ title: 10· Libraries
<p>Press <kbd>Ctrl/⌘</kbd> + left click to select multiple assets and be able to perform operations on them simultaneously.</p>

<h4>Grouping assets</h4>
<p>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. <code>group / subgroup / asset_name</code>.</p>
<p>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.</p>
<p>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. <code>group / subgroup / asset_name</code>.</p>
<p>Another way to create a group is to right click with more than one asset selected and then click “Group” in the contextual menu.</p>
<p><img src="/img/library-groups.png" alt="libraries" /></p>

<h3 id="shared-libraries">Shared libraries</h3>
<p>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.</p>
<p>To add a Shared Library from another file launch the libraries panel, where you will be able to search and select the available libraries.</p>
<p>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.</p>
<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries.</p>
<p><img src="/img/shared-libraries.gif" alt="libraries" /></p>

<p>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.</p>
<p>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.</p>
<p><img src="/img/shared-libraries.png" alt="libraries" /></p>