📚 Update User Guide with 2.6 features (#9768)

docs/user-guide/account-teams/comments.njk

@@ -9,6 +9,7 @@ desc: Learn how to import and export files in Penpot, the free, open-source desi
 
 <h2 id="comment-workspace">At the workspace</h2>
 <p>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key. <a href="/user-guide/designing/workspace-basics/#comments">More about comments at the Workspace</a></p>
+<p>URLs in comments are detected automatically and open in a new browser tab when clicked.</p>
 
 <h2 id="comment-viewmode">At the View mode</h2>
 <p>You can activate comments at the View mode by pressing the comments icon at the top navbar. <a href="/user-guide/prototyping-testing/testing-view-mode/#viewmode-comments">More about comments at the View mode</a>.</p>

docs/user-guide/design-systems/assets.njk

@@ -36,8 +36,10 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
     <source src="/img/libraries/add-color.mp4" type="video/mp4">
   </video>
 </figure>
+<p>Semi-transparent colors in the library show their opacity percentage in the asset name.</p>
 <h3>Typographies</h3>
 <p>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.</p>
+<p>Each typography group has its own add button to create a style directly in that group. When editing a typography style, use the delete and duplicate buttons in the typography dialog.</p>
 <figure>
   <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
     <source src="/img/libraries/add-typography.mp4" type="video/mp4">
@@ -49,8 +51,8 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
 <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>Colors:</strong> Rename, edit, delete.</li>
-  <li><strong>Typographies:</strong> Rename, edit, delete.</li>
+  <li><strong>Colors:</strong> Rename, edit, duplicate, delete.</li>
+  <li><strong>Typographies:</strong> Rename, edit, duplicate, delete.</li>
 </ul>
 <figure>
   <video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.webp" height="auto">
@@ -126,6 +128,9 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
 <h3>Ungroup assets</h3>
 <p>You can ungroup the assets the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>
 
+<h3>Delete a group</h3>
+<p><strong>Delete group</strong> removes every asset inside that group from the library. Penpot asks you to confirm how many assets will be deleted. This option is available in the context menu for component, color and typography groups.</p>
+
 <h3>Drag assets to groups</h3>
 <p>One very direct way to move assets between groups at the libraries is by dragging them.</p>
 <figure>

docs/user-guide/design-systems/design-tokens.njk

@@ -134,6 +134,24 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
 </ul>
 <p>Tokens can be applied to multiple selected elements, but not to groups.</p>
 
+<h3 id="design-tokens-design-tab">Applying tokens from the Design tab</h3>
+<p>Besides applying tokens from the Tokens panel, you can bind tokens from numeric and color fields in the Design sidebar.</p>
+<p>Token selection is available for:</p>
+<ul>
+  <li><strong>Size and position:</strong> width, height, x, y</li>
+  <li><strong>Rotation and border radius</strong></li>
+  <li><strong>Layout spacing:</strong> gaps, paddings, margins, min and max widths and heights</li>
+  <li><strong>Typography:</strong> letter spacing and line height</li>
+  <li><strong>Stroke width</strong></li>
+  <li><strong>Shadows:</strong> x, y, blur, spread</li>
+  <li><strong>Blur</strong> amount</li>
+</ul>
+<p>Click the token control on a field to open a list of applicable tokens from your active sets and themes. Select a token to apply it; a token pill shows the bound token. Use the pill menu to detach the token when you need a custom value again.</p>
+<p class="advice">When a numeric field has a token applied, drag-to-change is disabled for that field. Edit the token or detach it first.</p>
+<figure>
+  <img src="/img/design-tokens/41-design-tab-token-dropdown.webp" alt="Token list on a numeric field in the Design sidebar">
+</figure>
+
 <h3 id="design-tokens-radius">Border radius</h3>
 <p>Border radius tokens allow you to define specific values for border-radius properties, offering flexibility in how you style the corners of elements.</p>
 <figure>
@@ -654,6 +672,7 @@ ExtraBold Italic
 
 <h2 id="design-tokens-import-export">Importing and Exporting Tokens</h2>
 <p>You can export Tokens from Penpot and import them from your computer to a Penpot file. Tokens can be imported from the <strong>Tools</strong> option at the bottom of the <strong>Tokens</strong> tab.</p>
+<p>You can also <a href="/user-guide/design-systems/libraries/#import-tokens-from-library">import tokens from a connected shared library</a> using the Libraries modal. That import uses the library's full token definition (sets and themes included) and replaces the tokens already in your file.</p>
 <p>The <strong>Import</strong> functionality allows you to upload and replace the global token set using a single file or a folder with multiple files in it.</p>
 <p>These features support JSON files formatted according to specific guidelines and preserve the ability to undo changes if needed.</p>
 <figure>

docs/user-guide/design-systems/libraries.njk

@@ -70,3 +70,23 @@ desc: Use Penpot's libraries for reusable design elements! Learn to create, mana
 <figure>
   <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
 </figure>
+
+<h4 id="import-tokens-from-library">Import tokens from a connected library</h4>
+<p>If a shared library you have connected includes design tokens, you can copy them into the current file from the <strong>Libraries</strong> modal.</p>
+<p>The <strong>Import tokens</strong> button appears only next to connected libraries that define tokens. Libraries without tokens do not show this control.</p>
+<ol>
+  <li>Open the <strong>Libraries</strong> panel from the assets tab.</li>
+  <li>Under <strong>Libraries in this file</strong>, find the connected library that includes tokens and click <strong>Import tokens</strong> (beside the disconnect control).</li>
+  <li>Review the confirmation dialog. Importing brings in the library's full token data, including sets and themes when the library defines them.</li>
+  <li>Click <strong>Import tokens</strong> to apply, or <strong>Cancel</strong> to go back without changes.</li>
+</ol>
+<p class="advice">Importing tokens from a library replaces all tokens, sets and themes in the current file. Export your tokens first (from the Tokens tab → Tools → Export) if you need to keep a backup.</p>
+<p>This is separate from connecting the library for components, colors and typographies. You can use shared assets without importing tokens, and import tokens only when you want the file's token setup to match the library.</p>
+<figure>
+  <img src="/img/libraries/libraries-import-tokens-button.webp" alt="Import tokens button in the Libraries modal">
+  <figcaption>The Import tokens button on a connected library that includes tokens.</figcaption>
+</figure>
+<figure>
+  <img src="/img/libraries/libraries-import-tokens-confirm.webp" alt="Import tokens from library confirmation dialog">
+  <figcaption>Confirm before importing. All current tokens, sets and themes in this file will be replaced.</figcaption>
+</figure>

docs/user-guide/designing/color-stroke.njk

@@ -53,9 +53,10 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
 <ol>
   <li><strong>Eyedropper</strong> - Allows you to pick any color of the layers at the viewport.</li>
   <li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
+  <li><strong>Color model</strong> - On the HSBA tab, switch between HEX, RGB, HSB and HSL input. Your choice is remembered across sessions.</li>
   <li><strong>Color type</strong> - Solid, gradient, or image.</li>
   <li><strong>Sliders</strong> - Easily manage settings like brightness, saturation or opacity.</li>
-  <li><strong>Values</strong> - Set precise color values of red(R), green(G), blue(B) and transparency(A).</li>
+  <li><strong>Values</strong> - Set precise color values. Available formats depend on the selected color model.</li>
   <li><strong>Libraries</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>
@@ -85,6 +86,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <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>Use the <strong>search</strong> field to filter colors in the active library by name.</p>
 <p>Switch between big and small <strong>thumbnails sizes</strong>.</p>
 
 <h3>Applying color from the palette</h3>
@@ -112,6 +114,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <li><strong>Width</strong> (in pixels)</li>
   <li><strong>Position</strong> - center, outside, inside</li>
   <li><strong>Style</strong> - solid, dotted, dashed, mixed</li>
+  <li><strong>Visibility</strong> - show or hide the stroke without removing it</li>
 </ul>
 <p>You can add as many strokes as you want to the same layer.</p>
 <figure>

docs/user-guide/designing/flexible-layouts.njk

@@ -144,7 +144,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
   <li>From the option at the selection menu (right click button).</li>
   <li>Pressing <kbd>Ctrl/⌘</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>.</li>
 </ul>
-<figure><img src="/img/layouts-add.webp" alt="Adding Layouts" /></figure>
+<figure><img src="/img/flexible-layouts/layouts-add.webp" alt="Adding Layouts" /></figure>
 
 <h3 id="layouts-grid-terminology">Grid layout basic terminology</h3>
 <ul>

docs/user-guide/designing/layers.njk

@@ -22,7 +22,7 @@ are shown by default at the <a href="/user-guide/prototyping-testing/testing-vie
 
 <p>Then, with the board tool selected, you have two options:</p>
 <ul>
-  <li><strong>Select a board size upfront</strong>. You can choose one of the provided presets with the most common resolution for devices and standard print sizes</li>
+  <li><strong>Select a board size upfront</strong>. You can choose one of the provided presets with the most common resolution for devices and standard print sizes. Use the search field to filter presets by name.</li>
   <li><strong>Click-and-drag</strong> to draw a frame of approximate size, then immediately edit its width/height values to be precise.</li>
 </ul>
 <figure>
@@ -119,10 +119,17 @@ Penpot allows you to decide if the fill of an artboard will be shown in exports,
 <h4>Board guides</h4>
 <p>You can set guides on boards that will assist with aligning layers.</p>
 <p>Read more about <a href="/user-guide/designing/workspace-basics/#guides">guides</a>.</p>
+<p>Right-click a board and choose <strong>Clear artboard guides</strong> to remove all guides on that board.</p>
 <figure>
   <img src="/img/objects/board-guides.webp" alt="board guides">
 </figure>
 
+<h4>Copy as image</h4>
+<p><strong>Copy as image</strong> copies a board as a bitmap to the system clipboard. Select a board, open the context menu, choose <strong>Copy/Paste as…</strong>, then <strong>Copy as image</strong>. Paste the result into other applications like any image.</p>
+<figure>
+  <img src="/img/objects/board-copy-as-image.webp" alt="Copy as image option for a board">
+</figure>
+
 <h4>Prototyping boards</h4>
 <p>You can connect boards with other boards to create rich interactions.</p>
 <p>Read more about <a href="/user-guide/prototyping-testing/prototyping/">prototyping</a>.</p>
@@ -212,6 +219,9 @@ You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd>
   </video>
 </figure>
 
+<h3 id="paste-to-replace">Paste to replace</h3>
+<p><strong>Paste to replace</strong> replaces the selected shape with the clipboard contents, keeping the selection. Use the context menu or press <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>V</kbd>.</p>
+
 <h3 id="duplicating-layers">Duplicate</h3>
 <p>There are several ways to duplicate a layer:</p>
 <ol>

docs/user-guide/designing/text-typo.njk

@@ -64,7 +64,7 @@ desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Pe
 <ol>
 <li>Press “Add custom font”.</li>
 <li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with
-the following formats: TTF, OTF and WOFF</strong>. Only one format will be needed.</li>
+the following formats: TTF, OTF, WOFF and WOFF2</strong>. Only one format will be needed.</li>
 <li>Change the font name if needed. The font name is the name that will be shown in the font list at the workspace.
 It is also what Penpot uses to group fonts in families. You can always edit it later.</li>
 <li>Once ready, press upload. That's it. The font will be available at the font list of this team’s files.</li>
@@ -77,7 +77,14 @@ It is also what Penpot uses to group fonts in families. You can always edit it l
 <p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>
 
 <h3 id="customfonts-edit">Edit custom fonts</h3>
-<p>At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family and delete it.</p>
+<p>At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family, download it, and delete it.</p>
+
+<h3 id="customfonts-download">Download custom fonts</h3>
+<p>Team members with edit permissions (editor, admin, or owner) can download a custom font family from the team <strong>Fonts</strong> section. Right-click a font family and choose <strong>Download</strong>. A single variant downloads as one file; families with multiple variants download as a ZIP.</p>
+<p>Viewers can use custom fonts in files but cannot upload, edit, or download them from the dashboard.</p>
+<figure>
+  <img src="/img/customfonts-download.webp" alt="Download option in the custom font family menu">
+</figure>
 
 <h3 id="customfonts-using">Using custom fonts</h3>
 <p>Custom fonts are added to the fonts catalog of a team and can be used at the workspace from the font list at the design sidebar.</p>

docs/user-guide/designing/workspace-basics.njk

@@ -43,6 +43,14 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   </video>
 </figure>
 
+<h4 id="page-separators">Page separators</h4>
+<p>You can add visual dividers in the page list to group pages without extra structure. Create an empty page, then rename it to <code>---</code>. The page appears as a horizontal line in the list.</p>
+<p>A page only becomes a separator if its name is <code>---</code> and the page has no content on the canvas. A page with content that is named <code>---</code> stays a normal page. Separators cannot be opened or selected; you can reorder or delete them like other pages.</p>
+<p>If you rename the active page to <code>---</code>, Penpot navigates to another page in the file. Double-click a separator to rename it; clearing the name and confirming removes the separator page.</p>
+<figure>
+  <img src="/img/layers/pages-separator.webp" alt="Page separator in the pages list">
+</figure>
+
 <h3>Layers</h3>
 <p><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
 <figure>
@@ -53,9 +61,10 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
 <h4>Navigate layers using the keyboard</h4>
 <ul>
   <li>Select a layer and press top/bottom arrows while pressing <kbd>Ctrl/⌘</kbd> to move them in the layers list.</li>
-  <li>Press <kbd>tab</kbd> to change the layer selection to the next layer.</li>
-  <li>Press <kbd>tab</kbd> + <kbd>Shift/⇧</kbd> to change the layer selection to the previous layer.</li>
-  <li>If the layer contains other layers, press <kbd>Enter</kbd> to select the first layer inside the group and <kbd>Enter</kbd>+ <kbd>Shift/⇧</kbd> to move a level up.</li>
+  <li>Press <kbd>Tab</kbd> to change the layer selection to the next layer.</li>
+  <li>Press <kbd>Tab</kbd> + <kbd>Shift/⇧</kbd> to change the layer selection to the previous layer.</li>
+  <li>While renaming a layer in the Layers panel, press <kbd>Tab</kbd> to save the name and start renaming the next layer below, or <kbd>Shift/⇧</kbd> + <kbd>Tab</kbd> for the layer above (siblings in the same group).</li>
+  <li>If the layer contains other layers, press <kbd>Enter</kbd> to select the first layer inside the group and <kbd>Enter</kbd> + <kbd>Shift/⇧</kbd> to move a level up.</li>
 </ul>
 
 <p>Layers are displayed from the bottom to the top of the layer stack, with layers above on the stack being shown on top in the image.</p>
@@ -69,17 +78,32 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   </video>
 </figure>
 
+<h4 id="find-and-replace">Find and replace</h4>
+<p>Open <strong>Find and Replace</strong> from the main menu (Edit) or press <kbd>Ctrl/⌘</kbd> + <kbd>H</kbd>. The search bar at the top of the Layers panel expands with a replace field.</p>
+<ul>
+  <li><strong>Search on canvas:</strong> finds text inside text layers on the current page.</li>
+  <li><strong>Search layers:</strong> finds layer names on the current page.</li>
+</ul>
+<p>Search is not case sensitive and does not support regular expressions. Layer type filters still apply, so you can narrow matches before replacing.</p>
+<p>Use <strong>Replace</strong> for the current match or <strong>Replace all</strong> for every match on the page. Arrow buttons move between matches.</p>
+<p>You can also open <strong>Find</strong> from the main menu or press <kbd>Ctrl/⌘</kbd> + <kbd>F</kbd> to search without the replace field.</p>
+
 <h3>Collapse groups and boards</h3>
 <p>Groups and boards can have their contents expanded and collapsed. Click on the arrow at the
 right side to toggle the visibility of their contents. </p>
 <p>To collapse all the layers, and just display the boards,
 press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a board to collapse them all.</p>
+<p>To expand the entire subtree of a collapsed group or board, press <kbd>Alt/⌥</kbd> + click its disclosure arrow.</p>
 <figure>
   <video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.webp" height="auto">
     <source src="/img/layers/layers-collapse.mp4" type="video/mp4">
   </video>
 </figure>
 
+<h2 id="design-sidebar-inputs">Numeric inputs in the Design sidebar</h2>
+<p>Many numeric fields in the Design sidebar support scrubbing: click and drag on the field to change the value. Hold <kbd>Shift/⇧</kbd> to change the value ten times faster.</p>
+<p>Drag-to-change is not available when a <a href="/user-guide/design-systems/design-tokens/#design-tokens-design-tab">design token</a> is applied to that field.</p>
+
 <h2 id="focus-mode">Focus mode</h2>
 <p>Focus mode zooms into the elements of a page you want to work with in a specific moment, and hides the rest so that they don’t get in the way. When the page has many elements, focus mode can also improve performance.</p>
 <p>To activate focus mode:</p>
@@ -136,6 +160,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <li>Write your comment in the text box.</li>
   <li>Press Post to leave the comment or Cancel to not do it.</li>
 </ol>
+<p>URLs in comments are detected automatically and open in a new browser tab when clicked.</p>
 <h3>How to reply a comment</h3>
 <ol>
   <li>Open a comment by clicking at its bubble (a circled number).</li>
@@ -199,6 +224,18 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <img src="/img/workspace-basics/history-pin.webp" alt="Pin versions" />
 </figure>
 
+<h4 id="preview-version">Preview a saved version</h4>
+<p>Open the version menu in the History tab and choose <strong>Preview version</strong>. The workspace opens in view-only mode: a banner shows the version name, and the Pages panel displays a <strong>View only</strong> badge.</p>
+<p>You can inspect the design but not edit it. Use <strong>Exit</strong> in the banner to leave preview, or <strong>Restore</strong> to revert the file to that version.</p>
+<figure>
+  <img src="/img/workspace-basics/history-preview-menu.webp" alt="Preview version option in the version menu">
+  <figcaption>Open the version menu to preview a saved version.</figcaption>
+</figure>
+<figure>
+  <img src="/img/workspace-basics/history-preview-banner.webp" alt="Version preview banner with Exit and Restore">
+  <figcaption>View-only preview. Exit returns to the current file; Restore applies this version.</figcaption>
+</figure>
+
 <h3>Actions panel</h3>
 <p>At the Actions panel, you have the layer type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.</p>
 <figure>
@@ -247,8 +284,14 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <video title="Ruler guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/ruler-guides.webp" height="auto">
     <source src="/img/workspace-basics/ruler-guides.mp4" type="video/mp4">
   </video>
-</figure><p>To <strong>delete ruler guides</strong> drag the guide to the ruler or select the guide and press delete / supr.</p>
+</figure>
+<p>To set an exact position, double-click the guide pill on the ruler and type a value.</p>
+<p>Right-click a ruler guide to change its color from the preset swatches.</p>
+<p>To <strong>delete ruler guides</strong> drag the guide to the ruler or select the guide and press delete / supr.</p>
 <p>To <strong>show/hide ruler guides</strong> use the same shortcut as for rulers: <kbd>Shift/CMD + Ctrl + R</kbd></p>
+<figure>
+  <img src="/img/workspace-basics/ruler-guide-pill-edit.webp" alt="Editing a ruler guide position from the guide pill">
+</figure>
 
 <h2 id="guides">Guides</h2>
 <p>Guides are design aids that are used to help you to align content to a
@@ -343,9 +386,13 @@ geometric structure. In Penpot there are three types of guides:
 
 <h2 id="snap-to-pixel">Snap to pixel</h2>
 <p>Layers automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option anytime from the main menu.</p>
+<p>When the pixel grid is visible, you can customize its color from the main menu (View).</p>
 <figure>
   <img src="/img/workspace-basics/workspace-snap.webp" alt="Snap to pixel setting" />
 </figure>
+<figure>
+  <img src="/img/workspace-basics/pixel-grid-color.webp" alt="Pixel grid color setting in the main menu">
+</figure>
 
 <h2 id="nudge-amount">Nudge amount</h2>
 <p>Set your chosen distance to move layers using the keyboard. This is a must if you’re working with guides (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>

docs/user-guide/first-steps/shortcuts.njk

@@ -112,6 +112,21 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
       <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>V</kbd></td>
       <td style="text-align: center;"><kbd>⌘</kbd><kbd>V</kbd></td>
     </tr>
+    <tr>
+      <td>Paste to replace</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Find</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>F</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>F</kbd></td>
+    </tr>
+    <tr>
+      <td>Find and replace</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>H</kbd></td>
+      <td style="text-align: center;"><kbd>⌘</kbd><kbd>H</kbd></td>
+    </tr>
     <tr>
       <td>Redo</td>
       <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Z</kbd></td>
@@ -423,6 +438,90 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
       <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
       <td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
     </tr>
+    <tr>
+      <td>Go to view mode</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
+    </tr>
+    <tr>
+      <td>Go to view mode comments</td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="layers-panel">Layers panel</h3>
+<p>Keyboard shortcuts and mouse actions for the Layers sidebar. Layer order in the panel is bottom-to-top; <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd> move between siblings of the current selection (wrapping at the ends). Use <kbd>Ctrl</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd> to change stacking order in the list (see <a href="#modify-layers">Modify layers</a>).</p>
+<table cellspacing="0" cellpadding="1" border="1" width="100%">
+  <thead>
+    <tr>
+      <th valign="top" class="cellrowborder"><strong>Action</strong></th>
+      <th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
+      <th style="text-align: center;"><strong>macOS</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Select next layer (sibling)</td>
+      <td style="text-align: center;"><kbd>Tab</kbd></td>
+      <td style="text-align: center;"><kbd>Tab</kbd></td>
+    </tr>
+    <tr>
+      <td>Select previous layer (sibling)</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>Tab</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>Tab</kbd></td>
+    </tr>
+    <tr>
+      <td>Select parent layer</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>Enter</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>Enter</kbd></td>
+    </tr>
+    <tr>
+      <td>Select children (group, frame, or boolean; single selection)</td>
+      <td style="text-align: center;"><kbd>Enter</kbd></td>
+      <td style="text-align: center;"><kbd>Enter</kbd></td>
+    </tr>
+    <tr>
+      <td>Rename next layer (while renaming in the panel)</td>
+      <td style="text-align: center;"><kbd>Tab</kbd></td>
+      <td style="text-align: center;"><kbd>Tab</kbd></td>
+    </tr>
+    <tr>
+      <td>Rename previous layer (while renaming in the panel)</td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>Tab</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>Tab</kbd></td>
+    </tr>
+    <tr>
+      <td>Toggle expand or collapse (group or board)</td>
+      <td style="text-align: center;">Click disclosure arrow</td>
+      <td style="text-align: center;">Click disclosure arrow</td>
+    </tr>
+    <tr>
+      <td>Expand entire subtree (when collapsed)</td>
+      <td style="text-align: center;"><kbd>Alt</kbd> + click disclosure arrow</td>
+      <td style="text-align: center;"><kbd>⌥</kbd> + click disclosure arrow</td>
+    </tr>
+    <tr>
+      <td>Collapse all layers in the sidebar (when expanded)</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> + click disclosure arrow</td>
+      <td style="text-align: center;"><kbd>⇧</kbd> + click disclosure arrow</td>
+    </tr>
+    <tr>
+      <td>Add layer to selection</td>
+      <td style="text-align: center;"><kbd>Ctrl</kbd> + click layer</td>
+      <td style="text-align: center;"><kbd>⌘</kbd> + click layer</td>
+    </tr>
+    <tr>
+      <td>Range select layers</td>
+      <td style="text-align: center;"><kbd>Shift</kbd> + click layer</td>
+      <td style="text-align: center;"><kbd>⇧</kbd> + click layer</td>
+    </tr>
+    <tr>
+      <td>Zoom to layer</td>
+      <td style="text-align: center;">Double-click layer icon</td>
+      <td style="text-align: center;">Double-click layer icon</td>
+    </tr>
   </tbody>
 </table>