Merge pull request #65 from penpot/sprint-27

[Release 1.12] User Guide update

user-guide/exporting/index.njk

@@ -3,7 +3,9 @@ title: 08· Exporting Objects
 ---
 
 <h1 id="export">Exporting Objects</h1>
-<p class="main-paragraph">In Peynpot you can setup export presets for different file formats and scales.</p>
+<p class="main-paragraph">In Penpot you can setup export presets for different file formats and scales.</p>
+
+<p class="advice">Multiexport options are among the main priorities of the Penpot team. Related features are coming *very* soon. Stay tunned.</p>
 
 <h3 id="export-howto">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>

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

@@ -1,10 +1,12 @@
 ---
-title: 06· Grids & Layouts
+title: 06· Grids & Guides
 ---
 
-<h1 id="grids-layouts">Grids and Layouts</h1>
-<p class="main-paragraph">This chapter describes all you need to know about how to set up grids in Penpot.</p>
+<h1 id="grids-guides">Grids & guides</h1>
+<p class="main-paragraph">This chapter describes all you need to know about how to set up grids and guides in Penpot.</p>
 
+
+<h2 id="grids-layouts">Grids and layouts</h2>
 <p>Grids are design aids that are used to help you to align content to a
 geometric structure. In Penpot there are three types of grids:
 <strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
@@ -66,3 +68,13 @@ geometric structure. In Penpot there are three types of grids:
 <p>To hide or show all the grids at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
 <p>If you want to enable or disable the snapping to grids you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
 <p><img src="/img/grids-snap-visibility.gif" alt="grids" /></p>
+
+
+<h2 id="guides">Guides</h2>
+<p>To create guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.</p>
+
+<p><img src="/img/guides.gif" alt="grids" /></p>
+
+<p>To <strong>delete guides drag</strong> the guide to the ruler or select the guide and press delete / supr.</p>
+
+<p>To <strong>show/hide guides</strong> use the same shortcut as for rules: <kbd>Shift/CMD + Ctrl + R</kbd></p>

user-guide/introduction/shortcuts.njk

@@ -380,6 +380,11 @@ title: Shortcuts
       <td style="text-align: center;"><kbd>I</kbd></td>
       <td style="text-align: center;"><kbd>I</kbd></td>
     </tr>
+    <tr>
+      <td>Show / hide UI</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>\</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>\</kbd></td>
+    </tr>
   </tbody>
 </table>
 
@@ -621,4 +626,4 @@ title: Shortcuts
       <td style="text-align: center;"><kbd>C</kbd></td>
     </tr>
   </tbody>
-</table>
+</table>

user-guide/layer-basics/index.njk

@@ -60,10 +60,14 @@ title: 04· Layer basics
   <li>If you press <kbd>Shift/⇧</kbd> while selecting two or more layers all the layers within the selection area will be selected.</li>
 </ol>
 <p><img src="/img/layers-selecting-2.gif" alt="layers select" /></p>
-<h4>Selecting layers ignoring groups</h4>
+<h4>Selecting layers ignoring groups (deep selection)</h4>
 <p>If you want to select an element that is difficult to reach because is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the objects as being at the same level.</p>
 <p><img src="/img/layers-selecting-3.gif" alt="layers select" /></p>
 
+<h4>Select layer menu</h4>
+<p>At the dropdown menu (right click on a layer to show it) there's the option "Select layer" that allows the user to select one layer among the ones that are under the cursor's location.</p>
+<p><img src="/img/layers-select-menu.gif" alt="layers select" /></p>
+
 
 <h3 id="grouping-layers">Grouping layers</h3>
 <p>Grouped layers can be moved, transformed or styled at the same time. To group two or more layers you have to select them and then press <kbd>Ctrl/⌘</kbd> + <kbd>G</kbd>. You can also use the option at the layers menu that you can open with right click.</p>

user-guide/styling/index.njk

@@ -17,7 +17,7 @@ title: 07· Styling
 <p><img src="/img/styling-fill-remove.gif" alt="fills" /></p>
 
 <h3 id="strokes">Strokes</h3>
-<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, artboards, curves).</p>
+<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, artboards, curves and images).</p>
 <p><img src="/img/styling-stroke.gif" alt="stroke" /></p>
 <p>Stroke options are:</p>
 <ul>
@@ -44,7 +44,7 @@ title: 07· Styling
 <p><img src="/img/styling-stroke-caps.png" alt="stroke" /></p>
 
 <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>Border radius can be applied to rectangles and images 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>
 
 

user-guide/the-interface/index.njk

@@ -58,30 +58,36 @@ title: 02· The interface
   <strong>1)</strong> Main menu
   <strong>2)</strong> Users
   <strong>3)</strong> File status
-  <strong>4)</strong> Zoom
-  <strong>5)</strong> View mode
-  <strong>6)</strong> Toolbar
+  <strong>4)</strong> History panel
+  <strong>5)</strong> Zoom
+  <strong>6)</strong> View mode
   <strong>7)</strong> Layers panel
   <strong>8)</strong> Assets panel
