🎉 More user guide

user-guide/code-mode/index.njk

@@ -0,0 +1,39 @@
+---
+title: 14· Code mode
+---
+
+<h1 id="codemode">Code mode</h1>
+<p class="main-paragraph">At code mode you can inspect your designs to get specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.<p>
+
+<h3 id="codemode-activate">Inspect designs</h3>
+<p>You can activate Code mode from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:</p>
+<ul>
+<li>At the <strong>left sidebar</strong> you can see the layers tree. Select a layer to inspect it.</li>
+<li>At the <strong>right sidebar:</strong> you can switch between Info and Code tabs to get design specifications or code.</li>
+</ul>
+<p><img src="/img/codemode-activate.gif" alt="codemode" /></p>
+
+<h3 id="codemode-measurements">Distances and measurements</h3>
+<p>You can easily get measurements and distances between an object and other objects and artboard edges.</p>
+<p>To get distances:</p>
+<ul>
+<li>Click on an object or select it at the layers panel.</li>
+<li>Hover other objects to see the distances between them and the selected one.</li>
+<li>Hover a free space at the artboard or the area around it to get the distance from the object to the artboard edges.</li>
+</ul>
+<p><img src="/img/codemode-measures.gif" alt="codemode" /></p>
+
+<h3 id="codemode-info">Info panel</h3>
+<p>At the info panel you can see specifications about style and content of an object. Different types of objects can have different sets of properties.</p>
+<p><img src="/img/codemode-properties.gif" alt="codemode" /></p>
+
+<h4>Copy properties</h4>
+<p>You can copy property values individually or full sections of them pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.</p>
+<p><img src="/img/codemode-copy.gif" alt="codemode" /></p>
+
+<h3 id="codemode-code">Code panel</h3>
+<p>Press the code tab to get actual code snippets. Select an object to get ready to use code for styles (currently CSS only but more coming) and SVG markup.</p>
+<p><img src="/img/codemode-code.png" alt="codemode" /></p>
+
+<h3 id="codemode-export">Export</h3>
+<p>Export option is available at the bottom of the Info panel. Export presets set at the workspace will be available at the Code mode. New export presets can be added ath the Code mode but will not persist (won’t be found at the workspace).</p>

user-guide/comments/index.njk

@@ -0,0 +1,36 @@
+---
+title: 15· Comments
+---
+
+<h1 id="comments">Comments</h1>
+<p class="main-paragraph">Comments allows the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
+
+<h3 id="comments-add">Adding comments</h3>
+<p><img src="/img/comments-add.gif" alt="comments" /></p>
+<ol>
+  <li>At the workspace, activate the comment tool by clicking the comment icon in the toolbar or pressing the <kbd>C</kbd> key.</li>
+  <li>Click a place at the viewport where you’d like to leave the comment. If you want the comment to appear at the view mode leave the comment inside an artboard.</li>
+  <li>Write your comment at the text box.</li>
+  <li>Press Post to leave the comment or Cancel to not do it.</li>
+</ol>
+<h4>How to reply a comment</h4>
+<ol>
+  <li>Open a comment by clicking at its bubble (a circled number).</li>
+  <li>Write your comment at the text box at the end of the comment popup.</li>
+  <li>Press Post to leave the comment or Cancel to not do it.</li>
+</ol>
+<h4>Mark threads as read</h4>
+<p>Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.</p>
+<p><img src="/img/comments-thread.png" alt="comments" /></p>
+
+<h3 id="comments-dashboard">Edit and remove comments</h3>
+<p>At the top right of the comment popup you can find options to edit or delete comments.</p>
+
+<h3 id="comments-dashboard">Dashboard notifications</h3>
+<p><img src="/img/comments-dashboard.png" alt="comments" /></p>
+<p>At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.</p>
+
+<h3 id="comments-viewmode">Comments at the View mode</h3>
+<p>You can activate comments at the View mode by pressing the comments icon at the top navbar.</p>
+<p><strong>Note:</strong> the View mode shows only artboards so the comments placed outside artboards will not show here.</p>
+<p><img src="/img/comments-view.png" alt="comments" /></p>

user-guide/components/index.njk

@@ -0,0 +1,44 @@
+---
+title: 12· Components
+---
+
+<h1 id="components">Components</h1>
+<p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
+<p>A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). All copies of a component used in user files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
+
+<p>A component has two aspects:</p>
+<ul>
+  <li><strong>Main component</strong> is the source that defines the component. Main components exist only in the library, not in the viewport.</li>
+  <li><strong>Component copy</strong> or instance, is a copy of the Main component that is placed at the viewport. Component copies are linked to their Main component.</li>
+</ol>
+
+<h3 id="component-create">Create a component</h3>
+<p>To create a component:</p>
+<ol>
+  <li>Select an object or a group of them</li>
+  <li>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> or right click and select the option “Create component” at the object menu.</li>
+</ol>
+<p><img src="/img/components-create.gif" alt="components" /></p>
+
+<h3 id="component-update">Update main components</h3>
+<p>To update changes to a Main component:</p>
+<ol>
+  <li>Make a change in a component copy.</li>
+  <li>Right click and select the option “Update main component” at the component menu.</li>
+</ol>
+<p><img src="/img/components-update.gif" alt="components" /></p>
+<p>If a file is using a component from a Shared library that has been updated, a notification will be shown offering the options for update or dismiss.</p>
+<p><img src="/img/components-updatenotification.png" alt="components" /></p>
+
+<h3 id="component-overrides">Component overrides</h3>
+<p>Overrides are differences at the copy components from their main components. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
+<p>Component layers with overrides are marked with a “*” at the layers list.</p>
+<p><img src="/img/components-overrides.gif" alt="components" /></p>
+<h4>Reset overrides</h4>
+<p>Right click and select the option “Reset overrides” at the component menu to get it to the state of the Main component.</p>
+
+<h3 id="component-detach">Detach instance</h3>
+<p>Detach a component copy to unlink it from its Main component by transforming it in a group layer. Right click and select the option “Detach instance” at the component menu.</p>
+
+<h3 id="component-show">Show main component</h3>
+<p>To easily show the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the component belongs.</p>

