diff --git a/docs/user-guide/design-systems/assets.njk b/docs/user-guide/design-systems/assets.njk
index b0e0d91b2f..53c2818345 100644
--- a/docs/user-guide/design-systems/assets.njk
+++ b/docs/user-guide/design-systems/assets.njk
@@ -36,8 +36,10 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
+
Semi-transparent colors in the library show their opacity percentage in the asset name.
Typographies
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.
+
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.
+
Page separators
+
You can add visual dividers in the page list to group pages without extra structure. Create an empty page, then rename it to ---. The page appears as a horizontal line in the list.
+
A page only becomes a separator if its name is --- and the page has no content on the canvas. A page with content that is named --- stays a normal page. Separators cannot be opened or selected; you can reorder or delete them like other pages.
+
If you rename the active page to ---, Penpot navigates to another page in the file. Double-click a separator to rename it; clearing the name and confirming removes the separator page.
+
+
+
+
Layers
Layers: 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.
Select a layer and press top/bottom arrows while pressing Ctrl/⌘ to move them in the layers list.
-
Press tab to change the layer selection to the next layer.
-
Press tab + Shift/⇧ to change the layer selection to the previous layer.
-
If the layer contains other layers, press Enter to select the first layer inside the group and Enter+ Shift/⇧ to move a level up.
+
Press Tab to change the layer selection to the next layer.
+
Press Tab + Shift/⇧ to change the layer selection to the previous layer.
+
While renaming a layer in the Layers panel, press Tab to save the name and start renaming the next layer below, or Shift/⇧ + Tab for the layer above (siblings in the same group).
+
If the layer contains other layers, press Enter to select the first layer inside the group and Enter + Shift/⇧ to move a level up.
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.
Open Find and Replace from the main menu (Edit) or press Ctrl/⌘ + H. The search bar at the top of the Layers panel expands with a replace field.
+
+
Search on canvas: finds text inside text layers on the current page.
+
Search layers: finds layer names on the current page.
+
+
Search is not case sensitive and does not support regular expressions. Layer type filters still apply, so you can narrow matches before replacing.
+
Use Replace for the current match or Replace all for every match on the page. Arrow buttons move between matches.
+
You can also open Find from the main menu or press Ctrl/⌘ + F to search without the replace field.
+
Collapse groups and boards
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.
To collapse all the layers, and just display the boards,
press Shift/⇧ + left click over the right arrow of a group or a board to collapse them all.
+
To expand the entire subtree of a collapsed group or board, press Alt/⌥ + click its disclosure arrow.
+
Numeric inputs in the Design sidebar
+
Many numeric fields in the Design sidebar support scrubbing: click and drag on the field to change the value. Hold Shift/⇧ to change the value ten times faster.
+
Drag-to-change is not available when a design token is applied to that field.
+
Focus mode
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.
To activate focus mode:
@@ -136,6 +160,7 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
Write your comment in the text box.
Press Post to leave the comment or Cancel to not do it.
+
URLs in comments are detected automatically and open in a new browser tab when clicked.
How to reply a comment
Open a comment by clicking at its bubble (a circled number).
@@ -199,6 +224,18 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
+
Preview a saved version
+
Open the version menu in the History tab and choose Preview version. The workspace opens in view-only mode: a banner shows the version name, and the Pages panel displays a View only badge.
+
You can inspect the design but not edit it. Use Exit in the banner to leave preview, or Restore to revert the file to that version.
+
+
+ Open the version menu to preview a saved version.
+
+
+
+ View-only preview. Exit returns to the current file; Restore applies this version.
+
+
Actions panel
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.
@@ -247,8 +284,14 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
-
To delete ruler guides drag the guide to the ruler or select the guide and press delete / supr.
+
+
To set an exact position, double-click the guide pill on the ruler and type a value.
+
Right-click a ruler guide to change its color from the preset swatches.
+
To delete ruler guides drag the guide to the ruler or select the guide and press delete / supr.
To show/hide ruler guides use the same shortcut as for rulers: Shift/CMD + Ctrl + R
+
+
+
Guides
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:
Snap to pixel
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.
+
When the pixel grid is visible, you can customize its color from the main menu (View).
+
+
+
Nudge amount
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.
diff --git a/docs/user-guide/first-steps/shortcuts.njk b/docs/user-guide/first-steps/shortcuts.njk
index 65bc407495..f653090fd6 100644
--- a/docs/user-guide/first-steps/shortcuts.njk
+++ b/docs/user-guide/first-steps/shortcuts.njk
@@ -112,6 +112,21 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
CtrlV
⌘V
+
+
Paste to replace
+
CtrlShiftV
+
⌘⇧V
+
+
+
Find
+
CtrlF
+
⌘F
+
+
+
Find and replace
+
CtrlH
+
⌘H
+
Redo
CtrlShiftZ
@@ -423,6 +438,90 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
G and then H
G and then H
+
+
Go to view mode
+
G and then V
+
G and then V
+
+
+
Go to view mode comments
+
G and then C
+
G and then C
+
+
+
+
+
Layers panel
+
Keyboard shortcuts and mouse actions for the Layers sidebar. Layer order in the panel is bottom-to-top; Tab and Shift + Tab move between siblings of the current selection (wrapping at the ends). Use Ctrl + ↑ / ↓ to change stacking order in the list (see Modify layers).
+
+
+
+
Action
+
Linux and Windows
+
macOS
+
+
+
+
+
Select next layer (sibling)
+
Tab
+
Tab
+
+
+
Select previous layer (sibling)
+
ShiftTab
+
⇧Tab
+
+
+
Select parent layer
+
ShiftEnter
+
⇧Enter
+
+
+
Select children (group, frame, or boolean; single selection)
+
Enter
+
Enter
+
+
+
Rename next layer (while renaming in the panel)
+
Tab
+
Tab
+
+
+
Rename previous layer (while renaming in the panel)
+
ShiftTab
+
⇧Tab
+
+
+
Toggle expand or collapse (group or board)
+
Click disclosure arrow
+
Click disclosure arrow
+
+
+
Expand entire subtree (when collapsed)
+
Alt + click disclosure arrow
+
⌥ + click disclosure arrow
+
+
+
Collapse all layers in the sidebar (when expanded)
+
+
+ 
+ 
+
+