🎉 More user guide

user-guide/color/index.njk

@@ -0,0 +1,31 @@
+---
+title: 09· Managing color
+---
+
+<h1 id="color">Managing color</h1>
+<p class="main-paragraph">At Penpot there are two main tools to manage color: the color picker and the color palette.</p>
+
+<h3 id="color-picker">Color picker</h3>
+<p>Here you have the anatomy of the color picker:</p>
+<p><img src="/img/color-picker.png" alt="color picker" /></p>
+<ol>
+  <li><strong>Eyedropper:</strong> allows you to pick any color of the objects at the viewport.</li>
+  <li><strong>Color profiles:</strong> select between RGB, the harmony wheel or HSV.</li>
+  <li><strong>Gradients:</strong> set linear or radial gradients.</li>
+  <li><strong>Sliders:</strong> easily manage color and opacity.</li>
+  <li><strong>Textboxes:</strong> if you need to set values with precision.</li>
+  <li><strong>Shortcuts:</strong> switch between recent colors and libraries.</li>
+  <li><strong>Color palette:</strong> a quick launcher of the palette with the selected library.</li>
+</ol>
+
+<h3 id="color-palette">Color palette</h3>
+<p>The color palette allows you to have a selected color library at plain sight. Use the menu to easily switch between libraries.</p>
+<p><img src="/img/color-palette.gif" alt="color palette" /></p>
+<p>There are three ways to show/hide the color palette:</p>
+<ol>
+  <li>From the <strong>main menu</strong> at the top left navbar.</li>
+  <li>Pressing the color palette button the <strong>toolbar</strong>.</li>
+  <li>Using the color palette <strong>launcher</strong> at the color picker (see previous section).</li>
+</ol>
+<p>Use the <strong>menu</strong> to easily switch between libraries.</p>
+<p>Switch between big and small <strong>thumbnails sizes</strong>.</p>

user-guide/exporting/index.njk

@@ -0,0 +1,29 @@
+---
+title: 08· Exporting
+---
+
+<h1 id="exporting">Exporting</h1>
+<p class="main-paragraph">At Penpot you can set export presets for different formats and scales.</p>
+
+<p class="advice">Importing files and multiple exports are among the main priorities of the Penpot team. Related features are coming soon.</p>
+
+<h3 id="export">How to export</h3>
+<p>To export an object you need to select it and at the Design panel add an export preset pressing the “+” button of the Export section.</p>
+<p>Export presets can be also found at the <strong><a href="/user-guide/the-interface/#viewmode-interface" target="_blank">View mode</a></strong> with the code tab activated.</p>
+<p><img src="/img/export-howto.gif" alt="export" /></p>
+
+<h4>Remove export preset</h4>
+<p>To <strong>remove an export presets</strong> you have to select the object and then press the “-” button at the export preset you want to remove.</p>
+<p><img src="/img/export-remove.gif" alt="export" /></p>
+
+<h3 id="export">Export options</h3>
+<p>The anatomy of an export setting:</p>
+<ul>
+  <li><strong>Size:</strong> options for the most common sizing scales.</li>
+  <li><strong>Suffix:</strong> especially useful if you are exporting at different scales.</li>
+  <li><strong>File format:</strong> PNG SVG, JPEG.</li>
+</ul>
+
+<h3 id="export">Multiple export presets</h3>
+<p>You can set as many export presets you need for the same object. Set multiple exports to get the same object in different scales and/or formats with just one click.</p>
+<p><img src="/img/export-multiple.png" alt="export" /></p>

user-guide/grids-and-layouts/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 6· Grids & layouts
+title: 06· Grids & layouts
 ---
 
 <h1 id="grids-layouts">Grids and layouts</h1>

user-guide/history/history.njk

@@ -0,0 +1,16 @@
+---
+title: 10· History
+---
+
+<h1 id="history">History</h1>
+<p class="main-paragraph">The history panel keeps track of the latest changes on an opened file.</p>
+
+<h3 id="history-view">View history</h3>
+<p>To view the recent history of a file at the workspace press <kbd>Ctrl/⌘</kbd> + <kbd>H</kbd> or click at the history icon on the toolbar at the left.</p>
+<p>At the history you can see items with information about the last changes. At first sight you have object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item further details are shown.</p>
+<p><img src="/img/history-item.gif" alt="history" /></p>
+<p><strong>Note:</strong> History panel is still in a very early state and shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the History as well.</p>
+
+<h3 id="history-navigate">Navigate history</h3>
+<p>To navigate through the history press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
+<p><img src="/img/history-navigate.gif" alt="history" /></p>

user-guide/index.njk

@@ -13,13 +13,13 @@ eleventyNavigation:
 
 <ul class="intro-sections">
   <li>
-    <a href="/user-guide/01-introduction/1-1-quickstart">
+    <a href="/user-guide/introduction/quickstart">
       <h3>Quickstart</h3>
       <p>Ways to start with Penpot</p>
     </a>
   </li>
   <li>
-    <a href="/user-guide/01-introduction/02-the-interface/">
+    <a href="/user-guide/the-interface/">
       <h3>The interface</h3>
       <p>Penpot's main areas and features</p>
     </a>