user-guide/exporting/index.njk

@@ -2,12 +2,12 @@
 title: 08· Exporting
 ---
 
-<h1 id="exporting">Exporting</h1>
+<h1 id="export">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>
+<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>
 <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>
@@ -16,7 +16,7 @@ title: 08· Exporting
 <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>
+<h3 id="export-options">Export options</h3>
 <p>The anatomy of an export setting:</p>
 <ul>
   <li><strong>Size:</strong> options for the most common sizing scales.</li>
@@ -24,6 +24,6 @@ title: 08· Exporting
   <li><strong>File format:</strong> PNG SVG, JPEG.</li>
 </ul>
 
-<h3 id="export">Multiple export presets</h3>
+<h3 id="export-multiple">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/the-interface/index.njk

@@ -73,19 +73,19 @@ title: 02· The interface
   <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>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 shapes: Artboard, rectangle, ellipse, text, graphic, path, free drawing and comments.</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.</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.</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.</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).</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...).</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>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>
 </ol>
 
 
 
 <h3 id="viewmode-interface">View mode</h3>
-<p>Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have a code mode where you can get objects specifications and code snippets.</p>
+<p>Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have a code mode where you can get objects specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode</a></p>
 
 <p>
   <a href="/img/interface-viewmode.png" target="_blank">
@@ -111,8 +111,8 @@ title: 02· The interface
   <li><strong>Artboards counter:</strong> Artboards count and current position. </li>
   <li><strong>Play mode:</strong> Default presentation mode where you can also play with interactions.</li>
   <li><strong>Comments mode:</strong> Comments mode shows comments inside artboards and allows users to reply or add new ones.</li>
-  <li><strong>Code mode:</strong> At code mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.</li>
-  <li><strong>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all.</li>
+  <li><strong>Code mode:</strong> At code mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup. <a href="/user-guide/code-mode/">More about Code mode</a></li>
+  <li><strong>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all. <a href="/user-guide/view-mode/#viewmode-features">More about interaction settings</a></li>
   <li><strong>Share link:</strong> Create a shareable link of the view mode to send it so developers, other designers or stakeholders can view the designs and access the code specifications regardless being at your team or even logged at Penpot.</li>
   <li><strong>Edit file:</strong> Go back to the workspace.</li>
   <li><strong>Zoom:</strong> Zoom options and shortcuts information.</li>

user-guide/view-mode/index.njk

@@ -0,0 +1,29 @@
+---
+title: 13· View mode
+---
+
+<h1 id="viewmode">View mode</h1>
+<p class="main-paragraph">At Penpot, the View mode is the best place to present your designs. You will also be able to share them and play the interactions.<p>
+
+<h3 id="viewmode-interface">View mode interface</h3>
+<p>Take a look at the anatomy of the View mode at this section: <a href=”/user-guide/the-interface/#viewmode-interface” target=”_blank”>View mode interface</a>.</p>
+<p><a href="/img/interface-viewmode.png" target="_blank"><img src="/img/interface-viewmode.png" alt="View mode"></a></p>
+
+<h3 id="viewmode-launch">Launch your designs in View mode</h3>
+<p>To view your designs from the workspace at View mode click the play button at the top right of the navbar or press <kbd>G</kbd> <kbd>V</kbd>.</p>
+<p><strong>Note:</strong> the View mode shows only artboards and their contents. Anything outside an artboard will not be shown at the View mode.</p>
+<p><img src="/img/viewmode-play.png" alt="viewmode" /></p>
+
+<h3 id="viewmode-features">Features</h3>
+<p>From the View mode you can:</p>
+<ul>
+  <li><strong>Move between screens</strong> pressing <kbd>→</kbd> and <kbd>←</kbd> keys.</li>
+  <li>Play the <strong>interactions</strong> (if there are any).</li>
+  <li>Change <strong>view settings for interactions</strong>: don’t show, show or show on click. <p><img src="/img/interactions-view-options.png" alt="viewmode" /></p></li>
+  <li>Click on the file name to see the <strong>Artboards</strong> list (with nice thumbnails). <p><img src="/img/viewmode-artboards.png" alt="viewmode" /></p></li>
+  <li>Create a <strong>Share link</strong>. The Share link is a public url that you can destroy anytime. <p><img src="/img/viewmode-share.png" alt="viewmode" /></p></li>
+  <li>Use the <strong>zoom</strong>.</li>
+  <li>Activate the browser <strong>fullscreen mode</strong>.</li>
+  <li>Activate the <strong>Code mode</strong>.</li>
+  <li>Activate the <strong>Comments mode</strong>.</li>
+</ul>