🎉 New prototyping section

user-guide/prototyping/index.njk

@@ -3,31 +3,108 @@ title: 12· 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="main-paragraph">Penpot allows you to prototype interactions by connecting artboards (which can act as screens). Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.<p>
 
-<p class="advice">Advanced interactions are among the main priorities of the Penpot team. Related features will be implemented soon.</p>
+<p class="main-paragraph">Once the prototype is prepared with interactions and/or flows it can be used at the View mode and shared through a shareable link.<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>
+<h3 id="prototyping-connecting">Connecting artboards</h3>
+<p><img src="/img/prototyping-connection.gif" alt="prototyping" /></p>
+<p>The simplest and most usual way to prototype an interaction at Penpot is connecting artboards. 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>
+  <li><strong>Drag</strong> a connection to the destination artboard.</li>
+  <li>A <strong>flow start</strong> will be automatically created.</li>
+  <li><strong>Test</strong> the interactive prototype in action in the view mode (access by clicking the play button at the top right)</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>
+<h4 id="prototyping-anatomy">Anatomy of a prototype</h4>
+<p><img src="/img/prototyping-anatomy.png" alt="prototyping" /></p>
+<p class="hint">
+  <strong>1)</strong> Hotspot (origin connection)
+  <strong>2)</strong> Connector wire
+  <strong>3)</strong> Destination
+  <strong>4)</strong> Prototype mode tab
+  <strong>5)</strong> Add interaction button
+  <strong>6)</strong> Interaction (settings expanded)
+  <strong>7)</strong> View mode launcher
+</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>
+<h3 id="prototyping-triggers">Interaction triggers</h3>
+<p><img src="/img/prototyping-triggers.png" alt="prototyping" /></p>
+<p>The trigger defines the user action that will start the interaction. Penpot currently provides the following triggers (more of them will come):</p>
+<ul>
+  <li><strong>On click:</strong> when user clicks or tap the hotspot.</li>
+  <li><strong>Mouse enter:</strong> when the mouse enter the hotspot area.</li>
+  <li><strong>Mouse leave:</strong> when the mouse leaves the hotspot area.</li>
+  <li><strong>After delay:</strong> when a certain time has passed after an artboard is shown. Note: this can only be set at artboards.</li>
+</ul>
+
+<h3 id="prototyping-actions">Interaction actions</h3>
+<p><img src="/img/prototyping-actions.png" alt="prototyping" /></p>
+<p>The action defines what will happen when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
+<ul>
+  <li><strong>Navigate to</strong>.</li>
+  <li><strong>Open overlay</strong>.</li>
+  <li><strong>Toggle overlay</strong>.</li>
+  <li><strong>Close overlay</strong>.</li>
+  <li><strong>Previous screen</strong>.</li>
+  <li><strong>Open URL</strong>.</li>
+</ul>
+
+<h4 id="prototyping-actions-navigate">Navigate to</h4>
+<p>The classic, most usual of the prototyping actions. It takes the user to one artboard to the one that is being set in the interaction.</p>
+
+<h4 id="prototyping-actions-overlay">Open overlay</h4>
+<p>It opens an artboard right over the current artboard. This action is typically used to display tooltips, modal windows or notifications.</p>
+<p><img src="/img/prototyping-overlay.gif" alt="prototyping" /></p>
+<p>You have several presets for positioning the overlay (center, top left, top right...) but you can also do it manually. Just select the “Manual” option and drag the “ghost” (an area with the size of the destination artboard) to the place you want the overlay to show up.</p>
+<p>There are also a couple of options that facilitates to mimic typical overlay behaviours:</p>
+<ul>
+  <li>Close when clicking outside: the overlay is closed if the user clicks outside its area.</li>
+  <li>Add background overlay: a black background with 20% opacity is added.</li>
+</ul>
+
+<h4 id="prototyping-actions-overlay-toggle">Toggle overlay</h4>
+<p>It opens an overlay if it is not already opened or closes it if it is already opened.</p>
+
+<h4 id="prototyping-actions-overlay-close">Close overlay</h4>
+<p>This action will close a targeted artboard that is opened as an overlay. It can be also set to “self” so the artboard can be closed from itself.</p>
+
+<h4 id="prototyping-actions-previous">Previous screen</h4>
+<p><img src="/img/prototyping-previous.png" alt="prototyping" /></p>
+<p>It takes back to the last artboard shown. This action is typically used for back buttons, when the same screen can be accessed from different origins.</p>
+
+<h4 id="prototyping-actions-url">Open URL</h4>
+<p>This action opens an URL in a new tab. This is useful to add external links outside of the prototype.</p>
+
+<h3 id="prototyping-flows">Flows</h3>
+<p>Design projects usually need to define multiple casuistics for different devices and user journeys. Flows allow you to define one or multiple starting points within the same page so you can better organize and present your prototypes.</p>
+
+<p>A <strong>flow</strong> is defined by a starting artboard for an interaction. Flows can be selected independently at the view mode. Each flow has its own shareable link at the View mode.</p>
+
+
+<h4 id="prototyping-flows-starting">Starting points</h4>
+<p><strong>A starting point</strong> is an artboard selected to be the first screen of a flow. You could set an artboard as a starting point just because you want this artboard to be the first one to be shown in the view mode, but you can also set more starting points to define different user journeys.</p>
+<p>There are several ways to create starting points:</p>
+<ul>
+  <li><strong>Automatically</strong>: when creating a connection from an artboard which is not connected yet (meaning that it does not belong to an existing flow), the origin artboard will be set as a flow start.
+<p><img src="/img/prototyping-flows-connection.gif" alt="prototyping" /></p>
+</li>
+  <li><strong>From the prototype sidebar</strong>: having an artboard selected, click on the “+” button to set it as a flow start.
+<p><img src="/img/prototyping-flows-start.gif" alt="prototyping" /></p>
+</li>
+  <li><strong>From the artboard menu</strong>.
+<p><img src="/img/prototyping-flows-menu.png" alt="prototyping" /></p>
+</li>
+</ul>
+
+<h4 id="prototyping-flows-multiple">Multiple flows</h4>
+<p>You can add as many flows as you want. The complete list of flows is shown at the prototype sidebar when no shape is selected.</p>
+<p><img src="/img/prototyping-flows-multiple.png" alt="prototyping" /></p>
+
+
+<h4 id="prototyping-flows-multiple">Flows at the view mode</h4>
+<p>At the view mode there’s a menu where you can access to all the flows set and easily switch between them.</p>
+<p><img src="/img/prototyping-flows-viewmode.png" alt="prototyping" /></p>