user-guide/interactions/index.njk

@@ -0,0 +1,33 @@
+---
+title: 11· Prototyping
+---
+
+<h1 id="interactions">Prototyping interactions</h1>
+<p class="main-paragraph">Penpot allows you to prototype interactions by connecting artboards. Learn how to build interactive prototypes to visualize how users navigate through your screens.<p>
+
+<p class="advice">Advanced interactions are among the main priorities of the Penpot team. Related features will be implemented soon.</p>
+
+<h3 id="interactions-add">Adding interactions</h3>
+<p><img src="/img/interactions-add.gif" alt="prototyping" /></p>
+<p>Add interactions following this simple steps:</p>
+<ol>
+  <li>Open a file with at least two artboards.</li>
+  <li>Activate <strong>Prototype mode</strong> clicking at the tab at the right sidebar.</li>
+  <li><strong>Select</strong> a shape, artboard or group that will trigger the interaction.</li>
+  <li><strong>Drag</strong> a connection to another artboard or <strong>choose an artboard</strong> from the “Navigate to” selector.</li>
+</ol>
+
+<h3 id="interactions-view">View interactions</h3>
+<p><img src="/img/interactions-view.gif" alt="prototyping" /></p>
+<p>To see the interactive prototype in action go to the View mode that can be accessed by clicking the play button at the top right.</p>
+<h4>View options</h4>
+<p>At the navbar you can find options to show the interactive areas.</p>
+<p><img src="/img/interactions-view-options.png" alt="prototyping" /></p>
+
+<h3 id="interactions-remove">Removing interactions</h3>
+<p>There are two ways to remove interactions:</p>
+<ol>
+  <li>In Prototype mode select “Navigate to” > “none”.</li>
+  <li>Drag out the connector from the linked artboard.</li>
+</ol>
+<p><img src="/img/interactions-remove.png" alt="prototyping" /></p>

user-guide/introduction/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 1· Introduction
+title: 01· Introduction
 ---
 
 <h1 id="section-1">Introduction</h1>

user-guide/layer-basics/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 4· Layer basics
+title: 04· Layer basics
 ---
 
 <h1 id="layer-basics">Layer basics</h1>

user-guide/objects/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 5· Objects
+title: 05· Objects
 ---
 
 <h1 id="objects">Objects</h1>

user-guide/styling/index.njk

@@ -0,0 +1,49 @@
+---
+title: 07· Styling
+---
+
+<h1 id="styling">Styling</h1>
+<p class="main-paragraph">Penpot has a variety of styling options for each selected object that can be found at the Design panel.</p>
+
+<h3 id="fill">Fill</h3>
+<p>Color fills can be added to artboards, shapes, texts and to groups of layers. A fill can be a custom color (HEX) or color style from a library.</p>
+<p>To apply a fill you can use the color picker, the color palette or the color styles from a library.</p>
+<p>You can set <strong>opacity</strong> for custom fills.</p>
+<p><img src="/img/styling-fill-apply.gif" alt="fills" /></p>
+<h4>Remove fill</h4>
+<p>To <strong>remove a fill</strong> you have to select the object and then press the “-” button at the fill section.</p>
+<p><img src="/img/styling-fill-remove.gif" alt="fills" /></p>
+
+<h3 id="stroke">Stroke</h3>
+<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, artboards, curves).</p>
+<p><img src="/img/styling-stroke.gif" alt="stroke" /></p>
+<p>Stroke options are:</p>
+<ul>
+  <li><strong>Color and opacity</strong>.</li>
+  <li><strong>Width</strong> (pixels).</li>
+  <li><strong>Position:</strong> center, outside, inside.</li>
+  <li><strong>Style:</strong>solid, dotted, dashed, mixed.</li>
+</ul>
+
+<h3 id="radius">Border radius</h3>
+<p>Border radius can be applied to rectangles to edit its corners. There’s also the option to edit each corner individually.</p>
+<p><img src="/img/styling-radius.gif" alt="border radius" /></p>
+
+
+<h3 id="shadow">Shadow</h3>
+<p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
+<p><img src="/img/styling-shadow.gif" alt="shadow" /></p>
+<p>Shadow options are:</p>
+<ul>
+  <li><strong>Type:</strong> Drop (outside the layer), inner (inside the layer).</li>
+  <li><strong>Horizontal position</strong> (X).</li>
+  <li><strong>Vertical position</strong> (Y).</li>
+  <li><strong>Blur</strong>.</li>
+  <li><strong>Spread</strong>.</li>
+  <li><strong>Color and opacity</strong>.</li>
+</ul>
+
+<h3 id="blur">Blur</h3>
+<p>You can set a blur for each and every object at Penpot.</p>
+<p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
+<p><img src="/img/styling-blur.gif" alt="blur" /></p>

user-guide/the-interface/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 2· The interface
+title: 02· The interface
 ---
 
 <h1 id="the-interface">The interface</h1>

user-guide/workspace-basics/index.njk

@@ -1,5 +1,5 @@
 ---
-title: 3· Workspace basics
+title: 03· Workspace basics
 ---
 
 <h1 id="workspace-basics">Workspace basics</h1>