-  <strong>9)</strong> History panel
-  <strong>10)</strong> Palettes panel
-  <strong>11)</strong> Prototype mode
-  <strong>12)</strong> Object properties
+  <strong>9)</strong> Toolbar
+  <strong>10)</strong> Typography palette
+  <strong>11)</strong> Color palette
+  <strong>12)</strong> Rules
+  <strong>13)</strong> Design properties
+  <strong>14)</strong> Prototype mode
+  <strong>15)</strong> Viewport
 </p>
 
 <ol>
   <li><strong>Main menu:</strong> At the file main menu you are able to tweak your workspace configuration. Manage visibility for grids, rules, panels. Enable or disable snapping, dynamic alignment. Add or remove the file as Shared Library. There’s also a link to the feedback options.</li>
   <li><strong>Users:</strong> You can see how many users are working in the file at the same time.</li>
   <li><strong>File status:</strong> Information about the file saving state. Know if last changes are saved or if there is a problem.</li>
+  <li><strong>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can do undo/redo to walk the changes and expand each one of them to get detailed information. <a href="/user-guide/history/">More about history</a></li>
   <li><strong>Zoom:</strong> Zoom options and shortcuts information.</li>
   <li><strong>View mode:</strong> The view mode button launches a presentation with the artboards. See more about what you can do at the view mode. </li>
-  <li><strong>Toolbar: </strong> The toolbar is the place where you will find the tools to quick and easily create the different types of objects: Artboard, rectangle, ellipse, text, graphic, path, free drawing and comments.  <a href="/user-guide/objects/">More about objects</a></li>
   <li><strong>Layers panel:</strong> The layers panel allows you to see and manage the layers and pages of a file. A file can have as many pages as you need. Each page has its own viewport (the almost infinite area where you actually create your designs) with its own layers. You can create, delete or reorder your pages at your needs. <a href="/user-guide/layer-basics/">More about layers</a></li>
   <li><strong>Assets panel:</strong> Each file has a default library (File Library) where that allows to store elements and styles that are likely to be reused. That includes components, graphics, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</li>
-  <li><strong>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can do undo/redo to walk the changes and expand each one of them to get detailed information. <a href="/user-guide/history/">More about history</a></li>
-  <li><strong>Palettes panel:</strong> The colors palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. <a href="/user-guide/color/#color-palette">More about palettes</a></li>
+  <li><strong>Toolbar: </strong> The toolbar is the place where you will find the tools to quick and easily create the different types of objects: Artboard, rectangle, ellipse, text, graphic, path, free drawing and comments.  <a href="/user-guide/objects/">More about objects</a></li>
+  <li><strong>Color palette:</strong> The color palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. <a href="/user-guide/color/#color-palette">More about the color palette</a>.</li>
+  <li><strong>Typography palette:</strong> The Typography palette allows you to always have the typographie styles at plain sight. Use the menu to easily switch between libraries.</li>
+  <li><strong>Rules:</strong> Sometimes you need coordinates to design. You can also drag guides from the rules.</li>
+  <li><strong>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected shape. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...). <a href="/user-guide/styling/">More about styling</a></li>
   <li><strong>Prototype mode:</strong> Penpot allows you to prototype interactions connecting artboards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another artboard. You’ll be able to see the interactive prototype in action in the view mode (access by clicking the play button at the top right). <a href="/user-guide/interactions/">More about prototyping</a></li>
-  <li><strong>Object properties:</strong> At the Design panel you can find and edit the properties of a selected shape. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...). <a href="/user-guide/styling/">More about styling</a></li>
+  <li><strong>Viewport:</strong> An infinite canvas to design without limits.</li>
 </ol>
 
 

user-guide/workspace-basics/index.njk

@@ -10,9 +10,15 @@ title: 03· Workspace basics
 <p><img src="/img/viewport.png" alt="the viewport" /></p>
 <h4>Navigate the viewport</h4>
 <p>Press <kbd>space</kbd> while moving your mouse to navigate the viewport. If you are using a trackpad you can do two finger scrolling.</p>
+<p>You can also use the scrollbars, which are specially useful for those who love using graphic tablets.</p>
 <p><img src="/img/viewport-navigate.gif" alt="navigate the viewport" /></p>
 
 
+<h3 id="workspace-menu">The menu</h3>
+<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. Export, view and edit options and preferences among them.</p>
+<p><img src="/img/workspace-menu.gif" alt="workspace menu" /></p>
+
+
 <h3 id="zoom">Zoom</h3>
 <p>To zoom in and out hold <kbd>Ctrl</kbd> (or <kbd>⌘</kbd> if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.</p>
 <p><a href="/user-guide/introduction/shortcuts/#zoom" target="_blank">All zoom shortcuts →</a></p>
@@ -34,3 +40,8 @@ title: 03· Workspace basics
 <h3 id="snap-to-grid">Snap to grid</h3>
 <p>Objects automatically snap to the nearest point of a visible grid. This option can be disabled anytime from the main menu.</p>
 <p><img src="/img/snap-grid.gif" alt="snap to grid" /></p>
+
+
+<h3 id="nudge-amount">Nudge amount</h3>
+<p>Set your desired distance to move objects using the keyboard. This is a must if you’re working with grids (if you’re not, you should ;)), being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.</p>
+<p><img src="/img/nudge-amount.png" alt="nudge amount" /></p>