🎉 Add libraries section

user-guide/code-mode/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 14· Code mode
+title: 15· Code mode
 ---
 
 <h1 id="codemode">Code mode</h1>

user-guide/comments/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 15· Comments
+title: 16· Comments
 ---
 
 <h1 id="comments">Comments</h1>

user-guide/components/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 12· Components
+title: 13· Components
 ---
 
 <h1 id="components">Components</h1>

user-guide/history/history.njk

@@ -1,5 +1,5 @@
 ---
-title: 10· History
+title: 11· History
 ---
 
 <h1 id="history">History</h1>

user-guide/libraries/index.njk

@@ -0,0 +1,87 @@
+---
+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>
+
+<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>
+<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>
+</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>
+<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>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>
+</ul>
+<p><img src="/img/assets-add.gif" alt="libraries" /></p>
+
+<h3 id="edit-assets">Edit assets</h3>
+<p>Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.</p>
+<ul>
+  <li><strong>Components:</strong> Rename, duplicate, delete, group.</li>
+  <li><strong>Graphics:</strong> Rename, delete, group.</li>
+  <li><strong>Colors:</strong> Rename, edit, delete.</li>
+  <li><strong>Typographies:</strong> Rename, edit, delete.</li>
+</ul>
+<p><img src="/img/assets-edit.gif" alt="libraries" /></p>
+
+<h3 id="edit-assets">Use assets</h3>
+<ul>
+  <li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
+  <li><strong>Graphics:</strong> Same as components, just drag the selected graphic to the viewport.</li>
+  <li><strong>Colors:</strong> With shape or a text selected click a color from the library to apply it as a fill. If you press <kbd>Shift</kbd> while click the color will be applied to the stroke.</li>
+  <li><strong>Typographies:</strong> With a text layer selected click a typography style from the library to apply it.</li>
+</ul>
+<p><img src="/img/assets-use.gif" alt="libraries" /></p>
+
+<h3 id="manage-libraries">Manage and organize libraries</h3>
+<p>Learn how to better view and organize your assets:</p>
+
+<h4>View modes (list and grid)</h4>
+<p>You can switch between list and grid views.</p>
+<ul>
+  <li><strong>Grid view:</strong> With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.</li>
+  <li><strong>List view:</strong> Optimized to identify the assets by their names and view more assets at the same time.</li>
+</ul>
+<p><img src="/img/assets-viewmode.gif" alt="libraries" /></p>
+
+<h4>Ordering</h4>
+<p>Click the ordering button to change the alphabetical order.</p>
+<p><img src="/img/assets-order.gif" alt="libraries" /></p>
+
+<h4>Search assets</h4>
+<p>Use the Search assets box to filter the assets with names that match what you write.</p>
+<p><img src="/img/assets-search.png" alt="libraries" /></p>
+
+<h4>Filter assets</h4>
+<p>You can decide whether to show all asset types or only one (components, graphics, colors or typographies).</p>
+<p><img src="/img/assets-filter.gif" alt="libraries" /></p>
+
+<h4>Multiselect assets</h4>
+<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><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><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><img src="/img/shared-libraries.png" alt="libraries" /></p>

user-guide/prototyping/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 11· Prototyping
+title: 12· Prototyping
 ---
 
 <h1 id="interactions">Prototyping interactions</h1>

user-guide/view-mode/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 13· View mode
+title: 14· View mode
 ---
 
 <h1 id="viewmode">View mode</h1>