📚 New architecture in user guide

docs/.eleventy.js

@@ -81,6 +81,9 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
   eleventyConfig.addPassthroughCopy("js");
 
+  // Redirects (for Cloudflare)
+  eleventyConfig.addPassthroughCopy({"_redirects": "_redirects" });
+
   /* Markdown Overrides */
   let markdownLibrary = markdownIt({
     html: true,

docs/_includes/layouts/user-guide.njk

@@ -4,7 +4,7 @@ templateClass: tmpl-user-guide
 ---
 
 {%- macro show_children(item) -%}
-  {%- for child in item | children | sorted('data.title') %}
+  {%- for child in item | children | sorted('data.order') %}
     {%- if loop.first -%}<ul>{%- endif -%}
     <li>
       <a href="{{ child.url }}">{{ child.data.title }}</a>

docs/_redirects

@@ -0,0 +1,239 @@
+/user-guide/introduction/	/user-guide/first-steps/
+/user-guide/introduction/quickstart/	/user-guide/first-steps/cloud-selfhost/
+/user-guide/introduction/shortcuts/	/user-guide/first-steps/shortcuts/
+/user-guide/introduction/shortcuts/#workspace-section	/user-guide/first-steps/shortcuts/#workspace-section
+/user-guide/introduction/shortcuts/#alignment	/user-guide/first-steps/shortcuts/#alignment
+/user-guide/introduction/shortcuts/#edit	/user-guide/first-steps/shortcuts/#edit
+/user-guide/introduction/shortcuts/#main-menu	/user-guide/first-steps/shortcuts/#main-menu
+/user-guide/introduction/shortcuts/#modify-layers	/user-guide/first-steps/shortcuts/#modify-layers
+/user-guide/introduction/shortcuts/#goto-screens-workspace	/user-guide/first-steps/shortcuts/#goto-screens-workspace
+/user-guide/introduction/shortcuts/#panels	/user-guide/first-steps/shortcuts/#panels
+/user-guide/introduction/shortcuts/#path-editor	/user-guide/first-steps/shortcuts/#path-editor
+/user-guide/introduction/shortcuts/#shapes	/user-guide/first-steps/shortcuts/#shapes
+/user-guide/introduction/shortcuts/#tools	/user-guide/first-steps/shortcuts/#tools
+/user-guide/introduction/shortcuts/#zoom-workspace	/user-guide/first-steps/shortcuts/#zoom-workspace
+/user-guide/introduction/shortcuts/#text	/user-guide/first-steps/shortcuts/#text
+/user-guide/introduction/shortcuts/#dashboard-section	/user-guide/first-steps/shortcuts/#dashboard-section
+/user-guide/introduction/shortcuts/#generic-dashboard	/user-guide/first-steps/shortcuts/#generic-dashboard
+/user-guide/introduction/shortcuts/#navigation-dashboard	/user-guide/first-steps/shortcuts/#navigation-dashboard
+/user-guide/introduction/shortcuts/#viewer-section	/user-guide/first-steps/shortcuts/#viewer-section
+/user-guide/introduction/shortcuts/#generic-viewer	/user-guide/first-steps/shortcuts/#generic-viewer
+/user-guide/introduction/shortcuts/#navigation-viewer	/user-guide/first-steps/shortcuts/#navigation-viewer
+/user-guide/introduction/shortcuts/#zoom-viewer	/user-guide/first-steps/shortcuts/#zoom-viewer
+/user-guide/introduction/info/	/user-guide/first-steps/info/
+/user-guide/introduction/info/#dev-diaries	/user-guide/first-steps/info/
+/user-guide/introduction/info/#video-tutorials	/user-guide/first-steps/info/
+/user-guide/introduction/info/#faqs	/user-guide/first-steps/info/
+/user-guide/the-interface/	/user-guide/first-steps/the-interface/
+/user-guide/the-interface/#interface-workspace	/user-guide/first-steps/the-interface/#interface-workspace
+/user-guide/the-interface/#interface-viewmode	/user-guide/first-steps/the-interface/#interface-viewmode
+/user-guide/the-interface/#interface-dashboard	/user-guide/first-steps/the-interface/#interface-dashboard
+/user-guide/the-interface/#your-account	/user-guide/account-teams/your-account/
+/user-guide/the-interface/#interface-ui-theme	/user-guide/account-teams/your-account/#interface-ui-theme
+/user-guide/workspace-basics/	/user-guide/designing/workspace-basics/
+/user-guide/workspace-basics/#viewport	/user-guide/designing/workspace-basics/#viewport
+/user-guide/workspace-basics/#workspace-menu	/user-guide/designing/workspace-basics/#workspace-menu
+/user-guide/workspace-basics/#zoom	/user-guide/designing/workspace-basics/#zoom
+/user-guide/workspace-basics/#dynamic-alignment	/user-guide/designing/workspace-basics/#dynamic-alignment
+/user-guide/workspace-basics/#rulers	/user-guide/designing/workspace-basics/#rulers
+/user-guide/workspace-basics/#ruler-guides	/user-guide/designing/workspace-basics/#ruler-guides
+/user-guide/workspace-basics/#guides	/user-guide/designing/workspace-basics/#guides
+/user-guide/workspace-basics/#add-guides	/user-guide/designing/workspace-basics/#add-guides
+/user-guide/workspace-basics/#hide-remove-guides	/user-guide/designing/workspace-basics/#hide-remove-guides
+/user-guide/workspace-basics/#square-guides	/user-guide/designing/workspace-basics/#square-guides
+/user-guide/workspace-basics/#row-guides	/user-guide/designing/workspace-basics/#row-guides
+/user-guide/workspace-basics/#column-guides	/user-guide/designing/workspace-basics/#column-guides
+/user-guide/workspace-basics/#guides-defaults	/user-guide/designing/workspace-basics/#guides-defaults
+/user-guide/workspace-basics/#guides-visibility	/user-guide/designing/workspace-basics/#guides-visibility
+/user-guide/workspace-basics/#guides-snap	/user-guide/designing/workspace-basics/#guides-snap
+/user-guide/workspace-basics/#snap-to-pixel	/user-guide/designing/workspace-basics/#snap-to-pixel
+/user-guide/workspace-basics/#nudge-amount	/user-guide/designing/workspace-basics/#nudge-amount
+/user-guide/workspace-basics/#shortcuts-panel	/user-guide/designing/workspace-basics/#shortcuts-panel
+/user-guide/workspace-basics/#history	/user-guide/designing/workspace-basics/#history
+/user-guide/workspace-basics/#comments	/user-guide/designing/workspace-basics/#comments
+/user-guide/layer-basics/	/user-guide/designing/layers/
+/user-guide/layer-basics/#pages	/user-guide/designing/workspace-basics/#layer-basics
+/user-guide/layer-basics/#layers-panel	/user-guide/layer-basics/#layers-panel
+/user-guide/layer-basics/#hide-lock	/user-guide/designing/layers/#hide-lock
+/user-guide/layer-basics/#creating-layers	/user-guide/designing/layers/#creating-layers
+/user-guide/layer-basics/#duplicating-layers	/user-guide/designing/layers/#duplicating-layers
+/user-guide/layer-basics/#delete-layers	/user-guide/designing/layers/#delete-layers
+/user-guide/layer-basics/#select-layers	/user-guide/designing/layers/#select-layers
+/user-guide/layer-basics/#group-layers	/user-guide/designing/layers/#group-layers
+/user-guide/layer-basics/#mask-layers	/user-guide/designing/layers/#mask-layers
+/user-guide/layer-basics/#move-layers	/user-guide/designing/layers/#move-layers
+/user-guide/layer-basics/#resize-layers	/user-guide/designing/layers/#resize-layers
+/user-guide/layer-basics/#rotate-layers	/user-guide/designing/layers/#rotate-layers
+/user-guide/layer-basics/#flip-layers	/user-guide/designing/layers/#flip-layers
+/user-guide/layer-basics/#scale-elements	/user-guide/designing/layers/#scale-elements
+/user-guide/layer-basics/#aling-distribute-layers	/user-guide/designing/layers/#aling-distribute-layers
+/user-guide/layer-basics/#layers-search	/user-guide/designing/workspace-basics/#layer-basics
+/user-guide/layer-basics/#collapse-groups	/user-guide/designing/workspace-basics/#layer-basics
+/user-guide/layer-basics/#boolean-operators	/user-guide/designing/layers/#boolean-operators
+/user-guide/layer-basics/#constraints	/user-guide/designing/layers/#constraints
+/user-guide/layer-basics/#focus-mode	/user-guide/designing/workspace-basics/#focus-mode
+/user-guide/layer-basics/#rtl-support	/user-guide/designing/text-typo/#rtl-support
+/user-guide/objects/	/user-guide/designing/layers/
+/user-guide/objects/#Boards	/user-guide/designing/layers/#Boards
+/user-guide/objects/#rectangles-ellipses	/user-guide/designing/layers/#rectangles-ellipses
+/user-guide/objects/#text	/user-guide/designing/layers/#text
+/user-guide/objects/#curves	/user-guide/designing/layers/#curves
+/user-guide/objects/#paths	/user-guide/designing/layers/#paths
+/user-guide/objects/#images	/user-guide/designing/layers/#images
+/user-guide/styling/	/user-guide/designing/layers/#styling-layers
+/user-guide/styling/#fill	/user-guide/designing/color-stroke/#fill
+/user-guide/styling/#color-picker	/user-guide/designing/color-stroke/#color-picker
+/user-guide/styling/#color-picker-gradients	/user-guide/designing/color-stroke/#color-picker-gradients
+/user-guide/styling/#color-palette	/user-guide/designing/color-stroke/#color-palette
+/user-guide/styling/#selected-colors	/user-guide/designing/color-stroke/#selected-colors
+/user-guide/styling/#strokes	/user-guide/designing/color-stroke/#strokes
+/user-guide/styling/#stroke-caps	/user-guide/designing/color-stroke/#stroke-caps
+/user-guide/styling/#radius	/user-guide/designing/layers/#radius
+/user-guide/styling/#shadow	/user-guide/designing/layers/#shadow
+/user-guide/styling/#blur	/user-guide/designing/layers/#blur
+/user-guide/styling/#blend	/user-guide/designing/layers/#blend
+/user-guide/styling/#copy-paste-properties	/user-guide/designing/layers/#copy-paste-properties
+/user-guide/exporting/	/user-guide/export-import/exporting-layers/
+/user-guide/exporting/#export-howto	/user-guide/export-import/exporting-layers/#export-howto
+/user-guide/exporting/#export-options	/user-guide/export-import/exporting-layers/#export-options
+/user-guide/exporting/#export-multiple-elements	/user-guide/export-import/exporting-layers/#export-multiple-elements
+/user-guide/exporting/#export-artboards-pdf	/user-guide/export-import/exporting-layers/#export-artboards-pdf
+/user-guide/exporting/#export-technical	/user-guide/export-import/exporting-layers/#export-technical
+/user-guide/flexible-layouts/	/user-guide/designing/flexible-layouts/
+/user-guide/flexible-layouts/#layouts-flex	/user-guide/designing/flexible-layouts/#layouts-flex
+/user-guide/flexible-layouts/#layouts-flex-css	/user-guide/designing/flexible-layouts/#layouts-flex
+/user-guide/flexible-layouts/#layouts-flex-add	/user-guide/designing/flexible-layouts/#layouts-flex-add
+/user-guide/flexible-layouts/#layouts-flex-arrange-reorder	/user-guide/designing/flexible-layouts/#layouts-flex-arrange-reorder
+/user-guide/flexible-layouts/#layouts-flex-properties	/user-guide/designing/flexible-layouts/#layouts-flex-properties
+/user-guide/flexible-layouts/#layouts-flex-elements	/user-guide/designing/flexible-layouts/#layouts-flex-elements
+/user-guide/flexible-layouts/#layouts-flex-spacing	/user-guide/designing/flexible-layouts/#layouts-flex-spacing
+/user-guide/flexible-layouts/#layouts-flex-code	/user-guide/designing/flexible-layouts/#layouts-flex-code
+/user-guide/flexible-layouts/#layouts-flex-examples	/user-guide/designing/flexible-layouts/#layouts-flex-examples
+/user-guide/flexible-layouts/#layouts-grid	/user-guide/designing/flexible-layouts/#layouts-grid
+/user-guide/flexible-layouts/#layouts-flex-css	/user-guide/designing/flexible-layouts/#layouts-grid
+/user-guide/flexible-layouts/#layouts-grid-add	/user-guide/designing/flexible-layouts/#layouts-grid-add
+/user-guide/flexible-layouts/#layouts-grid-terminology	/user-guide/designing/flexible-layouts/#layouts-grid-terminology
+/user-guide/flexible-layouts/#layouts-grid-properties	/user-guide/designing/flexible-layouts/#layouts-grid-properties
+/user-guide/flexible-layouts/#layouts-grid-elements	/user-guide/designing/flexible-layouts/#layouts-grid-elements
+/user-guide/flexible-layouts/#layouts-grid-colsrows	/user-guide/designing/flexible-layouts/#layouts-grid-colsrows
+/user-guide/flexible-layouts/#layouts-grid-units	/user-guide/designing/flexible-layouts/#layouts-grid-units
+/user-guide/flexible-layouts/#layouts-grid-areas	/user-guide/designing/flexible-layouts/#layouts-grid-areas
+/user-guide/flexible-layouts/#layouts-grid-code	/user-guide/designing/flexible-layouts/#layouts-grid-code
+/user-guide/libraries/	/user-guide/design-systems/assets/
+/user-guide/libraries/#assets	/user-guide/design-systems/assets/
+/user-guide/libraries/#asset-types	/user-guide/design-systems/assets/#asset-types
+/user-guide/libraries/#add-assets-to-library	/user-guide/design-systems/assets/#add-assets-to-library
+/user-guide/libraries/#edit-assets	/user-guide/design-systems/assets/#edit-assets
+/user-guide/libraries/#use-assets	/user-guide/design-systems/assets/#use-assets
+/user-guide/libraries/#organize-assets	/user-guide/design-systems/assets/#organize-assets
+/user-guide/libraries/#libraries	/user-guide/design-systems/libraries/
+/user-guide/libraries/#file-libraries	/user-guide/design-systems/libraries/#file-libraries
+/user-guide/libraries/#shared-libraries	/user-guide/design-systems/libraries/#shared-libraries
+/user-guide/design-tokens/	/user-guide/design-systems/design-tokens/
+/user-guide/design-tokens/#design-tokens-why	/user-guide/design-systems/design-tokens/
+/user-guide/design-tokens/#design-tokens-format	/user-guide/design-systems/design-tokens/
+/user-guide/design-tokens/#design-tokens-use	/user-guide/design-systems/design-tokens/#design-tokens-use-create
+/user-guide/design-tokens/#design-tokens-use-create	/user-guide/design-systems/design-tokens/#design-tokens-use-create
+/user-guide/design-tokens/#design-tokens-aliases	/user-guide/design-systems/design-tokens/#design-tokens-aliases
+/user-guide/design-tokens/#design-tokens-equations	/user-guide/design-systems/design-tokens/#design-tokens-equations
+/user-guide/design-tokens/#design-tokens-edit	/user-guide/design-systems/design-tokens/#design-tokens-edit
+/user-guide/design-tokens/#design-tokens-duplicate	/user-guide/design-systems/design-tokens/#design-tokens-duplicate
+/user-guide/design-tokens/#design-tokens-delete	/user-guide/design-systems/design-tokens/#design-tokens-delete
+/user-guide/design-tokens/#design-tokens-available	/user-guide/design-systems/design-tokens/#design-tokens-available
+/user-guide/design-tokens/#design-tokens-radius	/user-guide/design-systems/design-tokens/#design-tokens-radius
+/user-guide/design-tokens/#design-tokens-color	/user-guide/design-systems/design-tokens/#design-tokens-color
+/user-guide/design-tokens/#design-tokens-dimensions	/user-guide/design-systems/design-tokens/#design-tokens-dimensions
+/user-guide/design-tokens/#design-tokens-opacity	/user-guide/design-systems/design-tokens/#design-tokens-opacity
+/user-guide/design-tokens/#design-tokens-rotation	/user-guide/design-systems/design-tokens/#design-tokens-rotation
+/user-guide/design-tokens/#design-tokens-sizing	/user-guide/design-systems/design-tokens/#design-tokens-sizing
+/user-guide/design-tokens/#design-tokens-spacing	/user-guide/design-systems/design-tokens/#design-tokens-spacing
+/user-guide/design-tokens/#design-tokens-stroke-width	/user-guide/design-systems/design-tokens/#design-tokens-stroke-width
+/user-guide/design-tokens/#design-tokens-number	/user-guide/design-systems/design-tokens/#design-tokens-number
+/user-guide/design-tokens/#design-tokens-typography	/user-guide/design-systems/design-tokens/#design-tokens-typography
+/user-guide/design-tokens/#design-tokens-sets	/user-guide/design-systems/design-tokens/#design-tokens-sets
+/user-guide/design-tokens/#design-tokens-sets-create	/user-guide/design-systems/design-tokens/#design-tokens-sets
+/user-guide/design-tokens/#design-tokens-sets-edit	/user-guide/design-systems/design-tokens/#design-tokens-sets
+/user-guide/design-tokens/#design-tokens-groups	/user-guide/design-systems/design-tokens/#design-tokens-sets
+/user-guide/design-tokens/#design-tokens-themes	/user-guide/design-systems/design-tokens/#design-tokens-themes
+/user-guide/design-tokens/#design-tokens-themes-create	/user-guide/design-systems/design-tokens/#design-tokens-themes
+/user-guide/design-tokens/#design-tokens-themes-edit	/user-guide/design-systems/design-tokens/#design-tokens-themes
+/user-guide/design-tokens/#design-tokens-themes-group	/user-guide/design-systems/design-tokens/#design-tokens-themes
+/user-guide/design-tokens/#design-tokens-import-export	/user-guide/design-systems/design-tokens/#design-tokens-import-export
+/user-guide/design-tokens/#design-tokens-import-options	/user-guide/design-systems/design-tokens/#design-tokens-import-export
+/user-guide/design-tokens/#design-tokens-export-options	/user-guide/design-systems/design-tokens/#design-tokens-import-export
+/user-guide/components/	/user-guide/design-systems/components/
+/user-guide/components/#components-basics	/user-guide/design-systems/components/
+/user-guide/components/#component-create	/user-guide/design-systems/components/#component-create
+/user-guide/components/#component-find	/user-guide/design-systems/components/#component-find
+/user-guide/components/#component-main-components-page	/user-guide/design-systems/components/#component-main-components-page
+/user-guide/components/#working-with-components	/user-guide/design-systems/components/#component-group
+/user-guide/components/#component-group	/user-guide/design-systems/components/#component-group
+/user-guide/components/#component-detach	/user-guide/design-systems/components/#component-detach
+/user-guide/components/#component-annotate	/user-guide/design-systems/components/#component-annotate
+/user-guide/components/#component-overrides-relationships	/user-guide/design-systems/components/#component-overrides
+/user-guide/components/#component-overrides	/user-guide/design-systems/components/#component-overrides
+/user-guide/components/#component-update	/user-guide/design-systems/components/#component-update
+/user-guide/components/#component-swap	/user-guide/design-systems/components/#component-swap
+/user-guide/components/#component-variants	/user-guide/design-systems/variants/
+/user-guide/components/#component-variants-why-are-variants-important	/user-guide/design-systems/variants/#component-variants-why-are-variants-important
+/user-guide/components/#component-understanding-variants-properties-and-values	/user-guide/design-systems/variants/#component-understanding-variants-properties-and-values
+/user-guide/components/#component-create-and-modify-variants	/user-guide/design-systems/variants/#component-create-and-modify-variants
+/user-guide/components/#component-use-variants	/user-guide/design-systems/variants/#component-use-variants
+/user-guide/prototyping/	/user-guide/prototyping-testing/prototyping/
+/user-guide/prototyping/#prototyping-connection	/user-guide/prototyping-testing/prototyping/#prototyping-connection
+/user-guide/prototyping/#prototype-anatomy	/user-guide/prototyping-testing/prototyping/#prototype-anatomy
+/user-guide/prototyping/#interaction-triggers	/user-guide/prototyping-testing/prototyping/#interaction-triggers
+/user-guide/prototyping/#prototyping-actions	/user-guide/prototyping-testing/prototyping/#prototyping-actions
+/user-guide/prototyping/#prototyping-actions-navigate	/user-guide/prototyping-testing/prototyping/#prototyping-actions-navigate
+/user-guide/prototyping/#prototyping-actions-overlay	/user-guide/prototyping-testing/prototyping/#prototyping-actions-overlay
+/user-guide/prototyping/#prototyping-actions-overlay-toggle	/user-guide/prototyping-testing/prototyping/#prototyping-actions-overlay-toggle
+/user-guide/prototyping/#prototyping-actions-overlay-close	/user-guide/prototyping-testing/prototyping/#prototyping-actions-overlay-close
+/user-guide/prototyping/#prototyping-actions-previous	/user-guide/prototyping-testing/prototyping/#prototyping-actions-previous
+/user-guide/prototyping/#prototyping-actions-url	/user-guide/prototyping-testing/prototyping/#prototyping-actions-url
+/user-guide/prototyping/#prototyping-animations	/user-guide/prototyping-testing/prototyping/#prototyping-animations
+/user-guide/prototyping/#prototyping-animations-dissolve	/user-guide/prototyping-testing/prototyping/#prototyping-animations-dissolve
+/user-guide/prototyping/#prototyping-animations-Slide	/user-guide/prototyping-testing/prototyping/#prototyping-animations-Slide
+/user-guide/prototyping/#prototyping-animations-push	/user-guide/prototyping-testing/prototyping/#prototyping-animations-push
+/user-guide/prototyping/#prototyping-flows	/user-guide/prototyping-testing/prototyping/#prototyping-flows
+/user-guide/prototyping/#prototyping-flows-starting	/user-guide/prototyping-testing/prototyping/#prototyping-flows-starting
+/user-guide/prototyping/#prototyping-flows-multiple	/user-guide/prototyping-testing/prototyping/#prototyping-flows-multiple
+/user-guide/prototyping/#prototyping-fix-scroll	/user-guide/prototyping-testing/prototyping/#prototyping-fix-scroll
+/user-guide/view-mode/	/user-guide/prototyping-testing/testing-view-mode/
+/user-guide/view-mode/#viewmode-interface	/user-guide/prototyping-testing/testing-view-mode/#viewmode-interface
+/user-guide/view-mode/#viewmode-launch	/user-guide/prototyping-testing/testing-view-mode/#viewmode-launch
+/user-guide/view-mode/#viewmode-features	/user-guide/prototyping-testing/testing-view-mode/#viewmode-features
+/user-guide/view-mode/#viewmode-comments	/user-guide/prototyping-testing/testing-view-mode/#viewmode-comments
+/user-guide/view-mode/#viewmode-sharing	/user-guide/prototyping-testing/testing-view-mode/#viewmode-sharing
+/user-guide/view-mode/#viewmode-inspect	/user-guide/prototyping-testing/testing-view-mode/#viewmode-inspect
+/user-guide/inspect/	/user-guide/dev-tools/
+/user-guide/inspect/#inspect-activate	/user-guide/dev-tools/#inspect-design
+/user-guide/inspect/#inspect-viewmode	/user-guide/dev-tools/#inspect-design
+/user-guide/inspect/#inspect-workspace	/user-guide/dev-tools/#inspect-design
+/user-guide/inspect/#inspect-measure	/user-guide/dev-tools/#inspect-measure
+/user-guide/inspect/#inspect-info	/user-guide/dev-tools/#inspect-info
+/user-guide/inspect/#inspect-copy	/user-guide/dev-tools/#inspect-copy
+/user-guide/inspect/#inspect-code	/user-guide/dev-tools/#inspect-code
+/user-guide/inspect/#inspect-export	/user-guide/dev-tools/#inspect-export
+/user-guide/import-export/	/user-guide/export-import/export-import-files/
+/user-guide/import-export/#files-export	/user-guide/export-import/export-import-files/#files-export
+/user-guide/import-export/#export-penpot-files	/user-guide/export-import/export-import-files/#files-export
+/user-guide/import-export/#files-import	/user-guide/export-import/export-import-files/#files-import
+/user-guide/import-export/#penpot-formats	/user-guide/export-import/export-import-files/#penpot-formats
+/user-guide/teams/	/user-guide/account-teams/teams/
+/user-guide/teams/#teams-management	/user-guide/account-teams/teams/#teams-management
+/user-guide/teams/#teams-members	/user-guide/account-teams/teams/#teams-members
+/user-guide/teams/#teams-invites	/user-guide/account-teams/teams/#teams-invites
+/user-guide/teams/#teams-webhooks	/user-guide/plugins-integrations/#teams-webhooks
+/user-guide/custom-fonts/	/user-guide/designing/text-typo/#custom-fonts
+/user-guide/custom-fonts/#customfonts-upload	/user-guide/designing/text-typo/#customfonts-upload
+/user-guide/custom-fonts/#customfonts-families	/user-guide/designing/text-typo/#customfonts-families
+/user-guide/custom-fonts/#customfonts-edit	/user-guide/designing/text-typo/#customfonts-edit
+/user-guide/custom-fonts/#customfonts-using	/user-guide/designing/text-typo/#customfonts-using
+/user-guide/plugins/	/user-guide/plugins-integrations/
+/user-guide/plugins/#plugins	/user-guide/plugins-integrations/
+/user-guide/plugins/#installation	/user-guide/plugins-integrations/#installation
+/user-guide/plugins/#hub-installation	/user-guide/plugins-integrations/#installation
+/user-guide/plugins/#url-installation	/user-guide/plugins-integrations/#installation
+/user-guide/plugins/#plugin-manager	/user-guide/plugins-integrations/#plugin-manager
+/user-guide/plugins/#using-plugins	/user-guide/plugins-integrations/#using-plugins
+/user-guide/plugins/#create-plugin	/user-guide/plugins-integrations/#create-plugin

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

@@ -0,0 +1,14 @@
+---
+title: Comments
+order: 4
+desc: Learn how to import and export files in Penpot, the free, open-source design tool. Discover file formats, backups, sharing, and library management.
+---
+
+<h1 id="comments">Comments</h1>
+<p  class="main-paragraph">Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
+
+<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>
+
+<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/account-teams/index.njk

@@ -0,0 +1,28 @@
+---
+title: Account & teams
+order: 8
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1 id="section-1">Account & teams</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/account-teams/your-account">
+      <h2>Your account →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/account-teams/teams">
+      <h2>Teams →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/account-teams/comments/">
+      <h2>Comments →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

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

@@ -1,5 +1,6 @@
 ---
-title: 16· Teams
+title: Teams
+order: 2
 desc: Manage teams and roles with Penpot's collaboration features! Learn how to manage teams, roles (Viewer, Editor, Admin, Owner), send invites and use webhooks.
 ---
 
@@ -65,9 +66,4 @@ member is allowed to do depends on their permissions.</p>
 </ul>
 <figure><img src="/img/teams/team-invitations-actions.webp" alt="Team invitations actions" /></figure>
 
-<h2 id="teams-webhooks">Webhooks</h2>
 
-<p>Webhooks allow other websites and apps to be notified when certain events happen on Penpot, ensuring to create integrations with other services. While we are still working on a plugin system, this is a clever and simple way to create integrations with other services.</p>
-<figure><img src="/img/teams/webhooks.webp" alt="Webhooks" /></figure>
-
-<p>You can find detailed info about Penpot webhooks at the <a href="/technical-guide/integration/#webhooks">Technical Guide</a>.</p>

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

@@ -0,0 +1,74 @@
+---
+title: Your account
+order: 1
+desc: Learn how to import and export files in Penpot, the free, open-source design tool. Discover file formats, backups, sharing, and library management.
+---
+
+<h1 id="account">Your account</h1>
+<p class="main-paragraph">Your account settings can be changed at the user area, in <b>Your account</b>. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.</p>
+
+<h3 id="your-account-profile">Profile
+  <a class="direct-link" href="#your-account-profile">#</a>
+</h3>
+<p>If you want to change the email address associated to your account or remove your account entirely, this can be done in the <b>Profile</b> section.</p>
+<figure>
+  <img src="/img/interface/youraccount-profile.webp" alt="Penpot's profile" />
+</figure>
+
+<h3 id="your-account-password">Password
+  <a class="direct-link" href="#your-account-password">#</a>
+</h3>
+<p>If you want to change your password to a new one, this can be done in the <b>Password</b> section.</p>
+<figure>
+  <img src="/img/interface/youraccount-password.webp" alt="Penpot's password" />
+</figure>
+
+<h3 id="your-account-notifications">Notifications
+  <a class="direct-link" href="#your-account-notifications">#</a>
+</h3>
+<p>At the <strong>Notifications</strong> section you can configure the email and dashboard notifications.</p>
+<figure>
+  <img src="/img/interface/youraccount-notifications.webp" alt="Penpot's notifications" />
+</figure>
+
+<h3 id="your-account-settings">Settings
+  <a class="direct-link" href="#your-account-settings">#</a>
+</h3>
+<p>At the <strong>Settings</strong> section you can change the language and the UI color theme.</p>
+<figure>
+  <img src="/img/interface/youraccount-settings.webp" alt="Penpot's settings" />
+</figure>
+
+<h3 id="interface-ui-theme">UI Theme</h3>
+<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
+<ul>
+  <li>From "Your account" > "Settings".</li>
+  <li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
+</ul>
+
+<figure>
+  <a href="/img/interface/dashboard-light.webp" target="_blank">
+    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
+  </a>
+  <figcaption>Penpot's dashboard in light mode</figcaption>
+</figure>
+<figure>
+  <a href="/img/interface/workspace-light.webp" target="_blank">
+    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
+  </a>
+  <figcaption>Penpot's workspace in light mode</figcaption>
+</figure>
+<figure>
+  <a href="/img/interface/viewmode-light.webp" target="_blank">
+    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
+  </a>
+  <figcaption>Penpot's view mode in light mode</figcaption>
+</figure>
+
+
+<h3 id="your-account-accesstokens">Access tokens
+  <a class="direct-link" href="#your-account-accesstokens">#</a>
+</h3>
+<p>At the <strong>Asset tokens</strong> section you can manage your access tokens. <a href="https://help.penpot.app/technical-guide/integration/#access-tokens" target="_blank">Read more about access tokens here</a>.</p>
+
+

docs/user-guide/components/index.njk

@@ -1,338 +0,0 @@
----
-title: 11· Components
-desc: Streamline your design workflow with Penpot's Components guide! Learn to create, duplicate, group, and manage reusable 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 files. This can help you maintain consistency across a group of designs.</p>
-
-<h2 id="components-basics">Components basics</h2>
-<p>A component consists of two elements:</p>
-<ul>
-  <li><strong>Main component</strong>: The original source of truth. It defines the core properties of the component.</li>
-  <li><strong>Component copy</strong> (also known as instance): A duplicate of the main component that inherits its properties.</li>
-</ul>
-<figure>
-  <img src="/img/components/components-main-copy.webp" alt="Components main and copy" />
-  <figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
-</figure>
-<p>All component copies used in a file are linked in a way that updates made to the Main component can reflect in their component copies. You can override properties for component copies, so that you can manage singularities while maintaining properties in common.</p>
-
-<h3 id="component-create">Create components</h3>
-<h4>Create a component</h4>
-<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>
-<figure>
-  <video title="Creating a component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-create.webp" height="auto">
-    <source src="/img/components/components-create.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Duplicate a component</h4>
-<p>You can duplicate a component <a href="/user-guide/layer-basics/#duplicating-layers">the same way</a> you can duplicate any other layer. When duplicating a component, you are creating a component copy that will be linked to its main component.</p>
-
-<h4>Duplicate as main component</h4>
-<p>You can duplicate a  component as a new main component from the assets sidebar. Just select the component at the library, open the menu with right click and select the option "Duplicate main".</p>
-<figure>
-  <video title="Duplicate main component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-duplicate-main.webp" height="auto">
-    <source src="/img/components/components-duplicate-main.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Delete a main component</h4>
-<p>You can delete main components and its copies anytime <a href="/user-guide/layer-basics/#deleting-layers">the same way</a> you can delete any other layer.</p>
-<p>Deleting a main component at the viewport means deleting it at the assets library and viceversa, so be careful!</p>
-<figure>
-  <video title="Deleting main components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-delete.webp" height="auto">
-    <source src="/img/components/components-delete.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Restore a main component</h4>
-<p>If a main component has been deleted and you have access to a copy of it, you can use the copy to restore its main. There are two ways to do it:</p>
-<ul>
-  <li>From the <strong>viewport menu</strong>: Select the component copy of a deleted main component, right click and press the option "Restore main component".</li>
-  <li>From the <strong>sidebar menu</strong>: Open the sidebar menu of the component copy and press the option "Restore main component".</li>
-</ul>
-<figure>
-  <img src="/img/components/components-restore.webp" alt="Components main and copy" />
-  <figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
-</figure>
-
-<h3 id="component-find">Find main components</h3>
-<p>Where's my component? There are ways to find main components at the assets panel and at the design viewport.</p>
-
-<h4>Find a main component at the assets panel</h4>
-<p>Select a main component at the viewport and then press "Show in assets panel" at the options of the right sidebar.</p>
-<figure>
-  <video title="Show main component in the assets library" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-asset.webp" height="auto">
-    <source src="/img/components/components-show-asset.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Find a main component at the viewport</h4>
-<p>Select a component copy and then press "Show main component" at the viewport menu or the right sidebar menu.</p>
-<figure>
-  <video title="Show main component" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-main.webp" height="auto">
-    <source src="/img/components/components-show-main.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3 id="component-main-components-page">Main components page</h3>
-<p>If you find a page at a file called "Main components" this will probably mean that the file had assets with the previous components system and has been migrated to the current components system. The previous system didn't have the components as layers at the design file, only at the assets library, so when migrating a file to the new version Penpot automatically creates a page where to place all the components, grouping them using the library groups structure.</p>
-<figure>
-  <img src="/img/components/components-page-main.webp" alt="Main components page" />
-</figure>
-
-<h2 id="working-with-components">Working with components</h2>
-<h3 id="component-group">Group components</h3>
-<p>At the Components section from the Assets library, there are two ways to create groups in a components library.</p>
-<ol>
-  <li><strong>Using slashes (/):</strong> Select one component and rename it as follows: "<i>FOLDER NAME/COMPONENT NAME</i>". For example, "<i>Buttons/Alert Button</i>".</li>
-  <li><strong>Using the "Group" option:</strong> Select one or more components at the Assets library, right click to show the menu and then select "Group".</li>
-</ol>
-<figure>
-  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
-    <source src="/img/components/components-group.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Ungroup components</h4>
-<p>You can ungroup the components the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>
-
-<h4>Drag components to groups</h4>
-<p>One very direct way to move components between groups at the assets library is by dragging them.</p>
-<figure>
-  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
-    <source src="/img/components/components-drag.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3 id="component-detach">Detach components</h3>
-<p>Detach a component copy to unlink it from its Main component and transform it into a group layer. Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or right click and select the option “Detach instance” at the component menu.</p>
-<p>You can also detach components in bulk by selecting several components and performing the same action.</p>
-
-<h3 id="component-annotate">Annotate components</h3>
-<p>You can add text annotations to main components. The annotations are shown in every component copy. It is extremely useful to attach specifications that can be read at each component copy.</p>
-<figure>
-  <video title="Annotating components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-annotation.webp" height="auto">
-    <source src="/img/components/components-annotation.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<p>The annotations are also shown at the  <a href="/user-guide/inspect">Inspect tab</a>, as another option to improve communication between designers and developers.</p>
-<figure>
-  <img src="/img/components/components-annotations-inspect.webp" alt="Annotations at inspect tab" />
-</figure>
-
-<h2 id="component-overrides-relationships">Component Overrides & Relationships</h2>
-<h3 id="component-overrides">Component overrides</h3>
-<p>Main components represent the more generic information of an element in a design system. You will usually need to change specific things (like a text, a color or an icon) in a component while maintaining the inheritance of the rest of it properties. Component overrides allows you to do that in Penpot.</p>
-<p>Overrides are modifications made in a specific copy that are not in its main component. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
-<figure>
-  <img src="/img/components/components-overrides.webp" alt="Components overrides" />
-</figure>
-
-<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>
-<figure>
-  <video title="Reset component overrides" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-reset-overrides.webp" height="auto">
-    <source src="/img/components/components-reset-overrides.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3 id="component-update">Update main from copies</h3>
-<p>You can push changes made at a component copy to a main component:</p>
-<ol>
-  <li>Select a component copy that has changes that override one or more properties of its main component.</li>
-  <li>Right click and select the option “Update main component” at the component menu. You can find this option at the viewport menu and at the sidebar menu.</li>
-</ol>
-<figure>
-  <img src="/img/components/components-update.webp" alt="Updating a main component from a copy" />
-</figure>
-<p>If the component that is about to be updated is located in a different file which is connected to this file as a <a href="/user-guide/libraries/#shared-libraries">shared library</a>, a notification will be shown offering the options to update or dismiss.</p>
-<figure>
-  <img src="/img/components/components-update-shared.webp" alt="Prompt shown to update a main component that is in a shared library" />
-</figure>
-
-<h3 id="component-swap">Swap components</h3>
-<p>Penpot allows you to easily substitute component copies with other component copies.</p>
-<ol>
-  <li>Select a component <strong>copy</strong>. You can not swap main components.</li>
-  <li>At the right sidebar, press the component name to launch the swap menu.</li>
-  <li>Choose the component you want to swap with and click on it.</li>
-</ol>
-<p class="advice"><strong>Tip:</strong> The first options shown to swap a component are the ones at the same level inside the assets library, so group them properly.</p>
-<figure>
-  <video title="Swapping components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-swap.webp" height="auto">
-    <source src="/img/components/components-swap.mp4" type="video/mp4">
-  </video>
-</figure>
-
-
-
-<h2 id="component-variants">Component Variants</h2>
-<p>Variants allow you to group similar components, such as buttons, icons, or toggles, into a single, customizable component. Rather than navigating through separate components for every possible state, size, or style, you can manage them all from one unified component using clearly defined properties.</p>
-<p>Imagine a single button component that can switch between primary and secondary styles, active and disabled states, and small to large sizes. Useful, right? That’s the power of Variants.</p>
-
-<h3 id="component-variants-why-are-variants-important">Why are Variants Important?</h3>
-<ul>
-  <li><strong>Cleaner libraries</strong><br>
-    Keep related designs organized in the Design viewport, Layers panel, and swap menu. Variants streamline your components into tidy, manageable sets, allowing you to retain overrides when switching between them.
-  </li>
-  <li><strong>Faster design workflows</strong><br>
-    Make it easier to find and select the right version by quickly switching between states or styles using simple property controls.
-  </li>
-  <li><strong>Better team collaboration</strong><br>
-    With variants, you can match the way states are handled in code, helping designers and developers stay in sync, fostering better collaboration between design and development teams.
-  </li>
-</ul>
-
-<figure>
-  <iframe 
-    width="672px" 
-    height="378px"
-    src="https://peertube.kaleidos.net/videos/embed/v9Yh79hom5otcBEnqondBY"
-    title="Penpot Variants Demo"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen>
-  </iframe>
-  <figcaption>Penpot – Variants release</figcaption>
-</figure>
-
-<h3 id="component-understanding-variants-properties-and-values">Understanding variants: properties and values</h3>
-<p>A component’s variants are organized by properties and their values.</p>
-<ul>
-  <li><strong>Properties</strong> define the dimensions that distinguish your variants (for example: <em>Color</em>, <em>Size</em>, <em>State</em>).</li>
-  <li><strong>Values</strong> are the specific options within a property (for example: <em>Primary/Secondary</em>, <em>Small/Large, Default/Hover/Pressed</em>)</li>
-</ul>
-<p>Each variant is simply one unique combination of values across all properties (for example, <code class="language-js">Color=Primary + Size=Small + State=Hover</code>).</p>
-<p>Variants must have at least one property, and property values should be kept consistent to make switching predictable and to preserve overrides across connected layers.</p>
-
-<h3 id="component-create-and-modify-variants">Create and modify variants</h3>
-
-<h4 id="component-create-variants">Create variants</h4>
-<p>You can create variants from an existing component or from another variant:</p>
-<ul>
-  <li><strong>From a component:</strong> Press Ctrl + K or right-click and select the menu option <strong>Create variant</strong>.</li>
-  <li><strong>From a variant:</strong> Select the variant and press Ctrl + K or right-click and select the menu option <strong>Create variant</strong>.</li>
-  <li><strong>By dragging:</strong> Drag a main component into an existing component with variants to add it as a new variant.</li>
-  <li><strong>From the Design tab</strong> (right sidebar): Select a component or a variant, open the context menu next to the component name and select the menu option <strong>Create variant</strong>.</li>
-</ul>
-<figure>
-  <img src="/img/variants/01-variants-create.webp" alt="Variants creation button" />
-</figure>
-<p><strong>When a variant is created:</strong></p>
-<ul>
-  <li>It appears next to the original in a dedicated variant area (by default in horizontal flex layout).</li>
-  <li>Shared layers between variants are automatically connected (<a href="#component-understanding-overrides">connection conditions</a>) so that overrides can be preserved.</li>
-  <li>Variants are named using their property values (e.g., <em>Primary / Hover</em>).</li>
-</ul>
-<figure>
-  <img src="/img/variants/02-variants-created.webp" alt="Variant created" />
-</figure>
-
-<h4 id="component-manage-variant-properties">Manage variant properties</h4>
-<p>Properties are key to defining and differentiating your variants. They appear in the Design tab when a variant or component with variants is selected.</p>
-<figure>
-  <img src="/img/variants/03-variants-property-add.webp" alt="Add variant property" />
-</figure>
-<h5>Add new properties</h5>
-<ul>
-  <li><strong>From the Design tab:</strong> When the component or one of its variants is selected, you can add a new property via a menu. This property will be added to all existing variants with a default value (e.g., <em>Value 1</em>).</li>
-  <li><strong>From the Layers panel:</strong> using the formula <code class="language-js">[property_name]=[value]</code>.</li>
-</ul>
-
-<h5>Edit properties</h5>
-<ul>
-  <li><strong>From the Design tab:</strong> Select a component or a variant, then click on the property name to edit its name and/or value.</li>
-  <li><strong>From the Layers panel:</strong> using the formula <code class="language-js">[property_name]=[value]</code>.</li>
-</ul>
-<figure>
-  <img src="/img/variants/04-variants-properties-edit.webp" alt="Edit variant property" />
-</figure>
-
-<h5>Delete properties</h5>
-<ul>
-  <li><strong>From the Design tab:</strong> Select the main component (not an individual variant) and press the minus button next to the property.</li>
-  <li><strong>From the Layers panel:</strong> You can delete a property by editing the names of all variants so that none of them contain that property in their formula.</li>
-</ul>
-<p class="advice">Variants must have at least one property. You can’t delete the last one.</p>
-<p>When <strong>multiple variants are selected</strong>, the Design tab will show all their properties and values. If a property has different values across the selected variants, it will display “Mixed,” allowing you to override them collectively.</p>
-
-<h4 id="component-delete-variants">Delete Variants</h4>
-<ul>
-  <li>Select the variant, press right-click, and select the menu option <strong>Delete</strong>.</li>
-  <li><strong>Dragging</strong> a variant outside its component turns it into an independent component instead of deleting it.</li>
-</ul>
-<p class="advice">If you delete the last variant, the entire component is removed.</p>
-
-<h4 id="component-restore-variants">Restore Variants</h4>
-<p>If you have a copy of a variant whose original was deleted, you can restore it:</p>
-<ul>
-  <li>Select the variant copy, press right-click, and select the menu option <strong>Restore variant</strong> (will show if the main component still exists).</li>
-</ul>
-
-<h3 id="component-use-variants">Use variants</h3>
-<p>Once you have created your variants, you can place a copy of a component with variants into your design and then switch between its different versions.</p>
-
-<h4 id="component-from-the-assets-tab">From the Assets tab</h4>
-<p>Drag and drop a component with variants from the Assets tab onto the design viewport, just like you would with any other component. Once placed, you can then use its properties in the Design tab to switch to the desired variant.</p>
-
-<h4 id="component-from-the-design-tab">From the Design tab</h4>
-<p>When a variant is selected:</p>
-<ul>
-  <li>You’ll see its properties and values.</li>
-  <li>Change one or more property values to switch to another variant.</li>
-  <li>If your chosen combination doesn’t exist, Penpot will suggest the closest match.</li>
-</ul>
-<figure>
-  <img src="/img/variants/05-variants-use.webp" alt="Using variants" />
-</figure>
-
-<h4 id="component-understanding-overrides">Understanding overrides</h4>
-<p>A key benefit of variants is the ability to <strong>preserve overrides when you switch between them</strong>. An override is a specific change you make to a component instance that diverges from its original definition (e.g., changing text content or a specific color).</p>
-<p>Layers between variants are considered connected if they:</p>
-<ol>
-  <li>Share the <strong>same name</strong>.</li>
-  <li><strong>Are the same type</strong>. Rectangle, ellipse, paths, and boolean operations count as the same type.</li>
-  <li><strong>Have the same hierarchy level.</strong> Groups, boards, and layouts are considered equivalent.</li>
-</ol>
-<figure>
-  <img src="/img/variants/variants-connections-conditions.png" alt="Variants connections conditions" />
-</figure>
-<p><strong>Example:</strong> If <code class="language-js">Variant 1</code> has a text layer named <em>label</em> with red color, and you change its content to <em>Click here</em> in an instance, then switch to <code class="language-js">Variant 2</code> (which also has a <em>label</em> text layer), the <em>Click here</em> content will be preserved, and <code class="language-js">Variant 2</code>’s color will be applied.</p>
-<p><strong>Changing any of these</strong> (e.g., renaming or grouping a layer) breaks the connection, but reverting the change will restore it.</p>
-
-<h4 id="component-bulk-converting-components-to-variants">Bulk converting components to variants</h4>
-<p>If you already have multiple related components, you can combine them into a single component with variants:</p>
-<ul>
-  <li><strong>From Assets tab</strong>: Select components in the same group and right-click → <strong>Combine as variants</strong>.</li>
-  <li><strong>From viewport</strong>: Select multiple components → Right-click → <strong>Combine as variants</strong>.</li>
-  <li><strong>From Design tab</strong>: If conditions are met, a Combine as variants button appears on the component card.</li>
-</ul>
-<figure>
-  <img src="/img/variants/06-variants-combine.webp" alt="Combining components as variants" />
-</figure>
-<p><strong>Conditions:</strong></p>
-<ul>
-  <li>Components must be on the same page.</li>
-  <li>Components that already have variants cannot be combined.</li>
-</ul>
-<p><strong>When combined:</strong></p>
-<ul>
-  <li>A variant area is created containing all former components.</li>
-  <li>Property names and values are generated from the component names.</li>
-</ul>
-
-<h4 id="component-transforming-variants-back-into-components">Transforming Variants Back into Components</h4>
-<p>To turn a variant into an independent component:</p>
-<ul>
-  <li>Drag it outside the variant area (Design viewport or Layers panel).</li>
-  <li>Cut and paste it outside the variant area.</li>
-</ul>
-<p>The new component’s name includes the original component name and the variant’s property values.</p>

docs/user-guide/custom-fonts/index.njk

@@ -1,38 +0,0 @@
----
-title: 17· Custom fonts
-desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Penpot! Enhance your designs with personalised typography.
----
-
-<h1 id="customfonts">Custom fonts</h1>
-<p class="main-paragraph">If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>
-
-<h2 id="customfonts-upload">Upload local fonts</h2>
-<p>To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.</p>
-<p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
-<p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>
-
-<h3>To upload a local font:</h3>
-<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>
-<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>
-</ol>
-<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>
-
-<h2 id="customfonts-families">Group fonts in font families</h2>
-<p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
-<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.</p>
-<p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>
-
-<h2 id="customfonts-edit">Edit custom fonts</h2>
-<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>
-
-<h2 id="customfonts-using">Using custom fonts</h2>
-<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>
-<p><img src="/img/customfonts-use.gif" alt="local fonts" /></p>
-
-<h2>Fonts Licensing and Usage</h2>
-<p>You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of <a href="https://penpot.app/terms" target="_blank">Penpot's Terms of Service</a>. You also might want to read about <a href="https://www.typography.com/faq" target="_blank">font licensing</a>.</p>

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

@@ -1,28 +1,27 @@
 ---
-title: 09· Asset Libraries
+title: Assets
+order: 1
 desc: Use Penpot's asset libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free!
 ---
 
-<h1 id="asset-libraries">Asset Libraries</h1>
+<h1 id="assets">Assets</h1>
-<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
+<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
 
-<h2 id="assets">Assets</h2>
+<h2 id="asset-types">Asset types</h2>
-
-<h3 id="asset-types">Asset types</h3>
 <p>In Penpot you can store different type of assets:</p>
 <ul>
-  <li><strong>Components:</strong> A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). Learn more at the <a href="/user-guide/components/">components section</a>.</li>
+  <li><strong>Components:</strong> A component is a layer or group of layers that can be reused multiple times across files (projects and teams in the future). Learn more at the <a href="/user-guide/design-systems/components/">components section</a>.</li>
   <li><strong>Colors:</strong> Create your color styles and use them on fills and strokes.</li>
   <li><strong>Typographies:</strong> Penpot allows you to save typography styles with a set of reusable properties. You can always unlink a typography style maintaining the properties for the text layer.</li>
   <li><strong>[Deprecated] Graphics:</strong> In Penpot versions older than 2.0, bitmap and vector images can be stored at the Graphics section. This type was deprecated in favor of components.</li>
 </ul>
 
-<h3 id="add-assets-to-library">Add assets to libraries</h3>
+<h2 id="add-assets-to-library">Add assets to libraries</h2>
 <p>You can use the “+” icon to add assets. Each of the categories have their own specific adding action.</p>
-<h4>Components</h4>
+<h3>Components</h3>
 <p>There are two ways to add components to an assets library:</p>
 <ol>
-  <li>Main components are automatically stored in the local library at the moment of being created. Learn more about components at the <a href="/user-guide/components/">components section</a>.</li>
+  <li>Main components are automatically stored in the local library at the moment of being created. Learn more about components at the <a href="/user-guide/design-systems/components/">components section</a>.</li>
   <li>Clicking the “+” to launch import an image that will be added as a component.</li>
 </ol>
 <figure>
@@ -30,14 +29,14 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
     <source src="/img/libraries/add-component.mp4" type="video/mp4">
   </video>
 </figure>
-<h4>Colors</h4>
+<h3>Colors</h3>
-<p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/styling/#fill">managing color</a></p>
+<p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/designing/color-stroke/#fill">managing color</a></p>
 <figure>
   <video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.webp" height="auto">
     <source src="/img/libraries/add-color.mp4" type="video/mp4">
   </video>
 </figure>
-<h4>Typographies</h4>
+<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>
 <figure>
   <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
@@ -46,7 +45,7 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
 </figure>
 <p><strong>Tip:</strong> If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.</p>
 
-<h3 id="edit-assets">Edit assets</h3>
+<h2 id="edit-assets">Edit assets</h2>
 <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>
@@ -59,7 +58,7 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h3 id="use-assets">Use Assets</h3>
+<h2 id="use-assets">Use Assets</h2>
 <ul>
   <li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
   <li><strong>Colors:</strong> With a shape or a text selected click a color from the library to apply it as a fill. If you press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in macOS) while clicking, the color will be applied to the stroke.</li>
@@ -71,10 +70,10 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h3 id="organize-assets">Organize assets</h3>
+<h2 id="organize-assets">Organize assets</h2>
 <p>Learn how to better view and organize your assets:</p>
 
-<h4>Assets list views</h4>
+<h3>Assets list views</h3>
 <p>You can switch between list and grid views.</p>
 <ul>
   <li><strong>Grid view:</strong> With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.</li>
@@ -86,7 +85,7 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h4>Sort assets</h4>
+<h3>Sort assets</h3>
 <p>Click the sort button to change the alphabetical order.</p>
 <figure>
   <video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.webp" height="auto">
@@ -94,7 +93,7 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h4>Search assets</h4>
+<h3>Search assets</h3>
 <p>Use the Search assets box to filter the assets with names that match what you write.</p>
 <figure>
   <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.webp" height="auto">
@@ -102,17 +101,17 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h4>Filter assets</h4>
+<h3>Filter assets</h3>
 <p>You can decide whether to show all asset types or only one of your choice (components, colors or typographies).</p>
 
-<h4>Multiselect assets</h4>
+<h3>Multiselect assets</h3>
 <figure>
   <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.webp" height="auto">
     <source src="/img/libraries/asset-multiselect.mp4" type="video/mp4">
   </video>
 </figure>
 
-<h4>Group assets</h4>
+<h3>Group assets</h3>
 <p>There are two ways to create groups in a library.</p>
 <ol>
   <li><strong>With slashes (/):</strong> Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".</li>
@@ -124,10 +123,10 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
   </video>
 </figure>
 
-<h4>Ungroup assets</h4>
+<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>
 
-<h4>Drag assets to groups</h4>
+<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>
   <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
@@ -136,68 +135,3 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
 </figure>
 
 
-<h2 id="libraries">Libraries</h2>
-
-<h3 id="file-libraries">File libraries</h3>
-<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
-<p>You have two ways to access the file library from the file <a href="/user-guide/the-interface/#interface-workspace">workspace</a>:</p>
-<ul>
-  <li>Click the assets tab icon at the left sidebar.</li>
-  <li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
-</ul>
-<figure>
-  <img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
-</figure>
-
-<h3 id="shared-libraries">Shared libraries</h3>
-<h4>Publish as shared library</h4>
-<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
-<p>There are two ways to publish a library:</p>
-<ul>
-  <li>Using the file main menu.</li>
-  <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
-</ul>
-<figure>
-  <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
-  <figcaption>Publishing a library from the main menu</figcaption>
-</figure>
-<figure>
-  <img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
-  <figcaption>Publishing a library from the libraries panel</figcaption>
-</figure>
-
-<h4>Unpublish a shared library</h4>
-<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
-<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>
-
-<h4>Library updates</h4>
-<p></p>
-<figure>
-  <img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
-</figure>
-
-<h4>Connect shared libraries</h4>
-<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
-<figure>
-  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
-    <source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h4>Disconnect shared library</h4>
-<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
-<figure>
-  <img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
-</figure>
-
-<h4>Use shared libraries</h4>
-<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
-<figure>
-  <img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
-</figure>
-
-<h4>Open shared library file</h4>
-<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
-<figure>
-  <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
-</figure>

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

@@ -0,0 +1,172 @@
+---
+title: Components
+order: 3
+desc: Streamline your design workflow with Penpot's Components guide! Learn to create, duplicate, group, and manage reusable components.
+---
+
+<h1 id="components">Components</h1>
+<p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
+<p>A component is a layer or group of layers that can be reused multiple times across files. This can help you maintain consistency across a group of designs.</p>
+<p>A component consists of two elements:</p>
+<ul>
+  <li><strong>Main component</strong>: The original source of truth. It defines the core properties of the component.</li>
+  <li><strong>Component copy</strong> (also known as instance): A duplicate of the main component that inherits its properties.</li>
+</ul>
+<figure>
+  <img src="/img/components/components-main-copy.webp" alt="Components main and copy" />
+  <figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
+</figure>
+<p>All component copies used in a file are linked in a way that updates made to the Main component can reflect in their component copies. You can override properties for component copies, so that you can manage singularities while maintaining properties in common.</p>
+
+<h3 id="component-create">Create components</h3>
+<h4>Create a component</h4>
+<ol>
+  <li>Select a layer 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 layer menu.</li>
+</ol>
+<figure>
+  <video title="Creating a component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-create.webp" height="auto">
+    <source src="/img/components/components-create.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Duplicate a component</h4>
+<p>You can duplicate a component <a href="/user-guide/designing/layers/#duplicating-layers">the same way</a> you can duplicate any other layer. When duplicating a component, you are creating a component copy that will be linked to its main component.</p>
+
+<h4>Duplicate as main component</h4>
+<p>You can duplicate a  component as a new main component from the assets sidebar. Just select the component at the library, open the menu with right click and select the option "Duplicate main".</p>
+<figure>
+  <video title="Duplicate main component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-duplicate-main.webp" height="auto">
+    <source src="/img/components/components-duplicate-main.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Delete a main component</h4>
+<p>You can delete main components and its copies anytime <a href="/user-guide/designing/layers/#delete-layers">the same way</a> you can delete any other layer.</p>
+<p>Deleting a main component at the viewport means deleting it at the assets library and viceversa, so be careful!</p>
+<figure>
+  <video title="Deleting main components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-delete.webp" height="auto">
+    <source src="/img/components/components-delete.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Restore a main component</h4>
+<p>If a main component has been deleted and you have access to a copy of it, you can use the copy to restore its main. There are two ways to do it:</p>
+<ul>
+  <li>From the <strong>viewport menu</strong>: Select the component copy of a deleted main component, right click and press the option "Restore main component".</li>
+  <li>From the <strong>sidebar menu</strong>: Open the sidebar menu of the component copy and press the option "Restore main component".</li>
+</ul>
+<figure>
+  <img src="/img/components/components-restore.webp" alt="Components main and copy" />
+  <figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
+</figure>
+
+<h3 id="component-find">Find main components</h3>
+<p>Where's my component? There are ways to find main components at the assets panel and at the design viewport.</p>
+
+<h4>Find a main component at the assets panel</h4>
+<p>Select a main component at the viewport and then press "Show in assets panel" at the options of the right sidebar.</p>
+<figure>
+  <video title="Show main component in the assets library" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-asset.webp" height="auto">
+    <source src="/img/components/components-show-asset.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Find a main component at the viewport</h4>
+<p>Select a component copy and then press "Show main component" at the viewport menu or the right sidebar menu.</p>
+<figure>
+  <video title="Show main component" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-main.webp" height="auto">
+    <source src="/img/components/components-show-main.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="component-main-components-page">Main components page</h3>
+<p>If you find a page at a file called "Main components" this will probably mean that the file had assets with the previous components system and has been migrated to the current components system. The previous system didn't have the components as layers at the design file, only at the assets library, so when migrating a file to the new version Penpot automatically creates a page where to place all the components, grouping them using the library groups structure.</p>
+<figure>
+  <img src="/img/components/components-page-main.webp" alt="Main components page" />
+</figure>
+
+<h3 id="component-group">Group components</h3>
+<p>At the Components section from the Assets library, there are two ways to create groups in a components library.</p>
+<ol>
+  <li><strong>Using slashes (/):</strong> Select one component and rename it as follows: "<i>FOLDER NAME/COMPONENT NAME</i>". For example, "<i>Buttons/Alert Button</i>".</li>
+  <li><strong>Using the "Group" option:</strong> Select one or more components at the Assets library, right click to show the menu and then select "Group".</li>
+</ol>
+<figure>
+  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
+    <source src="/img/components/components-group.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Ungroup components</h4>
+<p>You can ungroup the components the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>
+
+<h4>Drag components to groups</h4>
+<p>One very direct way to move components between groups at the assets library is by dragging them.</p>
+<figure>
+  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
+    <source src="/img/components/components-drag.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="component-detach">Detach components</h3>
+<p>Detach a component copy to unlink it from its Main component and transform it into a group layer. Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or right click and select the option “Detach instance” at the component menu.</p>
+<p>You can also detach components in bulk by selecting several components and performing the same action.</p>
+
+<h3 id="component-annotate">Annotate components</h3>
+<p>You can add text annotations to main components. The annotations are shown in every component copy. It is extremely useful to attach specifications that can be read at each component copy.</p>
+<figure>
+  <video title="Annotating components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-annotation.webp" height="auto">
+    <source src="/img/components/components-annotation.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<p>The annotations are also shown at the  <a href="/user-guide/dev-tools/#inspect-design">Inspect tab</a>, as another option to improve communication between designers and developers.</p>
+<figure>
+  <img src="/img/components/components-annotations-inspect.webp" alt="Annotations at inspect tab" />
+</figure>
+
+<h3 id="component-overrides">Component overrides</h3>
+<p>Main components represent the more generic information of an element in a design system. You will usually need to change specific things (like a text, a color or an icon) in a component while maintaining the inheritance of the rest of it properties. Component overrides allows you to do that in Penpot.</p>
+<p>Overrides are modifications made in a specific copy that are not in its main component. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
+<figure>
+  <img src="/img/components/components-overrides.webp" alt="Components overrides" />
+</figure>
+
+<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>
+<figure>
+  <video title="Reset component overrides" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-reset-overrides.webp" height="auto">
+    <source src="/img/components/components-reset-overrides.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="component-update">Update main from copies</h3>
+<p>You can push changes made at a component copy to a main component:</p>
+<ol>
+  <li>Select a component copy that has changes that override one or more properties of its main component.</li>
+  <li>Right click and select the option “Update main component” at the component menu. You can find this option at the viewport menu and at the sidebar menu.</li>
+</ol>
+<figure>
+  <img src="/img/components/components-update.webp" alt="Updating a main component from a copy" />
+</figure>
+<p>If the component that is about to be updated is located in a different file which is connected to this file as a <a href="/user-guide/design-systems/libraries/#shared-libraries">shared library</a>, a notification will be shown offering the options to update or dismiss.</p>
+<figure>
+  <img src="/img/components/components-update-shared.webp" alt="Prompt shown to update a main component that is in a shared library" />
+</figure>
+
+<h3 id="component-swap">Swap components</h3>
+<p>Penpot allows you to easily substitute component copies with other component copies.</p>
+<ol>
+  <li>Select a component <strong>copy</strong>. You can not swap main components.</li>
+  <li>At the right sidebar, press the component name to launch the swap menu.</li>
+  <li>Choose the component you want to swap with and click on it.</li>
+</ol>
+<p class="advice"><strong>Tip:</strong> The first options shown to swap a component are the ones at the same level inside the assets library, so group them properly.</p>
+<figure>
+  <video title="Swapping components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-swap.webp" height="auto">
+    <source src="/img/components/components-swap.mp4" type="video/mp4">
+  </video>
+</figure>
+
+

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

@@ -1,24 +1,24 @@
 ---
-title: 10· Design Tokens
+title: Design Tokens
+order: 5
 ---
 
 <h1 id="design-tokens">Design Tokens</h1>
-<p class="main-paragraph">Design tokens are the building blocks of all UI elements, the same tokens are used in designs, tools, and code. They include colors, typography, spacing, shadows, and any visual element that affects an object: all these properties collectively make up a design system or a visual inheritance.</p>
+<p class="main-paragraph">Design tokens are the building blocks of all UI elements, the same tokens are used in designs, tools, and code. They include colors, typography, spacing, shadows, and any visual element that affects a layer: all these properties collectively make up a design system or a visual inheritance.</p>
 
 <figure>
   <img src="/img/design-tokens/01-tokens-cover.webp" alt="Tokens cover" />
 </figure>
 
-<h3 id="design-tokens-why">Why Design Tokens?</h3>
+<h3>Why Design Tokens?</h3>
 <p>Design tokens act as a single source of truth, a common language that can be translated and used in any other tool or framework capable of reading the token format. With Design Tokens, you can create, manage, and synchronize these visual elements within Penpot and across other design tools, keeping your designs consistent and making your workflows faster and easier to maintain.</p>
 <p>You can also integrate Design Tokens with other core Penpot features, such as components and grid & flex layout, plus plugins will be able to access the tokens API (coming soon) making it even more powerful.</p>
 
-<h3 id="design-tokens-format">W3C DTCG Format</h3>
+<h3>W3C DTCG Format</h3>
 <p>Penpot Design Tokens adhere to the <a href="https://design-tokens.github.io/community-group/format/" target="_blank">Design Tokens Format Module</a> and <a href="https://www.designtokens.org/glossary/" target="_blank">its definitions</a>, a draft by the <a href="https://www.w3.org/community/design-tokens/" target="_blank">W3C DTCG</a>. Penpot ensures compatibility across various disciplines, tools, and technologies by following the most standardized approach available for design tokens.</p>
 <p>Tokens can be exported from Penpot or integrated into other tools directly, without conversion. Additionally, the knowledge gained from using Design Tokens in Penpot remains valuable, regardless of whether you continue using Penpot or a different tool or technology.</p>
 
-<h2 id="design-tokens-use">Using Tokens</h2>
+<h2 id="design-tokens-use-create">Creating a token</h2>
-<h3 id="design-tokens-use-create">Creating a token</h3>
 <p>You can create reusable and semantic tokens to be referenced in your designs at the <strong>Tokens</strong> panel. In this panel, you’ll find all the available types of tokens in Penpot arranged alphabetically, with existing tokens being shown at the top of the list.</p>
 <figure>
   <img src="/img/design-tokens/02-tokens-create.webp" alt="Tokens create" />
@@ -31,7 +31,7 @@ title: 10· Design Tokens
 </ul>
 <p>Once you have named the token and assigned it a value, click <strong>Save</strong> to store the token and start referencing it.</p>
 
-<h3 id="design-tokens-aliases">Referencing tokens into values (aliases)</h3>
+<h2 id="design-tokens-aliases">Referencing tokens into values (aliases)</h2>
 <p>When assigning a value to a token, you can reference existing tokens - these are called aliases at the <a href="https://www.designtokens.org/glossary/" target="_blank">DTCG Glossary</a>.</p>
 <figure>
   <img src="/img/design-tokens/03-tokens-aliases.webp" alt="Tokens aliases" />
@@ -41,7 +41,7 @@ title: 10· Design Tokens
 <p>If the value of the referenced token changes, this will also change the value of the tokens where it is referenced.</p>
 <p class="advice">References to existing tokens are case sensitive.</p>
 
-<h3 id="design-tokens-equations">Using equations</h3>
+<h2 id="design-tokens-equations">Using equations</h2>
 <p>Token types with numerical values also accept mathematical equations. If, for example, you create a <strong>spacing.small</strong> token with the value of <strong>2</strong>, and you then want to create a <strong>spacing.medium</strong> token that is twice as large, you could do so by writing <code class="language-js">{spacing.small} * 2</code> in its value. As a result, <strong>spacing.medium</strong> would have a value of <strong>4</strong>.</p>
 <p>Say you have a <strong>spacing.scale</strong> token with a value of <strong>2</strong>. You could also use this token in the equation to calculate the value of <strong>spacing.medium</strong> by writing <code class="language-js">{spacing.small} * {spacing.scale}</code> in its value.</p>
 <figure>
@@ -55,21 +55,21 @@ title: 10· Design Tokens
     <li><code class="language-js">/</code> for division.</li>
 </ul>
 
-<h3 id="design-tokens-edit">Editing a token</h3>
+<h2 id="design-tokens-edit">Editing a token</h2>
 <p>Tokens can be edited by right-clicking the token and selecting <strong>Edit token</strong>. This will allow you to change the tokens name, value and description. Once the changes are made, click <strong>Save</strong>.</p>
 <figure>
   <img src="/img/design-tokens/05-tokens-edit.webp" alt="Tokens edit" />
 </figure>
 <p class="advice">Renaming tokens will break any references to their old names. If a token is already applied somewhere, you'll need to reapply it after renaming. This can lead to extra work, so rename with caution. We're actively working on a solution to handle this automatically, ensuring renamed tokens stay linked to their properties without additional effort.</p>
 
-<h3 id="design-tokens-duplicate">Duplicating a token</h3>
+<h2 id="design-tokens-duplicate">Duplicating a token</h2>
 <p>Tokens can be duplicated by right-clicking the token you wish to duplicate and selecting <strong>Duplicate token</strong>. This will create a copy of the selected token within the same set, with <code class="language-js">-copy</code> added to its name.</p>
 
-<h3 id="design-tokens-delete">Deleting a token</h3>
+<h2 id="design-tokens-delete">Deleting a token</h2>
 <p>Tokens can be deleted by right-clicking the token you wish to delete and selecting <strong>Delete token</strong>.</p>
 
 <h2 id="design-tokens-available">Available tokens</h2>
-<p>You can apply tokens to the properties of any <a href="/user-guide/objects/" target="_blank">object</a>. There are two ways to apply tokens to a selection:</p>
+<p>You can apply tokens to the properties of any <a href="/user-guide/designing/layers/" target="_blank">layer</a>. There are two ways to apply tokens to a selection:</p>
 <ul>
   <li>Right-click on tokens to specify a particular property that you want to apply.</li>
   <li>Left-click on tokens to apply the assumtion. Assumptions can vary across different token types. For example, for the <strong>color</strong> type the assumtion is that you want to apply the token as a <strong>fill</strong>.</li>
@@ -322,7 +322,7 @@ Applying a Typography Token will detach any Typography Style previously applied,
 <h4 id="design-tokens-font-size">Font Size</h4>
 <p>Font size tokens define the vertical size of glyphs/characters as an individual property. In typography, the letter spacing and line height properties are related to the font size.</p>
 <p>Font sizes are typically defined using a proportional scale. You can use math operations with references in order to create dynamic typography scales that follow a particular multiplier, like Golden Ratio.</p>
-<p><strong>Tip:</strong> Use <a href="/user-guide/design-tokens/#design-tokens-number" target="_blank">Number Tokens</a> (unitless token) to create stunning typographic scales though design tokens:</p>
+<p><strong>Tip:</strong> Use <a href="#design-tokens-number" target="_blank">Number Tokens</a> (unitless token) to create stunning typographic scales though design tokens:</p>
 <figure>
   <img src="/img/design-tokens/30-tokens-type-font-size-scale.webp" alt="Font size scale" />
 </figure>
@@ -433,7 +433,7 @@ ExtraBold Italic
 <p>When creating a token set, it’s recommended that you assign it a unique name to ensure clarity. Token set names are not included in individual token names by default so it is possible to have tokens with the same name belonging to different token sets.</p>
 <p>Token sets can be enabled or disabled. If a set is disabled, its tokens will be excluded from the token resolution process.</p>
 
-<h3 id="design-tokens-sets-create">Creating Token Sets</h3>
+<h3>Creating Token Sets</h3>
 <p>There are two ways to create a token set at the <strong>Tokens</strong> tab:</p>
 <ol>
     <li>Click on the <strong>+</strong> next to <strong>Sets</strong>;</li>
@@ -443,7 +443,7 @@ ExtraBold Italic
 <p>When a token set is selected, the tokens within the selected set are displayed on the panel below.</p>
 
 
-<h3 id="design-tokens-sets-edit">Editing Token Sets</h3>
+<h3>Editing Token Sets</h3>
 <p>Right-click a token set to perform these quick actions:</p>
 <ol>
     <li><strong>Rename</strong>: Give the set a new name and press Enter.</li>
@@ -458,7 +458,7 @@ ExtraBold Italic
 <p>Once you have created a token set, you can start creating tokens within that token set. To do so, simply select the token set and create a new token.</p>
 <p class="advice">If a token with the same name already exists in another set, a new token can still be created in the current set.</p>
 
-<h3 id="design-tokens-groups">Creating Token Set Folders</h3>
+<h3>Creating Token Set Folders</h3>
 <p>To group token sets just use folder-style names. For example, naming your sets <code class="language-js">Light/Global</code> and <code class="language-js">Light/Colors</code> will create a folder called <strong><i>Light</i></strong> with two sets inside it: <strong><i>Global</i></strong> and <strong><i>Colors</i></strong>.</p>
 <figure>
   <img src="/img/design-tokens/15-tokens-sets-group.webp" alt="Tokens sets folder" />
@@ -484,14 +484,14 @@ ExtraBold Italic
 <p>When you have various themes inside a group, only one of the themes in this group can be active.</p>
 <p>Having your sets clubbed under groups makes it more accessible to switch from a matrix of themes.</p>
 
-<h3 id="design-tokens-themes-create">Creating Token Themes</h3>
+<h3>Creating Token Themes</h3>
 <p>To create a new theme, click the <strong>Create one</strong> button in the Themes section. You can create a group (this is optional) or add an existing one, and then you then need to assign a name to your theme and click on <strong>Save Theme</strong>.</p>
 <p>Your new theme will now appear on the Theme lists. You’ll need to enable the tokens sets that you want to include in the theme, clicking on the button “no active sets”. Here you can also activate and deactivate it, as well as delete the theme.</p>
 <figure>
   <img src="/img/design-tokens/17-tokens-themes-create.webp" alt="Tokens themes create" />
 </figure>
 
-<h3 id="design-tokens-themes-edit">Editing Themes</h3>
+<h3>Editing Themes</h3>
 <p>In the <strong>Themes</strong> section, you can find a dropdown to activate and deactivate themes. If there are no active themes, the dropdown shows a message of: “no theme active”.</p>
 <figure>
   <img src="/img/design-tokens/19-tokens-themes-edit.webp" alt="Tokens themes edit" />
@@ -508,7 +508,7 @@ ExtraBold Italic
     <li>Creates a new theme.</li>
 </ol>
 
-<h3 id="design-tokens-themes-group">Grouping Themes</h3>
+<h3>Grouping Themes</h3>
 <p>You can categorize your themes into groups. This allows you to generate a matrix of potential combinations involving color themes, brands, modes, and more.</p>
 <figure>
   <img src="/img/design-tokens/20-tokens-themes-group.webp" alt="Tokens themes group" />
@@ -535,7 +535,7 @@ ExtraBold Italic
     <li><strong>Export:</strong> Click <strong>Tools</strong>, then select <strong>Export</strong> to view export options.</li>
 </ol>
 
-<h3 id="design-tokens-import-options">Import Options</h3>
+<h3>Import Options</h3>
 
 <h4>ZIP file</h4>
 <p>You can import tokens from a <strong>.zip</strong> file. This file can either contain a single JSON file or a folder structure with multiple files. The ZIP import option provides flexibility for organizing your tokens before importing them into Penpot.</p>
@@ -604,7 +604,7 @@ ExtraBold Italic
 </pre>
 <figcaption>The main folder name won’t be used to build token set names, so in this example, <strong>folder</strong> will be ignored in the set names.</figcaption>
 
-<h3 id="design-tokens-export-options">Export Options</h3>
+<h3>Export Options</h3>
 <p>Just like with importing, you can export tokens, themes and sets either in a single JSON file or in multiple files. There is no difference in the content being exported; the choice depends on your team's preferences for file organization: a single file with all the tokens, sets and themes, or a folder structure with separated JSON files organized by sets.</p>
 <p>In both cases you can preview the result of the export options:</p>
 

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

@@ -0,0 +1,40 @@
+---
+title: Design Systems
+order: 3
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1  id="section-3">Design Systems</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/design-systems/assets">
+      <h2>Assets →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/design-systems/libraries">
+      <h2>Libraries →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/design-systems/components">
+      <h2>Components →</h2>
+      <p>Speed your design workflow</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/design-systems/variants">
+      <h2>Variants →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/design-systems/design-tokens">
+      <h2>Design Tokens →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

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

@@ -0,0 +1,72 @@
+---
+title: Libraries
+order: 2
+desc: Use Penpot's libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free!
+---
+<h1 id="libraries">Libraries</h1>
+
+<p class="main-paragraph">Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
+
+<h3 id="file-libraries">File libraries</h3>
+<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
+<p>You have two ways to access the file library from the file <a href="/user-guide/first-steps/the-interface/#interface-workspace">workspace</a>:</p>
+<ul>
+  <li>Click the assets tab icon at the left sidebar.</li>
+  <li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
+</ul>
+<figure>
+  <img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
+</figure>
+
+<h3 id="shared-libraries">Shared libraries</h3>
+<h4>Publish as shared library</h4>
+<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
+<p>There are two ways to publish a library:</p>
+<ul>
+  <li>Using the file main menu.</li>
+  <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
+</ul>
+<figure>
+  <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
+  <figcaption>Publishing a library from the main menu</figcaption>
+</figure>
+<figure>
+  <img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
+  <figcaption>Publishing a library from the libraries panel</figcaption>
+</figure>
+
+<h4>Unpublish a shared library</h4>
+<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
+<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>
+
+<h4>Library updates</h4>
+<p></p>
+<figure>
+  <img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
+</figure>
+
+<h4>Connect shared libraries</h4>
+<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/design-systems/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
+<figure>
+  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
+    <source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Disconnect shared library</h4>
+<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
+<figure>
+  <img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
+</figure>
+
+<h4>Use shared libraries</h4>
+<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
+<figure>
+  <img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
+</figure>
+
+<h4>Open shared library file</h4>
+<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
+<figure>
+  <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
+</figure>

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

@@ -0,0 +1,168 @@
+---
+title: Variants
+order: 4
+desc: Streamline your design workflow with Penpot's Components guide! Learn to create, duplicate, group, and manage reusable components.
+---
+
+<h1 id="variants">Variants</h1>
+<p class="main-paragraph">Variants allow you to group similar components, such as buttons, icons, or toggles, into a single, customizable component. Rather than navigating through separate components for every possible state, size, or style, you can manage them all from one unified component using clearly defined properties.</p>
+<p class="main-paragraph">Imagine a single button component that can switch between primary and secondary styles, active and disabled states, and small to large sizes. Useful, right? That’s the power of Variants.</p>
+
+<h3 id="component-variants-why-are-variants-important">Why are Variants Important?</h3>
+<ul>
+  <li><strong>Cleaner libraries</strong><br>
+    Keep related designs organized in the Design viewport, Layers panel, and swap menu. Variants streamline your components into tidy, manageable sets, allowing you to retain overrides when switching between them.
+  </li>
+  <li><strong>Faster design workflows</strong><br>
+    Make it easier to find and select the right version by quickly switching between states or styles using simple property controls.
+  </li>
+  <li><strong>Better team collaboration</strong><br>
+    With variants, you can match the way states are handled in code, helping designers and developers stay in sync, fostering better collaboration between design and development teams.
+  </li>
+</ul>
+
+<figure>
+  <iframe 
+    width="672px" 
+    height="378px"
+    src="https://peertube.kaleidos.net/videos/embed/v9Yh79hom5otcBEnqondBY"
+    title="Penpot Variants Demo"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen>
+  </iframe>
+  <figcaption>Penpot – Variants release</figcaption>
+</figure>
+
+<h3 id="component-understanding-variants-properties-and-values">Understanding variants: properties and values</h3>
+<p>A component’s variants are organized by properties and their values.</p>
+<ul>
+  <li><strong>Properties</strong> define the dimensions that distinguish your variants (for example: <em>Color</em>, <em>Size</em>, <em>State</em>).</li>
+  <li><strong>Values</strong> are the specific options within a property (for example: <em>Primary/Secondary</em>, <em>Small/Large, Default/Hover/Pressed</em>)</li>
+</ul>
+<p>Each variant is simply one unique combination of values across all properties (for example, <code class="language-js">Color=Primary + Size=Small + State=Hover</code>).</p>
+<p>Variants must have at least one property, and property values should be kept consistent to make switching predictable and to preserve overrides across connected layers.</p>
+
+<h3 id="component-create-and-modify-variants">Create and modify variants</h3>
+
+<h4 id="component-create-variants">Create variants</h4>
+<p>You can create variants from an existing component or from another variant:</p>
+<ul>
+  <li><strong>From a component:</strong> Press Ctrl + K or right-click and select the menu option <strong>Create variant</strong>.</li>
+  <li><strong>From a variant:</strong> Select the variant and press Ctrl + K or right-click and select the menu option <strong>Create variant</strong>.</li>
+  <li><strong>By dragging:</strong> Drag a main component into an existing component with variants to add it as a new variant.</li>
+  <li><strong>From the Design tab</strong> (right sidebar): Select a component or a variant, open the context menu next to the component name and select the menu option <strong>Create variant</strong>.</li>
+</ul>
+<figure>
+  <img src="/img/variants/01-variants-create.webp" alt="Variants creation button" />
+</figure>
+<p><strong>When a variant is created:</strong></p>
+<ul>
+  <li>It appears next to the original in a dedicated variant area (by default in horizontal flex layout).</li>
+  <li>Shared layers between variants are automatically connected (<a href="#component-use-variants">connection conditions</a>) so that overrides can be preserved.</li>
+  <li>Variants are named using their property values (e.g., <em>Primary / Hover</em>).</li>
+</ul>
+<figure>
+  <img src="/img/variants/02-variants-created.webp" alt="Variant created" />
+</figure>
+
+<h4 id="component-manage-variant-properties">Manage variant properties</h4>
+<p>Properties are key to defining and differentiating your variants. They appear in the Design tab when a variant or component with variants is selected.</p>
+<figure>
+  <img src="/img/variants/03-variants-property-add.webp" alt="Add variant property" />
+</figure>
+<h5>Add new properties</h5>
+<ul>
+  <li><strong>From the Design tab:</strong> When the component or one of its variants is selected, you can add a new property via a menu. This property will be added to all existing variants with a default value (e.g., <em>Value 1</em>).</li>
+  <li><strong>From the Layers panel:</strong> using the formula <code class="language-js">[property_name]=[value]</code>.</li>
+</ul>
+
+<h5>Edit properties</h5>
+<ul>
+  <li><strong>From the Design tab:</strong> Select a component or a variant, then click on the property name to edit its name and/or value.</li>
+  <li><strong>From the Layers panel:</strong> using the formula <code class="language-js">[property_name]=[value]</code>.</li>
+</ul>
+<figure>
+  <img src="/img/variants/04-variants-properties-edit.webp" alt="Edit variant property" />
+</figure>
+
+<h5>Delete properties</h5>
+<ul>
+  <li><strong>From the Design tab:</strong> Select the main component (not an individual variant) and press the minus button next to the property.</li>
+  <li><strong>From the Layers panel:</strong> You can delete a property by editing the names of all variants so that none of them contain that property in their formula.</li>
+</ul>
+<p class="advice">Variants must have at least one property. You can’t delete the last one.</p>
+<p>When <strong>multiple variants are selected</strong>, the Design tab will show all their properties and values. If a property has different values across the selected variants, it will display “Mixed,” allowing you to override them collectively.</p>
+
+<h4 id="component-delete-variants">Delete Variants</h4>
+<ul>
+  <li>Select the variant, press right-click, and select the menu option <strong>Delete</strong>.</li>
+  <li><strong>Dragging</strong> a variant outside its component turns it into an independent component instead of deleting it.</li>
+</ul>
+<p class="advice">If you delete the last variant, the entire component is removed.</p>
+
+<h4 id="component-restore-variants">Restore Variants</h4>
+<p>If you have a copy of a variant whose original was deleted, you can restore it:</p>
+<ul>
+  <li>Select the variant copy, press right-click, and select the menu option <strong>Restore variant</strong> (will show if the main component still exists).</li>
+</ul>
+
+<h3 id="component-use-variants">Use variants</h3>
+<p>Once you have created your variants, you can place a copy of a component with variants into your design and then switch between its different versions.</p>
+
+<h4 id="component-from-the-assets-tab">From the Assets tab</h4>
+<p>Drag and drop a component with variants from the Assets tab onto the design viewport, just like you would with any other component. Once placed, you can then use its properties in the Design tab to switch to the desired variant.</p>
+
+<h4 id="component-from-the-design-tab">From the Design tab</h4>
+<p>When a variant is selected:</p>
+<ul>
+  <li>You’ll see its properties and values.</li>
+  <li>Change one or more property values to switch to another variant.</li>
+  <li>If your chosen combination doesn’t exist, Penpot will suggest the closest match.</li>
+</ul>
+<figure>
+  <img src="/img/variants/05-variants-use.webp" alt="Using variants" />
+</figure>
+
+<h4 id="component-understanding-overrides">Understanding overrides</h4>
+<p>A key benefit of variants is the ability to <strong>preserve overrides when you switch between them</strong>. An override is a specific change you make to a component instance that diverges from its original definition (e.g., changing text content or a specific color).</p>
+<p>Layers between variants are considered connected if they:</p>
+<ol>
+  <li>Share the <strong>same name</strong>.</li>
+  <li><strong>Are the same type</strong>. Rectangle, ellipse, paths, and boolean operations count as the same type.</li>
+  <li><strong>Have the same hierarchy level.</strong> Groups, boards, and layouts are considered equivalent.</li>
+</ol>
+<figure>
+  <img src="/img/variants/variants-connections-conditions.png" alt="Variants connections conditions" />
+</figure>
+<p><strong>Example:</strong> If <code class="language-js">Variant 1</code> has a text layer named <em>label</em> with red color, and you change its content to <em>Click here</em> in an instance, then switch to <code class="language-js">Variant 2</code> (which also has a <em>label</em> text layer), the <em>Click here</em> content will be preserved, and <code class="language-js">Variant 2</code>’s color will be applied.</p>
+<p><strong>Changing any of these</strong> (e.g., renaming or grouping a layer) breaks the connection, but reverting the change will restore it.</p>
+
+<h4 id="component-bulk-converting-components-to-variants">Bulk converting components to variants</h4>
+<p>If you already have multiple related components, you can combine them into a single component with variants:</p>
+<ul>
+  <li><strong>From Assets tab</strong>: Select components in the same group and right-click → <strong>Combine as variants</strong>.</li>
+  <li><strong>From viewport</strong>: Select multiple components → Right-click → <strong>Combine as variants</strong>.</li>
+  <li><strong>From Design tab</strong>: If conditions are met, a Combine as variants button appears on the component card.</li>
+</ul>
+<figure>
+  <img src="/img/variants/06-variants-combine.webp" alt="Combining components as variants" />
+</figure>
+<p><strong>Conditions:</strong></p>
+<ul>
+  <li>Components must be on the same page.</li>
+  <li>Components that already have variants cannot be combined.</li>
+</ul>
+<p><strong>When combined:</strong></p>
+<ul>
+  <li>A variant area is created containing all former components.</li>
+  <li>Property names and values are generated from the component names.</li>
+</ul>
+
+<h4 id="component-transforming-variants-back-into-components">Transforming Variants Back into Components</h4>
+<p>To turn a variant into an independent component:</p>
+<ul>
+  <li>Drag it outside the variant area (Design viewport or Layers panel).</li>
+  <li>Cut and paste it outside the variant area.</li>
+</ul>
+<p>The new component’s name includes the original component name and the variant’s property values.</p>

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

@@ -1,24 +1,25 @@
 ---
-title: 06· Styling
+title: Color and Strokes
+order: 3
 desc: Style your designs with Penpot's options! Learn about color fills, gradients, strokes, shadows, blur, opacity, blend modes, and property copying.
 ---
 
-<h1 id="styling">Styling</h1>
+<h1 id="styling">Color and Strokes</h1>
-<p class="main-paragraph">Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.</p>
+<p class="main-paragraph">Penpot has a variety of styling options for each layer. When selected, the styling options are displayed in the design panel on the right.</p>
 
 <h2 id="fill">Color fills</h2>
 <p>Color fills can be added to boards, shapes, texts and groups of layers.</p>
 <p>You can add as fills:</p>
 <ul>
   <li>Custom colors (hex).</li>
-  <li>Color <a href="/user-guide/libraries/#asset-types">assets</a>.</li>
+  <li>Color <a href="/user-guide/design-systems/assets/#asset-types">assets</a>.</li>
   <li>Images.</li>
 </ul>
 <p>To apply a fill you can use: the color picker, the color palette or a color style.</p>
 <ul>
-  <li>The <a href="/user-guide/styling/#color-picker">color picker</a>.</li>
+  <li>The <a href="/user-guide/designing/color-stroke/#color-picker">color picker</a>.</li>
-  <li>The <a href="/user-guide/styling/#color-palette">color palette</a>.</li>
+  <li>The <a href="/user-guide/designing/color-stroke/#color-palette">color palette</a>.</li>
-  <li>The <a href="/user-guide/libraries/">assets library</a>.</li>
+  <li>The <a href="/user-guide/design-systems/assets/#asset-types">assets library</a>.</li>
 </ul>
 <figure>
   <video muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-library.webp" height="auto">
@@ -39,7 +40,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
 </figure>
 
 <h3>Remove a fill</h3>
-<p>To <strong>remove a fill</strong> from a selected object, press the “-” button in the fill section.</p>
+<p>To <strong>remove a fill</strong> from a selected layer, press the “-” button in the fill section.</p>
 <figure>
   <img alt="Multiple fills" src="/img/styling/fill-remove.webp"/>
 </figure>
@@ -50,7 +51,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <img alt="Color picker" src="/img/styling/color-picker.webp"/>
 </figure>
 <ol>
-  <li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
+  <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 type</strong> - Solid, gradient, or image.</li>
   <li><strong>Sliders</strong> - Easily manage settings like brightness, saturation or opacity.</li>
@@ -59,7 +60,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
 </ol>
 
-<h3 id="color-picker-gradients">Gradients</h3>
+<h2 id="color-picker-gradients">Gradients</h2>
 <p>You can apply gradient fills to layers. To do that select the Gradient type at the color picker.</p>
 <figure>
   <img alt="Gradient" src="/img/styling/color-picker-gradient.webp"/>
@@ -86,20 +87,20 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
 <p>Use the <strong>menu</strong> to easily switch between libraries.</p>
 <p>Switch between big and small <strong>thumbnails sizes</strong>.</p>
 
-<h3 id="color-palette">Applying color from the palette</h3>
+<h3>Applying color from the palette</h3>
 <ul>
   <li><strong>Apply color to fill:</strong> Just select the shape and click on the preferred bullet in the color palette.</li>
   <li><strong>Apply color to stroke:</strong>  Press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in mac OS) while clicking.</li>
 </ul>
 
 <h2 id="selected-colors">Selected colors</h2>
-<p>All of the colors that are contained within a selection of objects are showcased at the sidebar so you can play with the colors of a group without the hassles of individual selection.</p>
+<p>All of the colors that are contained within a selection of layers are showcased at the sidebar so you can play with the colors of a group without the hassles of individual selection.</p>
 <figure>
   <img alt="Selected colors" src="/img/styling/color-selected.webp"/>
 </figure>
 
 <h2 id="strokes">Strokes</h2>
-<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, boards, curves and images).</p>
+<p>Strokes can be added to most of the layers at Penpot (rectangles, ellipses, boards, curves and images).</p>
 <figure>
   <video title="strokes" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke.webp" height="auto">
     <source src="/img/styling/stroke.mp4" type="video/mp4">
@@ -136,86 +137,4 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <li><strong>Square</strong> - Adds a rectangular ending to the end of the path.</li>
 </ul>
 
-<h2 id="radius">Border radius</h2>
-<p>You can customize the border radius of rectangles and images, with the option to customize each corner individually.</p>
-<figure>
-  <video title="Border radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.webp" height="auto">
-    <source src="/img/styling/corners.mp4" type="video/mp4">
-  </video>
-</figure>
 
-
-<h2 id="shadow">Shadow</h2>
-<p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
-<figure>
-  <img alt="Layer shadows" src="/img/styling/shadow.webp"/>
-</figure>
-<p>Shadow options are:</p>
-<ul>
-  <li><strong>Type</strong> - Drop (outside the layer), inner (inside the layer)</li>
-  <li><strong>Horizontal position</strong> (X)</li>
-  <li><strong>Vertical position</strong> (Y)</li>
-  <li><strong>Blur</strong></li>
-  <li><strong>Spread</strong></li>
-  <li><strong>Color and opacity</strong></li>
-</ul>
-
-<h2 id="blur">Blur</h2>
-<p>You can set a blur for each and every object at Penpot.</p>
-<p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
-<figure>
-  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
-    <source src="/img/styling/blur.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="blend">Opacity and blend</h2>
-<p>Set the overal opacity for layers and their blend mode.</p>
-<p>Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.</p>
-<figure>
-  <img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
-</figure>
-<p>Blend options available:</p>
-<ul>
-  <li><strong>Normal</strong></li>
-  <li><strong>Darken</strong></li>
-  <li><strong>Multiply</strong></li>
-  <li><strong>Color burn</strong></li>
-  <li><strong>Lighten</strong></li>
-  <li><strong>Screen</strong></li>
-  <li><strong>Color dodge</strong></li>
-  <li><strong>Overlay</strong></li>
-  <li><strong>Soft light</strong></li>
-  <li><strong>Hard light</strong></li>
-  <li><strong>Difference</strong></li>
-  <li><strong>Exclusion</strong></li>
-  <li><strong>Hue</strong></li>
-  <li><strong>Saturation</strong></li>
-  <li><strong>Color</strong></li>
-  <li><strong>Luminosity</strong></li>
-</ul>
-
-<h2 id="copy-paste-properties">Copy/Paste properties</h2>
-<p>You can copy and apply properties, including fills, strokes, shadows, and others from one layer to another—or multiple layers with just a few clicks. You can do it using the layer's menu or shortcuts.</p>
-
-<figure>
-  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/copy-properties.webp" height="auto">
-    <source src="/img/styling/copy-properties.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<p>Using the layer menu</p>
-<ol>
-  <li>Select one layer.</li>
-  <li>Right click to show the layer menu.</li>
-  <li>Press <strong>Copy/Paste as... > Copy properties</strong>.</li>
-  <li>Select one or more other layers.</li>
-  <li>Right click to show the layer/s menu.</li>
-  <li>Press <strong>Copy/Paste as... > Paste properties</strong>.</li>
-</ol>
-
-<p>Using Shortcuts</p>
-<ul>
-  <li><strong>Copy properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>C</kbd></li>
-  <li><strong>Paste properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>V</kbd></li>
-</ul>

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

@@ -1,5 +1,6 @@
 ---
-title: 08· Flexible Layouts
+title: Flexible Layouts
+order: 6
 desc: Master responsive web design with Penpot's flexible and grid layouts! Learn Flexbox and CSS Grid standards. Explore tutorials, properties, and more.
 ---
 
@@ -14,7 +15,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
  To help you learn the fundamentals of Flex Layout <a href="https://penpot.app/design/layout" target="_blank">here’s a dedicated website</a> where you will find a <strong>video tutorial</strong> and a <strong>playground template</strong>.
 </p>
 
-<h3 id="layouts-flex-css">Flex Layout is based on Flexbox CSS standard</h3>
+<h3>Flex Layout is based on Flexbox CSS standard</h3>
 <p>Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. There are many comprehensive explanations about Flexbox, if you are interested we recommend you to read the one at <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">CSS Tricks</a>.</p>
 <figure>
 <p><img src="/img/csstricks-00-basic-terminology.svg" alt="Flex Layout" /></p>
@@ -32,8 +33,8 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
 <figure><img src="/img/flexible-layouts/layouts-add.webp" alt="Adding Layouts" /></figure>
 
 
-<h3 id="layouts-flex-arrange-reorder">Arrange and reorder objects to a Flex Layout</h3>
+<h3 id="layouts-flex-arrange-reorder">Arrange and reorder layers to a Flex Layout</h3>
-<p>To add an object to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.</p>
+<p>To add a layer to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.</p>
 <p>To reorder elements you can drag them or use the <kbd>UP/DOWN</kbd> keystrokes.</p>
 <figure>
   <video title="A video showing a layer being dragged to and moved through a flex flow" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-arrange.webp" height="auto">
@@ -57,7 +58,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
   <li><strong>Sizing:</strong> Fix/fit width, Fix/fit height.</li>
 </ul>
 
-<h3 id="layouts-flex-elements">Positioning Flex elements</h3>
+<h3 id="layouts-flex-elements">Positioning flex elements</h3>
 <h4>Position static:</h4>
 <p>Static position is the default option for flex elements, meaning that they will be included in the flex flow, using flex properties.</p>
 <figure><img src="/img/flexible-layouts/flex-properties-element.webp" alt="Flex Layout properties" /></figure>
@@ -94,7 +95,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
 
 
 <h3 id="layouts-flex-code">Get code and specifications</h3>
-<p>Designing with Flex Layout generates <em>ready for production</em> code. Select the flex board or its inner elements and then open the <a href="/user-guide/inspect" target="_blank">Inspect tab</a> to obtain its properties, detailed info and raw code.</p>
+<p>Designing with Flex Layout generates <em>ready for production</em> code. Select the flex board or its inner elements and then open the <a href="/user-guide/dev-tools/#inspect-design" target="_blank">Inspect tab</a> to obtain its properties, detailed info and raw code.</p>
 <figure><img src="/img/flexible-layouts/layouts-flex-code.gif" alt="Inspecting code at Penpot" /></figure>
 
 <h3 id="layouts-flex-examples">Flex Layout basic examples</h3>
@@ -132,7 +133,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
   <figcaption>Rearranging cells in Grid Layout</figcaption>
 </figure>
 
-<h3 id="layouts-flex-css">Grid Layout is based on CSS Grid standard</h3>
+<h3>Grid Layout is based on CSS Grid standard</h3>
 <p>Penpot's Grid Layout is built over CSS Grid, a fairly new CSS module. If you are interested to know more about this CSS module we recommend checking out the comprehensive explanation <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">Guide to CSS Grid</a> at CSS Tricks.</p>
 
 
@@ -274,7 +275,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
 <p>To turn areas back to regular cells, just select the "Auto" option at the grid cell properties (right sidebar).</p>
 
 <h3 id="layouts-grid-code">Grid code and specifications</h3>
-<p>Grid layout at Penpot behaves just like CSS Grid because it is actually using the CSS Grid standard. This means that you can just switch to <a href="/user-guide/inspect" target="_blank">Inspect mode</a>, get the code and use it in real websites.</p>
+<p>Grid layout at Penpot behaves just like CSS Grid because it is actually using the CSS Grid standard. This means that you can just switch to <a href="/user-guide/dev-tools/#inspect-design" target="_blank">Inspect mode</a>, get the code and use it in real websites.</p>
 <figure><img src="/img/flexible-layouts/layouts-grid-code.gif" alt="Inspecting code at Penpot" /></figure>
 
 

docs/user-guide/designing/index.njk

@@ -0,0 +1,40 @@
+---
+title: Designing
+order: 2
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1  id="section-2">Designing</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/designing/workspace-basics">
+      <h2>Workspace basics →</h2>
+      <p>Workspace basics</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/designing/layers">
+      <h2>Layers →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/designing/color-stroke/">
+      <h2>Color & Strokes→</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/designing/text-typo">
+      <h2>Text & Typography→</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/designing/flexible-layouts">
+      <h2>Flexible layouts →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

docs/user-guide/designing/layers.njk

@@ -0,0 +1,519 @@
+---
+title: Layers
+order: 2
+desc: "Work with Penpot's layers: boards, shapes, text, paths, and graphics. Learn to create, select, rename, and customize boards for optimal workflow."
+---
+
+<h1 id="layers">Layers</h1>
+<p class="main-paragraph">Layers are objects or items that you can place in the viewport. Boards, shapes, texts, paths and graphics are layers. The following describes the different layers that you have
+available in Penpot, and how to get the most of them.</p>
+
+<h2 id="available-layers">Available layers</h2>
+
+<h3 id="Boards">Boards</h3>
+<p>Boards are layers that serve as your high-level containers for content organization and layout. Boards are useful if you want to design for a specific screen or print size. Boards can contain other boards. First level boards
+are shown by default at the <a href="/user-guide/prototyping-testing/testing-view-mode/">View mode</a>, acting as screens of a design or pages of a document. Also, layers inside boards can be clipped. Boards are a powerful element at Penpot, opening up a ton of possibilities when creating and organizing your designs.</p>
+
+<h4>Create boards</h4>
+<p>To create a board, use the board tool at the toolbar or the shortcut <kbd>B</kbd>.</p>
+<figure>
+  <img src="/img/objects/board-tool.webp" alt="Board tool">
+</figure>
+
+<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>Click-and-drag</strong> to draw a frame of approximate size, then immediately edit its width/height values to be precise.</li>
+</ul>
+<figure>
+  <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
+    <source src="/img/objects/board-creation.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<p><strong>TIP:</strong> Create a board around one or more selected layers using the option "Selection to board" at the menu or the shortcut <kbd>Ctrl/⌘</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>.</p>
+
+<h4>Select boards</h4>
+<p>There are two different cases in terms of selecting boards:</p>
+<ul>
+  <li>For first level boards that have at least one inside, click on the board name or <kbd>Ctrl/⌘</kbd> + click on the board area to select it and then drag</li>
+  <li>For the rest (empty first level boards and inside boards) just click to select.</li>
+</ul>
+<figure>
+  <video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.webp" height="auto">
+    <source src="/img/objects/board-select.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Rename boards</h4>
+<p>There several ways to rename boards:</p>
+<ul>
+  <li>Double click on the board name at the workspace viewport.</li>
+  <li>Double click on the board name at the layers panel.</li>
+  <li>Press <kbd>Alt/⌥</kbd> + <kbd>N</kbd> to rename the board at the layers panel.</li>
+  <li>Right click to show the menu and select "Rename".</li>
+</ul>
+<figure>
+  <video title="Rename board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-rename.webp" height="auto">
+    <source src="/img/objects/board-rename.webm" type="video/webm">
+  </video>
+</figure>
+
+<h4>Set board as thumbnail</h4>
+<p>At the workspace, select a specific board to be the file thumbnail that will be shown at the dashboard in the file card.</p>
+<p>To set a custom thumbnail:</p>
+<ol>
+  <li>Select a board.</li>
+  <li>Right click to show the menu and select "Set as thumbnail" or press <kbd>Shift</kbd> <kbd>T</kbd>.</li>
+</ol>
+<figure>
+  <video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.webp" height="auto">
+    <source src="/img/objects/board-thumbnail.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Copy link to board</h4>
+<p>You can get the link to each individual board, making it easy to share them with team members or include direct links in documentation.</p>
+<figure>
+  <img src="/img/objects/board-copy-link.webp" alt="copy link to board">
+</figure>
+<p>There are two ways to copy a direct link to a board:</p>
+<ul>
+  <li>Using the menu: Select the board, right click and select the "Copy link" option.</li>
+  <li>Using the shortcut: Select the board and press <kbd>Shift/⇧</kbd> + <kbd>Alt/⌥</kbd> + <kbd>C</kbd>.</li>
+</ul>
+
+<h4>Clip content</h4>
+<p>Boards offer the option to clip its content (or not).</p>
+<figure>
+  <video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.webp" height="auto">
+    <source src="/img/objects/board-clip.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Show in View mode</h4>
+<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/first-steps/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p>
+<p><strong>Defaults</strong></p>
+<p>As it is very likely that the first level boards will be used as a screen and the interiors will not, there are different defaults for newly created boards.</p>
+<ul>
+  <li>Boards created at first level (<a href="/user-guide/designing/workspace-basics/#viewport">the viewport</a>): shown by default.</li>
+  <li>Boards created inside other boards: not shown by default.</li>
+</ul>
+<figure>
+  <img src="/img/objects/board-show.webp" alt="board show in view mode">
+</figure>
+
+<h4>Show fill in exports</h4>
+<p> Sometimes you don’t need the artboards to be part of your designs, but only their support to work on them.
+Penpot allows you to decide if the fill of an artboard will be shown in exports, you just have to check/uncheck the "Show in exports" option which is below the fill setting.</p>
+<figure>
+  <img src="/img/objects/board-fill.webp" alt="show board fill in exports">
+</figure>
+
+<h4>Resize board to fit to content</h4>
+<p>You can adjust the board size to fit its content by clicking the icon in the design sidebar.</p>
+<figure>
+  <img src="/img/objects/board-fit.webp" alt="Resize board to fit to content button">
+</figure>
+
+<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>
+<figure>
+  <img src="/img/objects/board-guides.webp" alt="board guides">
+</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>
+<figure>
+  <img src="/img/objects/board-prototyping.webp" alt="prototyping with boards">
+</figure>
+
+<h3 id="rectangles-ellipses">Rectangles and ellipses</h3>
+<p>Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting
+a design.</p>
+<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
+<p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/designing/layers/#layer-actions">Layer basics</a>.</p>
+<figure>
+  <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
+    <source src="/img/objects/rectangles-ellipses.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="text">Text</h3>
+<p> (NOTA: El grosso de este contenido está en su propia sección. Aquí vendría un texto introductorio y un link a la <a href="/user-guide/designing/text-typo/">sección en cuestión</a>. )</p>
+
+<h3 id="curves">Curves (freehand)</h3>
+<p>The curve tool allows a path to be created directly in a freehand mode.
+Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Shift/⇧</kbd> + <kbd>c</kbd>.
+<p>The path created will contain a lot of points, but it is edited the same way as any other curve.</p>
+
+<h3 id="paths">Paths (bezier)</h3>
+<p>A path is composed of two or more nodes and the line segments between them, which may also be curved. To draw a new path you have to select the path tool by clicking on the icon at the toolbar or pressing <kbd>P</kbd>. Then you have two ways to create the path:</p>
+<ol>
+  <li><strong>Click</strong> to create a new corner node.</li>
+  <li><strong>Click and drag</strong> to create a curved node.</li>
+</ol>
+<p>To finish the path:</p>
+<ol>
+  <li><strong>Close it</strong> clicking over the starting node.</li>
+  <li><strong>Leave it open</strong> pressing <kbd>Esc</kbd> or <kbd>Enter</kbd> to stop editing. Then press <kbd>Esc</kbd> to exit the edit mode.</li>
+</ol>
+<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
+<figure>
+  <video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.webp" height="auto">
+    <source src="/img/objects/path-create.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Edit nodes</h4>
+<p>To edit a node double click on a path or select and press <kbd>Enter</kbd>.
+You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
+<figure>
+  <video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.webp" height="auto">
+    <source src="/img/objects/nodes-edit.mp4" type="video/mp4">
+  </video>
+</figure><h4>Node types</h4>
+<p>There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow the curvature of a path to be modified.</p>
+<figure>
+  <video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.webp" height="auto">
+    <source src="/img/objects/node-types.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="images">Images</h3>
+<h4>Insert images</h4>
+<p>There are several options for inserting an image into a Penpot file:</p>
+<ul>
+  <li>Use the <strong>image tool</strong> at the toolbar or press <kbd>K</kbd> to insert images in your file system.</li>
+  <li><strong>Drag</strong> an image from your computer to the viewport.</li>
+  <li>Copy an image & paste it or drag it right from a <strong>browser</strong>.</li>
+  <li>Drag an image from a Penpot <strong>library</strong>.</li>
+</ul>
+
+<h4>Images aspect ratio</h4>
+<p>Images fill the layer backgrounds by default, so they take up the entire layer while maintaining the aspect ratio. This is great for flexible designs because the images can adapt to different sizes.</p>
+<p>However, if you don't want an image to keep its aspect ratio when resizing, you just have to uncheck the option in the image settings.</p>
+<figure>
+  <video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.webp" height="auto">
+    <source src="/img/objects/image-ratio.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h2 id="layer-actions">Layer actions</h2>
+
+<h3 id="creating-layers">Create</h3>
+<p>To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
+<p>Hold <kbd>Shift/⇧</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
+<figure>
+  <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.webp" height="auto">
+    <source src="/img/layers/layers-create.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="duplicating-layers">Duplicate</h3>
+<p>There are several ways to duplicate a layer:</p>
+<ol>
+  <li>You can press <kbd>Ctrl/⌘</kbd> + <kbd>D</kbd> to duplicate a layer right over a selected layer. </li>
+  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu. </li>
+  <li>You can also select a layer and drag while pressing <kbd>Alt/⌥</kbd> so you can simultaneously duplicate and drag the new layer.</li>
+</ol>
+<figure>
+  <video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.webp" height="auto">
+    <source src="/img/layers/layers-duplicate.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="delete-layers">Delete</h3>
+<p>There are a couple ways to delete a layer. </p>
+<ol>
+  <li>You can press <kbd>Supr/⌫</kbd> to delete a selected layer. </li>
+  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.</li>
+</ol>
+
+<h3 id="move-layers">Move</h3>
+<p>To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the board.</p>
+<figure>
+  <video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.webp" height="auto">
+    <source src="/img/layers/layers-move.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="select-layers">Select</h3>
+<p>The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar. </p>
+<p>To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing <kbd>Shift/⇧</kbd>. If you hold <kbd>Shift/⇧</kbd> and click you can deselect layers individually.</p>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.webp" height="auto">
+    <source src="/img/layers/layers-select.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h4>Selecting layers at the layers panel</h4>
+<ol>
+  <li>Click a layer to do a single selection.</li>
+  <li>Press <kbd>Ctrl/⌘</kbd> while clicking two or more layers to do a multiple selection.</li>
+  <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>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.webp" height="auto">
+    <source src="/img/layers/layers-multiselect.mp4" type="video/mp4">
+  </video>
+</figure>
+<h4>Select layers ignoring groups (deep selection)</h4>
+<p>If you want to select an element that is difficult to reach because it is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the layers as being at the same level.</p>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.webp" height="auto">
+    <source src="/img/layers/layers-deepselect.mp4" type="video/mp4">
+  </video>
+</figure>
+<h4>Select layers inside groups</h4>
+<p>To <strong>select a layer inside a group</strong> you do double click. First click selects the group, second click selects a layer.</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="hide-lock">Hide and lock layers</h3>
+<h4>Hide and show layers</h4>
+<p>You can control the visibility of any layer by clicking the eye icon next to it in the Layers panel. When a layer is hidden, it will not appear on the canvas, but you can still select it in the Layers panel, move its order, or modify its properties. The eye icon always indicates whether a layer is visible or hidden, making it easy to manage complex designs.</p>
+
+<h4>Lock and unlock</h4>
+<p>Locking a layer helps prevent accidental changes or movement on the canvas. When a layer is locked, it cannot be moved or edited directly in the canvas area. However, you can still select a locked layer in the Layers panel and adjust its properties, such as color, effects, or name. The lock icon next to the layer’s name shows its locked status, helping you keep your design organized and protected.</p>
+
+<figure>
+  <video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.webp" height="auto">
+    <source src="/img/layers/layers-hide-lock.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="group-layers">Group</h3>
+<p>Grouped layers can be moved, transformed or styled at the same time. </p>
+<ul>
+  <li><strong>Group:</strong> To group two or more layers, 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.</li>
+  <li><strong>Ungroup:</strong> Press <kbd>Shift/⇧</kbd> + <kbd>G</kbd> or use the option at the layers menu that you can open with right click over the selected group.</li>
+</ul>
+<figure>
+  <video title="Group layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-group.webp" height="auto">
+    <source src="/img/layers/layers-group.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="mask-layers">Mask</h3>
+<p>A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape. </p>
+<ul>
+  <li><strong>Mask layers:</strong> Select more than one layer or a group of them. Then you can apply the masking using the option at the layers menu or by pressing <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd>. The shape that is at the lowest level at the layer list will be used as a mask. </li>
+  <li><strong>Unmask layers:</strong> Select a mask and then press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</li>
+</ul>
+<figure>
+  <video title="Mask layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-mask.webp" height="auto">
+    <source src="/img/layers/layers-mask.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="resize-layers">Resize</h3>
+<p>To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode. You can also use the design panel where you can link width and height.</p>
+<ul>
+  <li>Hold <kbd>Shift/⇧</kbd> while resizing the layer to preserve its aspect ratio.</li>
+  <li>Hold <kbd>Alt/⌥</kbd> while resizing the layer to do it from the center and resize simultaneously two opposite sides.</li>
+</ul>
+<figure>
+  <video title="Resize layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-resize.webp" height="auto">
+    <source src="/img/layers/layers-resize.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="scale-elements">Scale elements, texts and properties</h3>
+<p>Activate the scale tool by pressing <kbd>K</kbd> or from the main file menu to scale elements while maintaining their visual aspect. Once it is activated you can resize texts, layers and groups and preserve their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners.
+<figure>
+  <video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.webp" height="auto">
+    <source src="/img/layers/layers-scale.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="rotate-layers">Rotate</h3>
+<p>To rotate selected layers you can use the handles at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold <kbd>Ctrl/⌘</kbd> while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.</p>
+<figure>
+  <video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.webp" height="auto">
+    <source src="/img/layers/layers-rotate.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="flip-layers">Flip</h3>
+<p>You can find the options to flip layers in their contextual menu (select the layer and right click). You also have shortcuts to do this:</p>
+<ul>
+  <li><strong>Flip layers horizontally:</strong> Select the layer and press <kbd>Shift/⇧</kbd> + <kbd>H</kbd></li>
+  <li><strong>Flip layers vertically:</strong> Select the layer and then press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>.</li>
+</ul>
+<figure>
+  <video title="Flip layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-flip.webp" height="auto">
+    <source src="/img/layers/layers-flip.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="aling-distribute-layers">Align and distribute</h3>
+<p>Aligning and distributing layers can be found at the top of the Design panel. </p>
+<h4>Align layers</h4>
+<p>Aligning will move all the selected layers to a position relative to one of them. For instance, aligning top will align the elements with the edge of the top-most element.</p>
+<figure>
+  <video title="Align layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-align.webp" height="auto">
+    <source src="/img/layers/layers-align.mp4" type="video/mp4">
+  </video>
+</figure>
+<h4>Distribute layers</h4>
+<p>Distributing layers to position them vertically and horizontally with equal distances between them.</p>
+<figure>
+  <video title="Distribute layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-distribute.webp" height="auto">
+    <source src="/img/layers/layers-distribute.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="boolean-operators">Boolean operators</h3>
+<p>It is possible to combine shapes in a group in different ways to create more complex layers by using
+"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available for more editing. There are five boolean operations available: union, difference, intersection, exclusion and flatten. Using boolean operations allows many graphic options and possibilities for your designs.</p>
+<figure>
+  <video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.webp" height="auto">
+    <source src="/img/layers/layers-boolean.mp4" type="video/mp4">
+  </video>
+</figure>
+<ul>
+  <li><strong>Union:</strong> the resulting combination is the sum of the shapes.</li>
+  <li><strong>Difference:</strong> the opposite of union, the resulting layer has the area of the shape on top has been cut out from the shape at the bottom.</li>
+  <li><strong>Intersection:</strong> creates a group whose shape is the overlapping area between the shapes.</li>
+  <li><strong>Exclusion:</strong> the opposite of intersection, the resulting shape is the area that does not overlap between the shapes.</li>
+  <li><strong>Flatten:</strong> Tecnically not a boolean operator, this is the way to permanently combine the paths of a group of shapes in a single one.</li>
+</ul>
+
+<h3 id="constraints">Resizing constraints</h3>
+<p>Constraints allow you to decide how layers will behave when resizing its container.</p>
+
+<h4>Apply constraints</h4>
+<p>Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.</p>
+<p>To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.</p>
+<figure>
+  <video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.webp" height="auto">
+    <source src="/img/layers/layers-constraints.mp4" type="video/mp4">
+  </video>
+</figure>
+<p>Constraints are set to “Scale” by default, but you have other options.</p>
+
+<h5>Horizontal constraints</h5>
+<ul>
+  <li><strong>Left</strong>: The layer maintains its size and position relative to the left side of its parent container.</li>
+  <li><strong>Right</strong>: The layer maintains its size and position relative to the right side of its parent container.</li>
+  <li><strong>Left & right</strong>: The layer resizes while maintaining its distance to both horizontal sides of its parent container.</li>
+  <li><strong>Center</strong>: The layer maintains its size and position relative to the horizontal center of its parent container.</li>
+  <li><strong>Scale</strong>: The layer will horizontally resize proportionally to its parent container size.</li>
+</ul>
+<figure>
+  <img src="/img/layers/layers-constraints-h.webp" alt="Horizontal constraints">
+</figure>
+
+<h5>Vertical constraints</h5>
+<ul>
+  <li><strong>Top</strong>: The layer maintains its size and position relative to the top side of its parent container.</li>
+  <li><strong>Bottom</strong>: The layer maintains its size and position relative to the bottom side of its parent container.</li>
+  <li><strong>Top & bottom</strong>: The layer resizes while maintaining its distance to both vertical sides of its parent container.</li>
+  <li><strong>Center</strong>: The layer maintains its size and position relative to the vertical center of its parent container.</li>
+  <li><strong>Scale</strong>: The layer will vertically resize proportionally to its parent container size.</li>
+</ul>
+<figure>
+  <img src="/img/layers/layers-constraints-v.webp" alt="Vettical constraints">
+</figure>
+
+
+<h2 id="styling-layers">Styling layers</h2>
+
+<p>Penpot has a variety of properties for each layer. When selected, the options are displayed in the design panel on the right.</p>
+
+<h3 id="radius">Border radius</h3>
+<p>You can customize the border radius of rectangles and images, with the option to customize each corner individually.</p>
+<figure>
+  <video title="Border radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.webp" height="auto">
+    <source src="/img/styling/corners.mp4" type="video/mp4">
+  </video>
+</figure>
+
+
+<h3 id="shadow">Shadow</h3>
+<p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
+<figure>
+  <img alt="Layer shadows" src="/img/styling/shadow.webp"/>
+</figure>
+<p>Shadow options are:</p>
+<ul>
+  <li><strong>Type</strong> - Drop (outside the layer), inner (inside the layer)</li>
+  <li><strong>Horizontal position</strong> (X)</li>
+  <li><strong>Vertical position</strong> (Y)</li>
+  <li><strong>Blur</strong></li>
+  <li><strong>Spread</strong></li>
+  <li><strong>Color and opacity</strong></li>
+</ul>
+
+<h3 id="blur">Blur</h3>
+<p>You can set a blur for each and every layer at Penpot.</p>
+<p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
+<figure>
+  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
+    <source src="/img/styling/blur.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="blend">Opacity and blend</h3>
+<p>Set the overal opacity for layers and their blend mode.</p>
+<p>Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.</p>
+<figure>
+  <img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
+</figure>
+<p>Blend options available:</p>
+<ul>
+  <li><strong>Normal</strong></li>
+  <li><strong>Darken</strong></li>
+  <li><strong>Multiply</strong></li>
+  <li><strong>Color burn</strong></li>
+  <li><strong>Lighten</strong></li>
+  <li><strong>Screen</strong></li>
+  <li><strong>Color dodge</strong></li>
+  <li><strong>Overlay</strong></li>
+  <li><strong>Soft light</strong></li>
+  <li><strong>Hard light</strong></li>
+  <li><strong>Difference</strong></li>
+  <li><strong>Exclusion</strong></li>
+  <li><strong>Hue</strong></li>
+  <li><strong>Saturation</strong></li>
+  <li><strong>Color</strong></li>
+  <li><strong>Luminosity</strong></li>
+</ul>
+
+<h3 id="copy-paste-properties">Copy/Paste properties</h3>
+<p>You can copy and apply properties, including fills, strokes, shadows, and others from one layer to another—or multiple layers with just a few clicks. You can do it using the layer's menu or shortcuts.</p>
+
+<figure>
+  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/copy-properties.webp" height="auto">
+    <source src="/img/styling/copy-properties.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<p>Using the layer menu</p>
+<ol>
+  <li>Select one layer.</li>
+  <li>Right click to show the layer menu.</li>
+  <li>Press <strong>Copy/Paste as... > Copy properties</strong>.</li>
+  <li>Select one or more other layers.</li>
+  <li>Right click to show the layer/s menu.</li>
+  <li>Press <strong>Copy/Paste as... > Paste properties</strong>.</li>
+</ol>
+
+<p>Using Shortcuts</p>
+<ul>
+  <li><strong>Copy properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>C</kbd></li>
+  <li><strong>Paste properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>V</kbd></li>
+</ul>
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,89 @@
+---
+title: Text & Typography
+order: 5
+desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Penpot! Enhance your designs with personalised typography.
+---
+
+<h1 id="text-typo">Text & Typography</h1>
+
+<h2 id="text">Text</h2>
+<p>To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have two ways to create a text layer:</p>
+<ol>
+  <li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
+  <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
+</ol>
+<figure>
+  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
+    <source src="/img/objects/text-create.mp4" type="video/mp4">
+  </video>
+</figure>
+<p><strong>Tips for resizing</strong></p>
+<ul>
+  <li>Double-click on the right side of the bounding box to set the resize setting to auto-width.</li>
+  <li>Double-click on the bottom side of the bounding box to set the resize setting to auto-height.</li>
+</ul>
+<h4>Edit and style text content</h4>
+<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
+<figure>
+  <img src="/img/objects/text-edit.webp" alt="editing text">
+</figure>
+<h3>Text options</h3>
+<figure>
+  <img src="/img/objects/text-options.webp" alt="text options">
+</figure>
+<ol>
+  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/designing/text-typo/#custom-fonts">install your own fonts</a>.</li>
+  <li><strong>Font size.</strong></li>
+  <li><strong>Font type.</strong></li>
+  <li><strong>Line height</strong> (in pixels).</li>
+  <li><strong>Letter spacing</strong> (in pixels).</li>
+  <li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
+  <li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
+  <li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
+  <li><strong>Vertical alignment:</strong> top, center, bottom.</li>
+  <li><strong>Decoration:</strong> none, underline, strikethrough.</li>
+  <li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
+</ol>
+
+<h2 id="rtl-support">RTL support</h2>
+<p>Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.</p>
+<p>If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.</p>
+<figure>
+  <img src="/img/layers/layers-rtl.webp" alt="RTL support">
+</figure>
+
+<h2 id="custom-fonts">Custom fonts</h2>
+<p>If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>
+
+<h3 id="customfonts-upload">Upload local fonts</h3>
+<p>To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.</p>
+<p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
+<p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>
+
+<h4>To upload a local font:</h4>
+<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>
+<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>
+</ol>
+<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>
+
+<h3 id="customfonts-families">Group fonts in font families</h3>
+<p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
+<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.</p>
+<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>
+
+<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>
+<p><img src="/img/customfonts-use.gif" alt="local fonts" /></p>
+
+<h3>Fonts Licensing and Usage</h3>
+<p>You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of <a href="https://penpot.app/terms" target="_blank">Penpot's Terms of Service</a>. You also might want to read about <a href="https://www.typography.com/faq" target="_blank">font licensing</a>.</p>
+
+

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

@@ -1,5 +1,6 @@
 ---
-title: 03· Workspace basics
+title: Workspace Basics
+order: 1
 desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools, dynamic alignment, rulers, guides, and shortcuts.
 ---
 
@@ -29,15 +30,81 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   <img src="/img/workspace-basics/main-menu.webp" alt="Main menu" />
 </figure>
 
+<h2 id="layer-basics">Layers panel</h2>
+<p>Every layer you create in Penpot’s <a href="/user-guide/designing/workspace-basics/#viewport">viewport</a> is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.</p>
+
+<h3>Pages</h3>
+<p>Pages allow you to organize layers into separate sections inside a file, and are shown in separate tabs. Subdividing a file into pages gives you the ability to split your file into logically different sections so that you can organise your work. For instance, you can use pages to separate stages of the design process but keep them in the same document. Different screen sizes, features or atomic design categories are other common ways to use pages. </p>
+
+<p>You can add, remove or rename pages to suit your needs.</p>
+<figure>
+  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.webp" height="auto">
+    <source src="/img/layers/pages-create.mp4" type="video/mp4">
+  </video>
+</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>
+  <video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.webp" height="auto">
+    <source src="/img/layers/layers-panel.mp4" type="video/mp4">
+  </video>
+</figure>
+<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>
+</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>
+
+
+<h3>Search and filter layers</h3>
+<p>Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).</p>
+<figure>
+  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.webp" height="auto">
+    <source src="/img/layers/layers-search.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<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>
+<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="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>
+<ol> 
+  <li>Select one or more elements.</li>
+  <li>Right click on the selection to show the menu and select the option “Focus on” or press <kbd>F</kbd>.</li>
+</ol>
+<p>Notice that the layer panel will now only show the focused layers. A focus mode status line will also appear at the top.</p>
+<p>To exit focus mode and return to the original viewport and selection, right click anywhere and select “Focus off” or just press <kbd>F</kbd> again. You can also click anywhere on the focus mode status line at the top of the layer panel.
+</p>
+<figure>
+  <video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
+    <source src="/img/layers/layers-focus.mp4" type="video/mp4">
+  </video>
+</figure>
+
 <h2 id="zoom">Zoom</h2>
-<h4>Zoom menu</h4>
+<h3>Zoom menu</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>
+<p><a href="/user-guide/first-steps/shortcuts/#zoom-workspace" target="_blank">All zoom shortcuts →</a></p>
 <figure>
   <img src="/img/workspace-basics/workspace-zoom.webp" alt="Zoom options" />
 </figure>
 
-<h4>Zoom lense</h4>
+<h3>Zoom lense</h3>
 <p>Press left click while pressing <kbd>Z</kbd> to zoom in to a specific point and <kbd>Alt/⌥</kbd> + <kbd>Z</kbd> to zoom out.</p>
 <p><img src="/img/zoom-lense.gif" alt="zoom lense" /></p>
 <!--figure>
@@ -46,7 +113,7 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   </video>
 </figure-->
 
-<h4>Zooming from the layers panel</h4>
+<h3>Zooming from the layers panel</h3>
 <p>Double click over a layer icon to zoom to the layer.</p>
 <figure>
   <video title="Zoom layer" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/workspace-zoom-layer.webp" height="auto">
@@ -54,14 +121,112 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   </video>
 </figure>
 
+<h2 id="comments">Comments</h2>
+<p>Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
+
+<h3>Adding comments</h3>
+<figure>
+  <video title="Create comments" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/comments-create.webp" height="auto">
+    <source src="/img/workspace-basics/comments-create.mp4" type="video/mp4">
+  </video>
+</figure>
+<ol>
+  <li>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key.</li>
+  <li>Click on a location within the viewport to leave a comment. If you want the comment to appear in the board view, add the comment to the board.</li>
+  <li>Write your comment in the text box.</li>
+  <li>Press Post to leave the comment or Cancel to not do it.</li>
+</ol>
+<h3>How to reply a comment</h3>
+<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>
+<h3>Mark threads as read</h3>
+<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>
+<figure>
+  <img src="/img/workspace-basics/comments-mark.webp" alt="Marking comments as read" />
+</figure>
+
+<h3>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>Dashboard notifications</h3>
+<figure>
+  <img src="/img/workspace-basics/comments-dashboard.webp" alt="Comments notifications" />
+</figure>
+<p>At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.</p>
+
+
+<h2 id="history">File history versions</h2>
+<p>The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.</p>
+
+<h4>View history</h4>
+<p>To view the recent history of a file at the workspace click the history icon on the navbar at the left:</p>
+<ul>
+  <li>To see the history of file versions go to the <strong>History</strong> tab.</li>
+  <li>To see the history of item changes go to the <strong>Actions</strong> tab.</li>
+</ul>
+<figure>
+  <img src="/img/workspace-basics/history-view.webp" alt="History versions button" />
+</figure>
+
+<h3>History panel</h3>
+<p>At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.</p>
+
+<h4>Restore versions</h4>
+<p>All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.</p>
+<figure>
+  <img src="/img/workspace-basics/history-restore.webp" alt="Restore versions" />
+</figure>
+
+<h4>Saved versions</h4>
+<p>You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.</p>
+<figure>
+  <img src="/img/workspace-basics/history-save.webp" alt="Saved versions" />
+</figure>
+
+<h4>Autosaved versions</h4>
+<p>When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.</p>
+<p>In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.</p>
+<figure>
+  <img src="/img/workspace-basics/history-autosaved.webp" alt="Autosaved versions" />
+</figure>
+
+<h4>Pinned versions</h4>
+<p>File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.</p>
+<figure>
+  <img src="/img/workspace-basics/history-pin.webp" alt="Pin versions" />
+</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>
+  <img src="/img/workspace-basics/history-actions.webp" alt="Actions panel" />
+</figure>
+<p class="advice">The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.</p>
+
+<h4>Navigate actions</h4>
+<p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
+<p>You can also press any item of the actions list to get to this specific state.</p>
+
+<h2 id="shortcuts-panel">Shortcuts panel</h2>
+<p>Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.</p>
+<p>Display the shortcuts panel at the workspace using the shortcut <kbd>?</kbd> or through the option at the <a href="/user-guide/designing/workspace-basics/#workspace-menu">main menu</a>.</p>
+<p>The categories and a filter will help you to find the shortcut you need.</p>
+<figure>
+  <img src="/img/workspace-basics/shortcuts.webp" alt="Shortcuts panel" />
+</figure>
+<p><a href="/user-guide/first-steps/shortcuts/" target="_blank">Full list of shortcuts →</a></p>
+
 <h2 id="dynamic-alignment">Dynamic alignment</h2>
-<p>While moving objects at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the object that is being moved to those guides to help you align to the center of the edges of other objects.</p>
+<p>While moving layers at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the layer that is being moved to those guides to help you align to the center of the edges of other layers.</p>
 <figure>
   <video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment.webp" height="auto">
     <source src="/img/workspace-basics/dynamic-alignment.mp4" type="video/mp4">
   </video>
 </figure>
-<p>If there are more than two objects nearby and you drag one of them Penpot will show their distance to help you distribute them equally. </p>
+<p>If there are more than two layers nearby and you drag one of them Penpot will show their distance to help you distribute them equally. </p>
 <figure>
   <video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment-measurement.webp" height="auto">
     <source src="/img/workspace-basics/dynamic-alignment-measurement.mp4" type="video/mp4">
@@ -177,13 +342,13 @@ geometric structure. In Penpot there are three types of guides:
 
 
 <h2 id="snap-to-pixel">Snap to pixel</h2>
-<p>Objects 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>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>
 <figure>
   <img src="/img/workspace-basics/workspace-snap.webp" alt="Snap to pixel setting" />
 </figure>
 
 <h2 id="nudge-amount">Nudge amount</h2>
-<p>Set your chosen distance to move objects 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>
+<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>
 <figure>
   <img src="/img/workspace-basics/nudge.webp" alt="Nudge amount prompt" />
 </figure>
@@ -192,98 +357,4 @@ geometric structure. In Penpot there are three types of guides:
   <img src="/img/workspace-basics/nudge-menu.webp" alt="Nudge amount prompt" />
 </figure>
 
-<h2 id="shortcuts-panel">Shortcuts panel</h2>
-<p>Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.</p>
-<p>Display the shortcuts panel at the workspace using the shortcut <kbd>?</kbd> or through the option at the <a href="/user-guide/workspace-basics/#workspace-menu">main menu</a>.</p>
-<p>The categories and a filter will help you to find the shortcut you need.</p>
-<figure>
-  <img src="/img/workspace-basics/shortcuts.webp" alt="Shortcuts panel" />
-</figure>
 
-<h2 id="history">File history versions</h2>
-<p>The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.</p>
-
-<h3>View history</h3>
-<p>To view the recent history of a file at the workspace click the history icon on the navbar at the left:</p>
-<ul>
-  <li>To see the history of file versions go to the <strong>History</strong> tab.</li>
-  <li>To see the history of item changes go to the <strong>Actions</strong> tab.</li>
-</ul>
-<figure>
-  <img src="/img/workspace-basics/history-view.webp" alt="History versions button" />
-</figure>
-
-<h3>History panel</h3>
-<p>At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.</p>
-
-<h4>Restore versions</h4>
-<p>All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.</p>
-<figure>
-  <img src="/img/workspace-basics/history-restore.webp" alt="Restore versions" />
-</figure>
-
-<h4>Saved versions</h4>
-<p>You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.</p>
-<figure>
-  <img src="/img/workspace-basics/history-save.webp" alt="Saved versions" />
-</figure>
-
-<h4>Autosaved versions</h4>
-<p>When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.</p>
-<p>In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.</p>
-<figure>
-  <img src="/img/workspace-basics/history-autosaved.webp" alt="Autosaved versions" />
-</figure>
-
-<h4>Pinned versions</h4>
-<p>File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.</p>
-<figure>
-  <img src="/img/workspace-basics/history-pin.webp" alt="Pin versions" />
-</figure>
-
-<h3>Actions panel</h3>
-<p>At the Actions panel, you have the object 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>
-  <img src="/img/workspace-basics/history-actions.webp" alt="Actions panel" />
-</figure>
-<p class="advice">The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.</p>
-
-<h4>Navigate actions</h4>
-<p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
-<p>You can also press any item of the actions list to get to this specific state.</p>
-
-<h2 id="comments">Comments</h2>
-<p>Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
-
-<h4>Adding comments</h4>
-<figure>
-  <video title="Create comments" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/comments-create.webp" height="auto">
-    <source src="/img/workspace-basics/comments-create.mp4" type="video/mp4">
-  </video>
-</figure>
-<ol>
-  <li>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key.</li>
-  <li>Click on a location within the viewport to leave a comment. If you want the comment to appear in the board view, add the comment to the board.</li>
-  <li>Write your comment in 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>
-<figure>
-  <img src="/img/workspace-basics/comments-mark.webp" alt="Marking comments as read" />
-</figure>
-
-<h4>Edit and remove comments</h4>
-<p>At the top right of the comment popup you can find options to edit or delete comments.</p>
-
-<h4>Dashboard notifications</h4>
-<figure>
-  <img src="/img/workspace-basics/comments-dashboard.webp" alt="Comments notifications" />
-</figure>
-<p>At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.</p>

docs/user-guide/dev-tools/index.njk

@@ -1,23 +1,24 @@
 ---
-title: 14· Inspect designs
+title: Dev tools
+order: 5
 desc: Learn how to inspect designs in Penpot! This guide covers distances, properties, code snippets (CSS, SVG, HTML), & exporting assets for seamless collaboration.
 ---
 
-<h1 id="inspect">Inspect designs</h1>
+<h1 id="dev-tools">Dev tools</h1>
 <p class="main-paragraph">At Penpot, you can inspect designs to get measures, view properties, export assets and get production-ready code. <p>
 
-<h2 id="inspect-activate">How to inspect designs</h2>
+<h2 id="inspect-design">Inspect design</h2>
-<p>You can activate the Inspect mode both at the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a> and at the <a href="/user-guide/the-interface/#interface-workspace">Workspace</a>.</p>
+<p>You can activate the Inspect mode both at the <a href="/user-guide/first-steps/the-interface/#interface-viewmode">View mode</a> and at the <a href="/user-guide/first-steps/the-interface/#interface-workspace">Workspace</a>.</p>
 
-<h3 id="inspect-viewmode">At the View mode</h3>
+<h3>At the View mode</h3>
 <figure>
   <video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.webp" height="auto">
     <source src="/img/inspect/inspect-viewmode.mp4" type="video/mp4">
   </video>
 </figure>
-<p>Go to the <a href="/user-guide/view-mode/#viewmode-inspect">Inspect designs at the View mode section</a> to know how to activate inspect mode at the View mode.</p>
+<p>Go to the <a href="/user-guide/prototyping-testing/testing-view-mode/#viewmode-inspect">Inspect designs at the View mode section</a> to know how to activate inspect mode at the View mode.</p>
 
-<h3 id="inspect-workspace">At the Workspace</h3>
+<h3>At the Workspace</h3>
 <figure>
   <video title="A video showing how to activate Inspect at the Workspace" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-workspace.webp" height="auto">
     <source src="/img/inspect/inspect-workspace.mp4" type="video/mp4">
@@ -26,13 +27,13 @@ desc: Learn how to inspect designs in Penpot! This guide covers distances, prope
 <p>At the Workspace, select the Inspect tab at the right sidebar to enter inspect mode.</p>
 <p>Inspect mode provides a safer <strong>view-only</strong> mode so developers can work at the Workspace without the fear of breaking things ;)</p>
 
-<h2 id="inspect-measure">How to get distances and measurements</h2>
+<h2 id="inspect-measure">Get distances and measurements</h2>
-<p>You can easily get measurements and distances between an object and other objects or board edges.</p>
+<p>You can easily get measurements and distances between a layer and other layers or board edges.</p>
 <p>To get distances:</p>
 <ul>
-<li>Click on an object or select it at the layers panel.</li>
+<li>Click on a layer or select it at the layers panel.</li>
-<li>Hover over other objects to see the distances between them and the selected one.</li>
+<li>Hover over other layers to see the distances between them and the selected one.</li>
-<li>Hover over a free space on the board or the area around it to see the distances from the object to the board edges.</li>
+<li>Hover over a free space on the board or the area around it to see the distances from the layer to the board edges.</li>
 </ul>
 <figure>
   <video title="A video showing how to get Inspect measures" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-measures.webp" height="auto">
@@ -40,15 +41,15 @@ desc: Learn how to inspect designs in Penpot! This guide covers distances, prope
   </video>
 </figure>
 
-<h2 id="inspect-info">How to get properties info</h2>
+<h2 id="inspect-info">Get properties info</h2>
-<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>At the Info panel you can see specifications about style and content of a layer. Different types of layers can have different sets of properties.</p>
 <figure>
   <video title="A video showing how to get Inspect properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-properties.webp" height="auto">
     <source src="/img/inspect/inspect-properties.mp4" type="video/mp4">
   </video>
 </figure>
 
-<h2 id="inspect-copy">How to copy properties info</h2>
+<h2 id="inspect-copy">Copy properties info</h2>
 <p>You can copy the value of one property or full sections of properties 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>
 <figure>
   <video title="A video showing how to copy properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-copy.webp" height="auto">
@@ -56,13 +57,27 @@ desc: Learn how to inspect designs in Penpot! This guide covers distances, prope
   </video>
 </figure>
 
-<h2 id="inspect-code">How to get code</h2>
+<h2 id="copy-css-properties">Copy CSS properties from layers</h2>
-<p>Press the code tab to get actual code snippets. Select an object to get ready to use code for markup (SVG and HTML) and styles (currently CSS only but more are coming).</p>
+<p>To copy CSS properties from layers:</p>
+<ol>
+  <li>Select one or more layers.</li>
+  <li>Right click to show the layer menu.</li>
+  <li>Press <strong>Copy/Paste as... > Copy as CSS</strong> in case you only want to get the CSS properties from the selected layer/s.</li>
+  <li>Press <strong>Copy/Paste as... > Copy as CSS (nested layers)</strong> in case you only want to get the CSS properties from the selected layer/s and all the contained layers.</li>
+</ol>
+<figure>
+  <img alt="Copy CSS properties" src="/img/layers/copy-css.webp"/>
+</figure>
+
+<h2 id="inspect-code">Get code</h2>
+<p>Press the code tab to get actual code snippets. Select a layer to get ready to use code for markup (SVG and HTML) and styles (currently CSS only but more are coming).</p>
 <figure>
   <video title="A video showing how to get code" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-code.webp" height="auto">
     <source src="/img/inspect/inspect-code.mp4" type="video/mp4">
   </video>
 </figure>
 
-<h2 id="inspect-export">How to export assets</h2>
+<h2 id="inspect-export">Export assets</h2>
-<p>Export option is available at the bottom of the Info panel. The same export presets that have been set at the workspace will be available at the View mode inspect. New export presets can be added at the Code mode but will not persist. Read more about <a href="/user-guide/exporting/">exporting assets</a>.</p>
+<p>Export option is available at the bottom of the Info panel. The same export presets that have been set at the workspace will be available at the View mode inspect. New export presets can be added at the Code mode but will not persist. Read more about <a href="/user-guide/export-import/exporting-layers/">exporting assets</a>.</p>
+
+

docs/user-guide/export-import/export-import-files.njk

@@ -1,23 +1,24 @@
 ---
-title: 15· Import/export files
+title: Export/Import Penpot files
+order: 1
 desc: Learn how to import and export files in Penpot, the free, open-source design tool. Discover file formats, backups, sharing, and library management.
 ---
 
-<h1 id="import-export">Import and export files</h1>
+<h1 id="export-import-files">Export and import Penpot files</h1>
 <p class="main-paragraph">You can export Penpot files to your computer and import them from your computer to your projects.</p>
 
 <h2 id="files-export">Export Penpot files</h2>
 <p>Exporting files is useful for many reasons. Sometimes you want to have a backup of your files and sometimes it is useful to share Penpot files with a user that does not belong to one of your teams, or you want to have a backup of your files outside Penpot, both SaaS (design.penpot.app) or at a self-hosted instance.</p>
 
-<h3 id="export-penpot-files">How to export Penpot files</h3>
+<h3>How to export Penpot files</h3>
 <h4>Export a single file</h4>
 <p>You can download (export) files from the workspace and from the dashboard.</p>
 <p>
-  <strong>From the <a href="/user-guide/the-interface/#interface-dashboard">dashboard</a></strong>: Select the download option at the file card menu.
+  <strong>From the <a href="/user-guide/first-steps/the-interface/#interface-dashboard">dashboard</a></strong>: Select the download option at the file card menu.
   <figure><img src="/img/import-export/export-card.webp" alt="Export penpot file" /></figure>
 </p>
 <p>
-  <strong>From the <a href="/user-guide/the-interface/#interface-workspace">workspace</a></strong>: Select the download option at the main menu.
+  <strong>From the <a href="/user-guide/first-steps/the-interface/#interface-workspace">workspace</a></strong>: Select the download option at the main menu.
   <figure><img src="/img/import-export/export-menu.webp" alt="Export penpot file" /></figure>
 </p>
 
@@ -34,7 +35,7 @@ desc: Learn how to import and export files in Penpot, the free, open-source desi
 <ul>
   <li><strong>Export shared libraries</strong>: Files with shared libraries will be included in the export, maintaining their linkage.</li>
   <li><strong>Include shared library assets in file libraries</strong>: Files will be exported with all external assets merged into the file library.</li>
-  <li><strong>Treat shared library assets as basic objects</strong>: Shared libraries will not be included in the export and no assets will be added to the library.</li>
+  <li><strong>Treat shared library assets as basic layers</strong>: Shared libraries will not be included in the export and no assets will be added to the library.</li>
 </ul>
 <figure><img src="/img/import-export/export-libraries.webp" alt="Export penpot file" /></figure>
 
@@ -68,3 +69,5 @@ desc: Learn how to import and export files in Penpot, the free, open-source desi
   <li>✅ Is a transparent, existing, open standard format.</li>
   <li>❌ Highly inefficient in terms of memory and transfer time when exporting and importing (this is because SVG).</li>
 </ul>
+
+

docs/user-guide/export-import/exporting-layers.njk

@@ -1,27 +1,28 @@
 ---
-title: 07· Exporting objects
+title: Exporting layers
-desc: Learn how to export objects in Penpot, the free, open-source design collaboration tool. This guide covers export presets, file formats, and more!
+order: 2
+desc: Learn how to export layers in Penpot, the free, open-source design collaboration tool. This guide covers export presets, file formats, and more!
 ---
 
-<h1 id="export">Exporting objects</h1>
+<h1 id="export">Exporting layers</h1>
 <p class="main-paragraph">In Penpot you can setup export presets for different file formats and scales.</p>
 
 <h2 id="export-howto">How to export</h2>
 <p>You can set up different export configurations to suit your needs. Each export configuration is called "export preset".</p>
 
 <h3>Create export preset</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>To export a layer 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/#interface-viewmode" target="_blank">View mode</a></strong> with the code tab activated.</p>
+<p>Export presets can be also found at the <strong><a href="/user-guide/first-steps/the-interface/#interface-viewmode" target="_blank">View mode</a></strong> with the code tab activated.</p>
 <figure>
   <video title="Export presets" muted="" playsinline="" controls="" width="100%" poster="/img/export/export-presets.webp" height="auto">
     <source src="/img/export/export-presets.mp4" type="video/mp4">
   </video>
 </figure>
-<p>You can set as many export presets as 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>You can set as many export presets as you need for the same layer. Set multiple exports to get the same layer in different scales and/or formats with just one click.</p>
 
 
 <h3>Remove export preset</h3>
-<p>To <strong>remove an export preset</strong> you have to select the object and then press the “-” button at the export preset you want to remove.</p>
+<p>To <strong>remove an export preset</strong> you have to select the layer and then press the “-” button at the export preset you want to remove.</p>
 
 <h2 id="export-options">Export options</h2>
 <p>The options of an export:</p>
@@ -57,7 +58,7 @@ desc: Learn how to export objects in Penpot, the free, open-source design collab
 <h2 id="export-artboards-pdf">Export boards to PDF</h2>
 <p>If you have a presentation made at Penpot you might want to create a document that can be shared with anyone, regardless of having a Penpot account, or just to be able to use your presentation offline (essential for talks and classes). You can easily export all the artboards of a page to a single PDF file from the file menu.</p>
 
-<p><a href="#pdf-note">Technical note</a> about the PDF format.</p>
+<p><a href="#export-technical">Technical note</a> about the PDF format.</p>
 
 <figure>
   <img src="/img/export/export-pdf.webp" alt="Export PDF">
@@ -65,10 +66,10 @@ desc: Learn how to export objects in Penpot, the free, open-source design collab
 
 <h2 id="export-technical">Technical notes about exports</h2>
 <p class="advice">
-  Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.), but cannot guarantee that 100% of SVG features will be converted perfectly to PDF. You may see differences between an object displayed inside Penpot and in the exported file. If you need an exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.<br /><br />
+  Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.), but cannot guarantee that 100% of SVG features will be converted perfectly to PDF. You may see differences between a layer displayed inside Penpot and in the exported file. If you need an exact match, a workaround is to export the layer into PNG and convert it to PDF with some of the many tools that exist for it.<br /><br />
 </p>
 <p class="advice">
   <a name="pdf-note"></a>
   <strong>Currently known issue:</strong>
-  When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not Penpot's fault, but <a href="https://gitlab.freedesktop.org/poppler/poppler/-/issues/1210" target="_blank">a bug in poppler</a>, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular, or in a browser like Chrome or Firefox, you can see it properly.
+  When exporting layers with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not Penpot's fault, but <a href="https://gitlab.freedesktop.org/poppler/poppler/-/issues/1210" target="_blank">a bug in poppler</a>, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular, or in a browser like Chrome or Firefox, you can see it properly.
 </p>

docs/user-guide/export-import/index.njk

@@ -0,0 +1,22 @@
+---
+title: Export & Import
+order: 7
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1 id="export-import">Export & Import</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/export-import/export-import-files/">
+      <h2>Export/Import Penpot files →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/export-import/exporting-layers/">
+      <h2>Exporting layers →</h2>
+      <p>Exporting layers</p>
+    </a>
+  </li>
+</ul>

docs/user-guide/first-steps/cloud-selfhost.njk

@@ -1,9 +1,10 @@
 ---
-title: Quickstart
+title: Cloud or Self-host
+order: 1
 desc: Start instantly with Penpot, the open-source design and prototyping platform! Access our free user guide to learn now.
 ---
 
-<h1 id="section-1-1">Quickstart</h1>
+<h1 id="section-1-1">Cloud or Self-host</h1>
 
 <p class="main-paragraph">You can start using Penpot right in your browser or installing it in a server of your own.</p>
 

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

@@ -0,0 +1,34 @@
+---
+title: First Steps
+order: 1
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1 id="section-1">First Steps</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/first-steps/cloud-selfhost">
+      <h2>Cloud or Selfhost →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/first-steps/the-interface">
+      <h2>Interface tour →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/first-steps/shortcuts">
+      <h2>Shortcuts →</h2>
+      <p>Speed your design workflow</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/first-steps/info">
+      <h2>Tutorials & info →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

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

@@ -1,5 +1,6 @@
 ---
 title: Tutorials & info
+order: 5
 desc: Begin with Penpot's comprehensive user guide! Get tutorials, learn interface basics, and master design features. Discover FAQs and more.
 ---
 
@@ -7,16 +8,16 @@ desc: Begin with Penpot's comprehensive user guide! Get tutorials, learn interfa
 
 <p class="main-paragraph">Some useful links to better understand Penpot through answers and tutorials.</p>
 
-<h2 id="dev-diaries">Dev Diaries</h2>
+<h2>Dev Diaries</h2>
 <p>The Dev Diaries are our release notes, where we jot down every new feature, enhancement and fix included in every release. There are also kudos to community contributors <3</p>
 
 <p>Wanna know what's new? take a look at our <a href="https://penpot.app/dev-diaries" target="_blank">Dev Diaries</a>.</p>
 
-<h2 id="video-tutorials">Video tutorials</h2>
+<h2>Video tutorials</h2>
 <p>Suscribe to the <a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank">Penpot Youtube channel</a> to get updates when we upload new Penpot tutorials, demos of features and talks.</p>
 
-<h2 id="faqs">Frequently asked questions</h2>
+<h2>Frequently asked questions</h2>
 <p>If you have questions about the "Whys" or the "Hows" of Penpot we have collected and answered a bunch of the most common questions that we've been asked so far at our <a href="https://community.penpot.app/c/faq/17">Frequently Asked Questions</a>.</p>
 
-<h2 id="faqs">Community space</h2>
+<h2>Community space</h2>
 <p>We launched a community space to allow for everyone to be part of the conversation. <a href="https://community.penpot.app/" target="_blank">Join the community here</a>.</p>

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

@@ -1,5 +1,6 @@
 ---
 title: Shortcuts
+order: 3
 desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface basics and more with this free, open-source design tool.
 ---
 
@@ -12,7 +13,7 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
 <p>You can also check the most updated list of shortcuts at the <a href="https://github.com/penpot/penpot/blob/develop/frontend/src/app/main/data/workspace/shortcuts.cljs" target="_blank">GitHub file</a>.</p>
 
 <h2 id="workspace-section"> Workspace </h2>
-<p>The Workspace is where the designs are actually created. <a href="/user-guide/the-interface/#interface-workspace">More about the Workspace</a>.</p>
+<p>The Workspace is where the designs are actually created. <a href="/user-guide/first-steps/the-interface/#interface-workspace">More about the Workspace</a>.</p>
 <h3 id="alignment">Item Alignment</h3>
 <table cellspacing="0" cellpadding="1" border="1" width="100%">
   <thead>
@@ -750,7 +751,7 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
 </table>
 
 <h2 id="dashboard-section"> Dashboard </h2>
-<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams. <a href="/user-guide/the-interface/#interface-dashboard">More about the Dashboard</a>.</p>
+<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams. <a href="/user-guide/first-steps/the-interface/#interface-dashboard">More about the Dashboard</a>.</p>
 
 <h3 id="generic-dashboard">Generic</h3>
 <table cellspacing="0" cellpadding="1" border="1" width="100%">
@@ -809,7 +810,7 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
 </table>
 
 <h2 id="viewer-section"> View mode </h2>
-<p>The View mode is the area to present and share designs and play the prototype interactions. <a href="/user-guide/the-interface/#interface-viewmode">More about the View mode</a>.</p>
+<p>The View mode is the area to present and share designs and play the prototype interactions. <a href="/user-guide/first-steps/the-interface/#interface-viewmode">More about the View mode</a>.</p>
 
 <h3 id="generic-viewer">Generic</h3>
 <table cellspacing="0" cellpadding="1" border="1" width="100%">

docs/user-guide/first-steps/the-interface.njk

@@ -1,9 +1,10 @@
 ---
-title: 02· The interface
+title: Interface tour
+order: 2
 desc: Discover Penpot's free user guide! Learn the interface, workspace basics, flexible layouts, and prototyping. Master Penpot today.
 ---
 
-<h1 id="the-interface">The interface</h1>
+<h1 id="the-interface">Interface tour</h1>
 <p class="main-paragraph">The Penpot interface has three main areas: Dashboard, Workspace and View mode. Lets take a look at their composition and main features.</p>
 
 <h2 id="interface-workspace">Workspace</h2>
@@ -40,29 +41,29 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
 
 <ol>
   <li><strong>Viewport:</strong> An infinite canvas where you can design without limits.</li>
-  <li><strong>Toolbar:</strong> This is where you’ll find all the tools to quickly and easily create different types of objects: board, rectangle, ellipse, text, graphic, path, and free drawing. <a href="/user-guide/objects/">Learn more about objects.</a></li>
+  <li><strong>Toolbar: </strong> This is where you’ll find all the tools to quickly and easily create different types of layers: board, rectangle, ellipse, text, graphic, path, and free drawing.  <a href="/user-guide/designing/layers/">Learn more about layers.</a></li>
   <li><strong>Main menu:</strong> From the main menu, you can customize your workspace. Manage the visibility of grids, rulers, and panels. Enable or disable snapping and dynamic alignment. Add or remove the file as a Shared Library. You’ll also find help resources here.</li>
   <li><strong>Pages:</strong> A file can contain as many pages as you need. Each page has its own viewport (the almost infinite area where you design) and its own layers. You can create, delete, or reorder pages as needed.</li>
-  <li><strong>Layers:</strong> Layers are the different objects you can place in the design viewport. <a href="/user-guide/layer-basics/">Learn more about layers.</a></li>
+  <li><strong>Layers:</strong> Layers are the different objects you can place in the design viewport. <a href="/user-guide/designing/workspace-basics/#layer-basics">More about Layers panel.</a></li>
   <li><strong>Rulers:</strong> Rulers provide coordinates to help you design. You can also drag guides from them.</li>
-  <li><strong>Color palette:</strong> The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. <a href="/user-guide/styling/#color-palette">Learn more about the color palette.</a></li>
+  <li><strong>Color palette:</strong> The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. <a href="/user-guide/designing/color-stroke/#color-palette">Learn more about the color palette.</a>.</li>
   <li><strong>Typography palette:</strong> The typography palette keeps text styles always at hand. Use the menu to switch between libraries.</li>
-  <li><strong>Design properties:</strong> The Design Properties sidebar lets you view and edit the attributes of a selected layer. The list changes depending on the element type: some properties are always present (size, position), while others are optional (stroke, shadow, blur…). <a href="/user-guide/styling/">Learn more about styling.</a></li>
+  <li><strong>Design properties:</strong> The Design Properties sidebar lets you view and edit the attributes of a selected layer. The list changes depending on the element type: some properties are always present (size, position), while others are optional (stroke, shadow, blur…). <a href="/user-guide/designing/layers/#layer-actions">Learn more about styling.</a></li>
-  <li><strong>Prototype mode:</strong> Penpot lets you prototype interactions by connecting boards. Activate prototype mode from the right sidebar, then select an element and drag a connection to another board. You can preview the interactive prototype in View Mode (access it by clicking the play button in the top-right corner). <a href="/user-guide/prototyping/">Learn more about prototyping.</a></li>
+  <li><strong>Prototype mode:</strong> Penpot lets you prototype interactions by connecting boards. Activate prototype mode from the right sidebar, then select an element and drag a connection to another board. You can preview the interactive prototype in View Mode (access it by clicking the play button in the top-right corner). <a href="/user-guide/prototyping-testing/prototyping/">Leran more about prototyping.</a></li>
-  <li><strong>Inspect mode:</strong> Use Inspect Mode to get measurements, properties, and production-ready code from your designs. It also provides a safer, view-only mode with additional improvements. <a href="/user-guide/inspect/">Learn more about inspecting designs.</a></li>
+  <li><strong>Inspect mode:</strong> Use Inspect Mode to get measurements, properties, and production-ready code from your designs. It also provides a safer, view-only mode with additional improvements. <a href="/user-guide/dev-tools/#inspect-design">Learn more about inspecting designs.</a></li>
-  <li><strong>View mode:</strong> The View Mode button launches a presentation of your boards. Explore more features in the <a href="/user-guide/view-mode/#viewmode-features">View Mode guide.</a></li>
+ <li><strong>View mode:</strong> The View Mode button launches a presentation of your boards. Explore more features in the <a href="/user-guide/prototyping-testing/testing-view-mode/">View Mode guide.</a> </li>
  <li><strong>Share / Invite:</strong> Invite team members to give them access to this file and all team files.</li>
-  <li><strong>History:</strong> The History panel records recent changes in an open file. Use undo/redo to step through changes, and expand each entry for detailed information. <a href="/user-guide/workspace-basics/#history">Learn more about the history panel.</a></li>
+  <li><strong>History:</strong> The history panel keeps track of the latest changes on an opened file. You can undo/redo to walk the changes and expand each one of them to get detailed information. <a href="/user-guide/designing/workspace-basics/#history">Learn more about the history panel.</a></li>
-  <li><strong>Comments:</strong> Switch to Comments Mode to view all comments on the file and add new ones.</li>
+  <li><strong>Comments:</strong> Switch to Comments Mode to view all comments on the file and add new ones. <a href="/user-guide/designing/workspace-basics/#comments">Learn more about workspace comments.</a></li>
-  <li><strong>Zoom:</strong> Options to zoom in, zoom out, or fit the canvas.</li>
+  <li><strong>Zoom:</strong> Options to zoom in, zoom out, or fit the canvas. <a href="/user-guide/designing/workspace-basics/#zoom">Learn more about zoom.</a></li>
   <li><strong>Users:</strong> See how many users currently have the file open.</li>
-  <li><strong>Assets:</strong> Each file includes a default File Library where you can store reusable elements and styles, such as components, colors, and text styles. From this panel, you'll be also able to include and use shared libraries.</li>
+  <li><strong>Assets:</strong> Each file includes a default File Library where you can store reusable elements and styles, such as components, colors, and text styles. From this panel, you'll be also able to include and use shared libraries. <a href="/user-guide/design-systems/assets/">Learn more about assets.</a></li>
-  <li><strong>Design tokens:</strong> Design tokens are the building blocks of UI elements, expressed in a format usable across design, tools, and code. They include colors, typography, spacing, shadows, and more.</li>
+  <li><strong>Design tokens:</strong> Design tokens are the building blocks of UI elements, expressed in a format usable across design, tools, and code. They include colors, typography, spacing, shadows, and more.  <a href="/user-guide/design-systems/design-tokens/">Learn more about Design Tokens.</a></li>
   <li><strong>File status:</strong> Displays the file’s saving state, showing whether your latest changes are saved or if there’s a problem.</li>
 </ol>
 
 <h2 id="interface-viewmode">View mode</h2>
-<p>Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode.</a></p>
+<p>Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. <a href="/user-guide/prototyping-testing/testing-view-mode/">More about the View mode.</a></p>
 
 <figure>
   <a href="/img/interface/viewmode-dark.webp" target="_blank">
@@ -91,8 +92,8 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
   <li><strong>Boards selector:</strong> Boards selector displays a list of the boards with thumbnails that provide a graphic overview of the file.</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 Boards and allows users to reply or add new ones.</li>
-  <li><strong>Inspect mode:</strong> At the Inspect mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for CSS styles, HTML and SVG. <a href="/user-guide/view-mode/#viewmode-inspect">More about Inspect.</a></li>
+  <li><strong>Inspect mode:</strong> At the Inspect mode you can get design specifications such as layer properties, measurements and distances. You can also get code snippets for CSS styles, HTML and SVG. <a href="/user-guide/dev-tools/#inspect-design">More about Inspect.</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>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all. <a href="/user-guide/prototyping-testing/testing-view-mode/#viewmode-features">More about interaction settings.</a></li>
   <li><strong>Zoom:</strong> Zoom options and info about their shortcuts.</li>
   <li><strong>Edit file:</strong> Opens file edition at the design workspace.</li>
   <li><strong>Fullscreen mode:</strong> Activate or deactivate browser fullscreen mode.</li>
@@ -126,82 +127,18 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
 </p>
 
 <ol>
-  <li><strong>Teams:</strong> A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. <a href="/user-guide/teams/#teams-management">Create or join as many teams as you need</a> with different groups of people.</li>
+  <li><strong>Teams:</strong> A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. <a href="/user-guide/account-teams/teams/#teams-management">Create or join as many teams as you need</a> with different groups of people.</li>
   <li><strong>Search:</strong> If you are looking for a specific file just type its title at the search box.</li>
   <li><strong>Projects:</strong> A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.</li>
   <li><strong>Drafts:</strong> The drafts section is where you can find the design files that are not inside any project.</li>
   <li><strong>Shared Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
   <li><strong>Custom fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
   <li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.</li>
-  <li><strong>User area:</strong> This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)</li>
+  <li><strong>User area:</strong> This must be you! Access your <a href="/user-guide/account-teams/your-account"> profile settings</a>, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :). </li>
   <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.</li>
   <li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
   <li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).</li>
   <li><strong>Libraries & Templates module:</strong> A curated selection of Libraries & Templates files ready to import.</li>
 </ol>
 
-<h3 id="your-account">Your account</h3>
-<p>Your account settings can be changed at the user area, in <b>Your account</b>. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.</p>
 
-<h4 id="your-account-profile">Profile
-  <a class="direct-link" href="#your-account-profile">#</a>
-</h3>
-<p>If you want to change the email address associated to your account or remove your account entirely, this can be done in the <b>Profile</b> section.</p>
-<figure>
-  <img src="/img/interface/youraccount-profile.webp" alt="Penpot's profile" />
-</figure>
-
-<h4 id="your-account-password">Password
-  <a class="direct-link" href="#your-account-password">#</a>
-</h3>
-<p>If you want to change your password to a new one, this can be done in the <b>Password</b> section.</p>
-<figure>
-  <img src="/img/interface/youraccount-password.webp" alt="Penpot's password" />
-</figure>
-
-<h4 id="your-account-notifications">Notifications
-  <a class="direct-link" href="#your-account-notifications">#</a>
-</h3>
-<p>At the <strong>Notifications</strong> section you can configure the email and dashboard notifications.</p>
-<figure>
-  <img src="/img/interface/youraccount-notifications.webp" alt="Penpot's notifications" />
-</figure>
-
-<h4 id="your-account-settings">Settings
-  <a class="direct-link" href="#your-account-settings">#</a>
-</h3>
-<p>At the <strong>Settings</strong> section you can change the language and the UI color theme.</p>
-<figure>
-  <img src="/img/interface/youraccount-settings.webp" alt="Penpot's settings" />
-</figure>
-
-<h4 id="your-account-accesstokens">Access tokens
-  <a class="direct-link" href="#your-account-accesstokens">#</a>
-</h3>
-<p>At the <strong>Asset tokens</strong> section you can manage your access tokens. <a href="https://help.penpot.app/technical-guide/integration/#access-tokens" target="_blank">Read more about access tokens here</a>.</p>
-
-<h2 id="interface-ui-theme">UI Theme</h2>
-<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
-<ul>
-  <li>From "Your account" > "Settings".</li>
-  <li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
-</ul>
-
-<figure>
-  <a href="/img/interface/dashboard-light.webp" target="_blank">
-    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
-  </a>
-  <figcaption>Penpot's dashboard in light mode</figcaption>
-</figure>
-<figure>
-  <a href="/img/interface/workspace-light.webp" target="_blank">
-    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
-  </a>
-  <figcaption>Penpot's workspace in light mode</figcaption>
-</figure>
-<figure>
-  <a href="/img/interface/viewmode-light.webp" target="_blank">
-    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
-  </a>
-  <figcaption>Penpot's view mode in light mode</figcaption>
-</figure>

docs/user-guide/index.njk

@@ -16,17 +16,55 @@ eleventyNavigation:
 
 <p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, see something is missing or find anything that needs correcting, please write to us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a>.</p>
 
+<p class="main-paragraph">Explore our featured topics:</p>
+
 <ul class="intro-sections">
   <li>
-    <a href="/user-guide/introduction/quickstart">
+    <a href="/user-guide/designing/layers/">
-      <h2>Quickstart</h2>
+      <h2>Layers</h2>
       <p>Ways to start with Penpot</p>
     </a>
   </li>
   <li>
-    <a href="/user-guide/the-interface/">
+    <a href="/user-guide/designing/flexible-layouts/">
-      <h2>The interface</h2>
+      <h2>Flexible layouts</h2>
+      <p>Create designs that adapt automatically.</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/design-systems/components/">
+      <h2>Components</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+  <li>
+    <a href="/user-guide/design-systems/variants/">
+      <h2>Variants</h2>
       <p>Penpot's main areas and features</p>
     </a>
   </li>
+    <li>
+    <a href="/user-guide/design-systems/design-tokens/">
+      <h2>Design Tokens</h2>
+      <p>Penpot's main areas and features</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/dev-tools/#inspect-design">
+      <h2>Inspect design</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+      <li>
+    <a href="/user-guide/prototyping-testing/prototyping/">
+      <h2>Prototyping</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+      <li>
+    <a href="/user-guide/design-systems/libraries/">
+      <h2>Libraries</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
 </ul>

docs/user-guide/introduction/index.njk

@@ -1,27 +0,0 @@
----
-title: 01· Introduction
-desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
----
-
-<h1 id="section-1">Introduction</h1>
-
-<ul class="intro-sections">
-  <li>
-    <a href="/user-guide/introduction/quickstart">
-      <h2>Quickstart →</h2>
-      <p>Ways to start with Penpot</p>
-    </a>
-  </li>
-  <li>
-    <a href="/user-guide/introduction/shortcuts">
-      <h2>Shortcuts →</h2>
-      <p>Speed your design workflow</p>
-    </a>
-  </li>
-  <li>
-    <a href="/user-guide/introduction/info">
-      <h2>Info & tutorials →</h2>
-      <p>Info of interest about Penpot</p>
-    </a>
-  </li>
-</ul>

docs/user-guide/layer-basics/index.njk

@@ -1,311 +0,0 @@
----
-title: 04· Layer basics
-desc: Master layer basics with Penpot's user guide! Learn to create, manipulate, and organize layers for stunning designs. Try Penpot, it's free!
----
-
-<h1 id="layer-basics">Layer basics</h1>
-<p class="main-paragraph">Every object you create in Penpot’s <a href="/user-guide/workspace-basics/#viewport">viewport</a> is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.</p>
-
-<h2 id="pages">Pages</h2>
-<p>Pages allow you to organize layers into separate sections inside a file, and are shown in separate tabs. Subdividing a file into pages gives you the ability to split your file into logically different sections so that you can organise your work. For instance, you can use pages to separate stages of the design process but keep them in the same document. Different screen sizes, features or atomic design categories are other common ways to use pages. </p>
-
-<p>You can add, remove or rename pages to suit your needs.</p>
-<figure>
-  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.webp" height="auto">
-    <source src="/img/layers/pages-create.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="layers-panel">Layers panel</h2>
-<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>
-  <video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.webp" height="auto">
-    <source src="/img/layers/layers-panel.mp4" type="video/mp4">
-  </video>
-</figure>
-<h3>Navigate layers using the keyboard</h3>
-<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>
-</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>
-
-<h2 id="hide-lock">Hide and lock layers</h2>
-
-<h3>Hide and show layers</h3>
-<p>You can control the visibility of any layer by clicking the eye icon next to it in the Layers panel. When a layer is hidden, it will not appear on the canvas, but you can still select it in the Layers panel, move its order, or modify its properties. The eye icon always indicates whether a layer is visible or hidden, making it easy to manage complex designs.</p>
-
-<h3>Lock and unlock layers</h3>
-<p>Locking a layer helps prevent accidental changes or movement on the canvas. When a layer is locked, it cannot be moved or edited directly in the canvas area. However, you can still select a locked layer in the Layers panel and adjust its properties, such as color, effects, or name. The lock icon next to the layer’s name shows its locked status, helping you keep your design organized and protected.</p>
-
-<figure>
-  <video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.webp" height="auto">
-    <source src="/img/layers/layers-hide-lock.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="creating-layers">Create layers</h2>
-<p>To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
-<p>Hold <kbd>Shift/⇧</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
-<figure>
-  <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.webp" height="auto">
-    <source src="/img/layers/layers-create.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="duplicating-layers">Duplicate layers</h2>
-<p>There are several ways to duplicate a layer:</p>
-<ol>
-  <li>You can press <kbd>Ctrl/⌘</kbd> + <kbd>D</kbd> to duplicate a layer right over a selected layer. </li>
-  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu. </li>
-  <li>You can also select a layer and drag while pressing <kbd>Alt/⌥</kbd> so you can simultaneously duplicate and drag the new layer.</li>
-</ol>
-<figure>
-  <video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.webp" height="auto">
-    <source src="/img/layers/layers-duplicate.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="delete-layers">Delete layers</h2>
-<p>There are a couple ways to delete a layer. </p>
-<ol>
-  <li>You can press <kbd>Supr/⌫</kbd> to delete a selected layer. </li>
-  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.</li>
-</ol>
-
-<h2 id="select-layers">Select layers</h2>
-<p>The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar. </p>
-<p>To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing <kbd>Shift/⇧</kbd>. If you hold <kbd>Shift/⇧</kbd> and click you can deselect layers individually.</p>
-<figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.webp" height="auto">
-    <source src="/img/layers/layers-select.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3>Selecting layers at the layers panel</h3>
-<ol>
-  <li>Click a layer to do a single selection.</li>
-  <li>Press <kbd>Ctrl/⌘</kbd> while clicking two or more layers to do a multiple selection.</li>
-  <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>
-<figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.webp" height="auto">
-    <source src="/img/layers/layers-multiselect.mp4" type="video/mp4">
-  </video>
-</figure>
-<h3>Select layers ignoring groups (deep selection)</h3>
-<p>If you want to select an element that is difficult to reach because it 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>
-<figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.webp" height="auto">
-    <source src="/img/layers/layers-deepselect.mp4" type="video/mp4">
-  </video>
-</figure>
-<h3>Select layers inside groups</h3>
-<p>To <strong>select a layer inside a group</strong> you do double click. First click selects the group, second click selects a layer.</p>
-
-<h3>Select layer menu</h3>
-<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>
-
-<h2 id="group-layers">Group layers</h2>
-<p>Grouped layers can be moved, transformed or styled at the same time. </p>
-<ul>
-  <li><strong>Group:</strong> To group two or more layers, 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.</li>
-  <li><strong>Ungroup:</strong> Press <kbd>Shift/⇧</kbd> + <kbd>G</kbd> or use the option at the layers menu that you can open with right click over the selected group.</li>
-</ul>
-<figure>
-  <video title="Group layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-group.webp" height="auto">
-    <source src="/img/layers/layers-group.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="mask-layers">Mask layers</h2>
-<p>A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape. </p>
-<ul>
-  <li><strong>Mask layers:</strong> Select more than one layer or a group of them. Then you can apply the masking using the option at the layers menu or by pressing <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd>. The shape that is at the lowest level at the layer list will be used as a mask. </li>
-  <li><strong>Unmask layers:</strong> Select a mask and then press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</li>
-</ul>
-<figure>
-  <video title="Mask layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-mask.webp" height="auto">
-    <source src="/img/layers/layers-mask.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="move-layers">Move layers</h2>
-<p>To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the board.</p>
-<figure>
-  <video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.webp" height="auto">
-    <source src="/img/layers/layers-move.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="resize-layers">Resize layers</h2>
-<p>To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode. You can also use the design panel where you can link width and height.</p>
-<ul>
-  <li>Hold <kbd>Shift/⇧</kbd> while resizing the object to preserve its aspect ratio.</li>
-  <li>Hold <kbd>Alt/⌥</kbd> while resizing the object to do it from the center and resize simultaneously two opposite sides.</li>
-</ul>
-<figure>
-  <video title="Resize layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-resize.webp" height="auto">
-    <source src="/img/layers/layers-resize.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="rotate-layers">Rotate layers</h2>
-<p>To rotate selected layers you can use the handles at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold <kbd>Ctrl/⌘</kbd> while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.</p>
-<figure>
-  <video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.webp" height="auto">
-    <source src="/img/layers/layers-rotate.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="flip-layers">Flip layers</h2>
-<p>You can find the options to flip layers in their contextual menu (select the layer and right click). You also have shortcuts to do this:</p>
-<ul>
-  <li><strong>Flip layers horizontally:</strong> Select the layer and press <kbd>Shift/⇧</kbd> + <kbd>H</kbd></li>
-  <li><strong>Flip layers vertically:</strong> Select the layer and then press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>.</li>
-</ul>
-<figure>
-  <video title="Flip layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-flip.webp" height="auto">
-    <source src="/img/layers/layers-flip.mp4" type="video/mp4">
-  </video>
-</figure>
-
-
-<h2 id="scale-elements">Scale elements, texts and properties</h2>
-<p>Activate the scale tool by pressing <kbd>K</kbd> or from the main file menu to scale elements while maintaining their visual aspect. Once it is activated you can resize texts, layers and groups and preserve their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners.
-<figure>
-  <video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.webp" height="auto">
-    <source src="/img/layers/layers-scale.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="aling-distribute-layers">Align and distribute layers</h2>
-<p>Aligning and distributing layers can be found at the top of the Design panel. </p>
-<h3>Align layers</h3>
-<p>Aligning will move all the selected layers to a position relative to one of them. For instance, aligning top will align the elements with the edge of the top-most element.</p>
-<figure>
-  <video title="Align layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-align.webp" height="auto">
-    <source src="/img/layers/layers-align.mp4" type="video/mp4">
-  </video>
-</figure>
-<h3>Distribute layers</h3>
-<p>Distributing objects to position them vertically and horizontally with equal distances between them.</p>
-<figure>
-  <video title="Distribute layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-distribute.webp" height="auto">
-    <source src="/img/layers/layers-distribute.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="layers-search">Search and filter layers</h2>
-<p>Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).</p>
-<figure>
-  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.webp" height="auto">
-    <source src="/img/layers/layers-search.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="scale-elements">Copy CSS properties</h2>
-<p>To copy CSS properties from layers:</p>
-<ol>
-  <li>Select one or more layers.</li>
-  <li>Right click to show the layer menu.</li>
-  <li>Press <strong>Copy/Paste as... > Copy as CSS</strong> in case you only want to get the CSS properties from the selected layer/s.</li>
-  <li>Press <strong>Copy/Paste as... > Copy as CSS (nested layers)</strong> in case you only want to get the CSS properties from the selected layer/s and all the contained layers.</li>
-</ol>
-<figure>
-  <img alt="Copy CSS properties" src="/img/layers/copy-css.webp"/>
-</figure>
-
-<h2 id="collapse-groups">Collapse groups and boards</h2>
-<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>
-<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="boolean-operators">Boolean operators</h2>
-<p>It is possible to combine shapes in a group in different ways to create more complex objects by using
-"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available for more editing. There are five boolean operations available: union, difference, intersection, exclusion and flatten. Using boolean operations allows many graphic options and possibilities for your designs.</p>
-<figure>
-  <video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.webp" height="auto">
-    <source src="/img/layers/layers-boolean.mp4" type="video/mp4">
-  </video>
-</figure>
-<ul>
-  <li><strong>Union:</strong> the resulting combination is the sum of the shapes.</li>
-  <li><strong>Difference:</strong> the opposite of union, the resulting object has the area of the shape on top has been cut out from the shape at the bottom.</li>
-  <li><strong>Intersection:</strong> creates a group whose shape is the overlapping area between the shapes.</li>
-  <li><strong>Exclusion:</strong> the opposite of intersection, the resulting shape is the area that does not overlap between the shapes.</li>
-  <li><strong>Flatten:</strong> Tecnically not a boolean operator, this is the way to permanently combine the paths of a group of shapes in a single one.</li>
-</ul>
-
-
-<h2 id="constraints">Resizing constraints</h2>
-<p>Constraints allow you to decide how layers will behave when resizing its container.</p>
-
-<h3>Apply constraints</h3>
-<p>Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.</p>
-<p>To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.</p>
-<figure>
-  <video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.webp" height="auto">
-    <source src="/img/layers/layers-constraints.mp4" type="video/mp4">
-  </video>
-</figure>
-<p>Constraints are set to “Scale” by default, but you have other options.</p>
-
-<h3>Horizontal constraints</h3>
-<ul>
-  <li><strong>Left</strong>: The object maintains its size and position relative to the left side of its parent container.</li>
-  <li><strong>Right</strong>: The object maintains its size and position relative to the right side of its parent container.</li>
-  <li><strong>Left & right</strong>: The object resizes while maintaining its distance to both horizontal sides of its parent container.</li>
-  <li><strong>Center</strong>: The object maintains its size and position relative to the horizontal center of its parent container.</li>
-  <li><strong>Scale</strong>: The object will horizontally resize proportionally to its parent container size.</li>
-</ul>
-<figure>
-  <img src="/img/layers/layers-constraints-h.webp" alt="Horizontal constraints">
-</figure>
-
-<h3>Vertical constraints</h3>
-<ul>
-  <li><strong>Top</strong>: The object maintains its size and position relative to the top side of its parent container.</li>
-  <li><strong>Bottom</strong>: The object maintains its size and position relative to the bottom side of its parent container.</li>
-  <li><strong>Top & bottom</strong>: The object resizes while maintaining its distance to both vertical sides of its parent container.</li>
-  <li><strong>Center</strong>: The object maintains its size and position relative to the vertical center of its parent container.</li>
-  <li><strong>Scale</strong>: The object will vertically resize proportionally to its parent container size.</li>
-</ul>
-<figure>
-  <img src="/img/layers/layers-constraints-v.webp" alt="Vettical constraints">
-</figure>
-
-
-<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>
-<ol> 
-  <li>Select one or more elements.</li>
-  <li>Right click on the selection to show the menu and select the option “Focus on” or press <kbd>F</kbd>.</li>
-</ol>
-<p>Notice that the layer panel will now only show the focused layers. A focus mode status line will also appear at the top.</p>
-<p>To exit focus mode and return to the original viewport and selection, right click anywhere and select “Focus off” or just press <kbd>F</kbd> again. You can also click anywhere on the focus mode status line at the top of the layer panel.
-</p>
-<figure>
-  <video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
-    <source src="/img/layers/layers-focus.mp4" type="video/mp4">
-  </video>
-</figure>
-
-
-<h2 id="rtl-support">RTL support</h2>
-<p>Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.</p>
-<p>If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.</p>
-<figure>
-  <img src="/img/layers/layers-rtl.webp" alt="RTL support">
-</figure>

docs/user-guide/objects/index.njk

@@ -1,236 +0,0 @@
----
-title: 05· Objects
-desc: "Work with Penpot's objects: boards, shapes, text, paths, and graphics. Learn to create, select, rename, and customize boards for optimal workflow."
----
-
-<h1 id="objects">Objects</h1>
-<p class="main-paragraph">Objects are items that you can place in the viewport. Boards, shapes, texts, paths and graphics are objects. The following describes the different objects that you have
-available in Penpot, and how to get the most of them.</p>
-
-<h2 id="Boards">Boards</h2>
-<p>Boards are layers that serve as your high-level containers for content organization and layout. Boards are useful if you want to design for a specific screen or print size. Boards can contain other boards. First level boards
-are shown by default at the <a href="/user-guide/view-mode">View mode</a>, acting as screens of a design or pages of a document. Also, objects inside boards can be clipped. Boards are a powerful element at Penpot, opening up a ton of possibilities when creating and organizing your designs.</p>
-
-<h3>Create boards</h3>
-<p>To create a board, use the board tool at the toolbar or the shortcut <kbd>B</kbd>.</p>
-<figure>
-  <img src="/img/objects/board-tool.webp" alt="Board tool">
-</figure>
-
-<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>Click-and-drag</strong> to draw a frame of approximate size, then immediately edit its width/height values to be precise.</li>
-</ul>
-<figure>
-  <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
-    <source src="/img/objects/board-creation.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<p><strong>TIP:</strong> Create a board around one or more selected objects using the option "Selection to board" at the menu or the shortcut <kbd>Ctrl/⌘</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>.</p>
-
-<h3>Select boards</h3>
-<p>There are two different cases in terms of selecting boards:</p>
-<ul>
-  <li>For first level boards that have at least one inside, click on the board name or <kbd>Ctrl/⌘</kbd> + click on the board area to select it and then drag</li>
-  <li>For the rest (empty first level boards and inside boards) just click to select.</li>
-</ul>
-<figure>
-  <video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.webp" height="auto">
-    <source src="/img/objects/board-select.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3>Rename boards</h3>
-<p>There several ways to rename boards:</p>
-<ul>
-  <li>Double click on the board name at the workspace viewport.</li>
-  <li>Double click on the board name at the layers panel.</li>
-  <li>Press <kbd>Alt/⌥</kbd> + <kbd>N</kbd> to rename the board at the layers panel.</li>
-  <li>Right click to show the menu and select "Rename".</li>
-</ul>
-<figure>
-  <video title="Rename board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-rename.webp" height="auto">
-    <source src="/img/objects/board-rename.webm" type="video/webm">
-  </video>
-</figure>
-
-<h3>Set board as thumbnail</h3>
-<p>Select a specific board to be the file thumbnail that will be shown at <a href="/user-guide/the-interface/#dashboard-interface" target="_blank">the dashboard</a> in the file card.</p>
-<p>To set a custom thumbnail:</p>
-<ol>
-  <li>Select a board.</li>
-  <li>Right click to show the menu and select "Set as thumbnail" or press <kbd>Shift</kbd> <kbd>T</kbd>.</li>
-</ol>
-<figure>
-  <video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.webp" height="auto">
-    <source src="/img/objects/board-thumbnail.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3>Copy link to board</h3>
-<p>You can get the link to each individual board, making it easy to share them with team members or include direct links in documentation.</p>
-<figure>
-  <img src="/img/objects/board-copy-link.webp" alt="copy link to board">
-</figure>
-<p>There are two ways to copy a direct link to a board:</p>
-<ul>
-  <li>Using the menu: Select the board, right click and select the "Copy link" option.</li>
-  <li>Using the shortcut: Select the board and press <kbd>Shift/⇧</kbd> + <kbd>Alt/⌥</kbd> + <kbd>C</kbd>.</li>
-</ul>
-
-<h3>Clip content</h3>
-<p>Boards offer the option to clip its content (or not).</p>
-<figure>
-  <video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.webp" height="auto">
-    <source src="/img/objects/board-clip.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3>Show in View mode</h3>
-<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p>
-<p><strong>Defaults</strong></p>
-<p>As it is very likely that the first level boards will be used as a screen and the interiors will not, there are different defaults for newly created boards.</p>
-<ul>
-  <li>Boards created at first level (<a href="/user-guide/workspace-basics/#viewport">the viewport</a>): shown by default.</li>
-  <li>Boards created inside other boards: not shown by default.</li>
-</ul>
-<figure>
-  <img src="/img/objects/board-show.webp" alt="board show in view mode">
-</figure>
-
-<h3>Show fill in exports</h3>
-<p> Sometimes you don’t need the artboards to be part of your designs, but only their support to work on them.
-Penpot allows you to decide if the fill of an artboard will be shown in exports, you just have to check/uncheck the "Show in exports" option which is below the fill setting.</p>
-<figure>
-  <img src="/img/objects/board-fill.webp" alt="show board fill in exports">
-</figure>
-
-<h3>Resize board to fit to content</h3>
-<p>You can adjust the board size to fit its content by clicking the icon in the design sidebar.</p>
-<figure>
-  <img src="/img/objects/board-fit.webp" alt="Resize board to fit to content button">
-</figure>
-
-<h3>Board guides</h3>
-<p>You can set guides on boards that will assist with aligning objects.</p>
-<p>Read more about <a href="/user-guide/workspace-basics/#guides">guides</a>.</p>
-<figure>
-  <img src="/img/objects/board-guides.webp" alt="board guides">
-</figure>
-
-<h3>Prototyping boards</h3>
-<p>You can connect boards with other boards to create rich interactions.</p>
-<p>Read more about <a href="/user-guide/prototyping/">prototyping</a>.</p>
-<figure>
-  <img src="/img/objects/board-prototyping.webp" alt="prototyping with boards">
-</figure>
-
-<h2 id="rectangles-ellipses">Rectangles and ellipses</h2>
-<p>Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting
-a design.</p>
-<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
-<p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/layer-basics/">Layer basics</a>.</p>
-<figure>
-  <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
-    <source src="/img/objects/rectangles-ellipses.mp4" type="video/mp4">
-  </video>
-</figure>
-
-
-<h2 id="text">Text</h2>
-<p>To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have two ways to create a text layer:</p>
-<ol>
-  <li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
-  <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
-</ol>
-<figure>
-  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
-    <source src="/img/objects/text-create.mp4" type="video/mp4">
-  </video>
-</figure>
-<p><strong>Tips for resizing</strong></p>
-<ul>
-  <li>Double-click on the right side of the bounding box to set the resize setting to auto-width.</li>
-  <li>Double-click on the bottom side of the bounding box to set the resize setting to auto-height.</li>
-</ul>
-<h3>Edit and style text content</h3>
-<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
-<figure>
-  <img src="/img/objects/text-edit.webp" alt="editing text">
-</figure>
-<h3>Text options</h3>
-<figure>
-  <img src="/img/objects/text-options.webp" alt="text options">
-</figure>
-<ol>
-  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/custom-fonts">install your own fonts</a>.</li>
-  <li><strong>Font size.</strong></li>
-  <li><strong>Font type.</strong></li>
-  <li><strong>Line height</strong> (in pixels).</li>
-  <li><strong>Letter spacing</strong> (in pixels).</li>
-  <li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
-  <li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
-  <li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
-  <li><strong>Vertical alignment:</strong> top, center, bottom.</li>
-  <li><strong>Decoration:</strong> none, underline, strikethrough.</li>
-  <li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
-</ol>
-
-<h2 id="curves">Curves (freehand)</h2>
-<p>The curve tool allows a path to be created directly in a freehand mode.
-Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Shift/⇧</kbd> + <kbd>c</kbd>.
-<p>The path created will contain a lot of points, but it is edited the same way as any other curve.</p>
-
-<h2 id="paths">Paths (bezier)</h2>
-<p>A path is composed of two or more nodes and the line segments between them, which may also be curved. To draw a new path you have to select the path tool by clicking on the icon at the toolbar or pressing <kbd>P</kbd>. Then you have two ways to create the path:</p>
-<ol>
-  <li><strong>Click</strong> to create a new corner node.</li>
-  <li><strong>Click and drag</strong> to create a curved node.</li>
-</ol>
-<p>To finish the path:</p>
-<ol>
-  <li><strong>Close it</strong> clicking over the starting node.</li>
-  <li><strong>Leave it open</strong> pressing <kbd>Esc</kbd> or <kbd>Enter</kbd> to stop editing. Then press <kbd>Esc</kbd> to exit the edit mode.</li>
-</ol>
-<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
-<figure>
-  <video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.webp" height="auto">
-    <source src="/img/objects/path-create.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h3>Edit nodes</h3>
-<p>To edit a node double click on a path or select and press <kbd>Enter</kbd>.
-You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
-<figure>
-  <video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.webp" height="auto">
-    <source src="/img/objects/nodes-edit.mp4" type="video/mp4">
-  </video>
-</figure><h4>Node types</h4>
-<p>There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow the curvature of a path to be modified.</p>
-<figure>
-  <video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.webp" height="auto">
-    <source src="/img/objects/node-types.mp4" type="video/mp4">
-  </video>
-</figure>
-
-<h2 id="images">Images</h2>
-<h3>Insert images</h3>
-<p>There are several options for inserting an image into a Penpot file:</p>
-<ul>
-  <li>Use the <strong>image tool</strong> at the toolbar or press <kbd>K</kbd> to insert images in your file system.</li>
-  <li><strong>Drag</strong> an image from your computer to the viewport.</li>
-  <li>Copy an image & paste it or drag it right from a <strong>browser</strong>.</li>
-  <li>Drag an image from a Penpot <strong>library</strong>.</li>
-</ul>
-
-<h3>Images aspect ratio</h3>
-<p>Images fill the layer backgrounds by default, so they take up the entire object while maintaining the aspect ratio. This is great for flexible designs because the images can adapt to different sizes.</p>
-<p>However, if you don't want an image to keep its aspect ratio when resizing, you just have to uncheck the option in the image settings.</p>
-<figure>
-  <video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.webp" height="auto">
-    <source src="/img/objects/image-ratio.mp4" type="video/mp4">
-  </video>
-</figure>

docs/user-guide/plugins-integrations/index.njk

@@ -1,21 +1,22 @@
 ---
-title: 18· Plugins
+title: Plugins & Integrations
+order: 6
 desc: Extend Penpot's functionality with plugins! Install from PenpotHub or via URL. Learn to install, use, and create your own plugins.
 ---
 
-<h1 id="penpot-plugins">Penpot Plugins</h1>
+<h1 id="penpot-plugins">Plugins & Integrations</h1>
 
-<h2 id="plugins">Plugins</h2>
+<h2>Plugins</h2>
 <p class="main-paragraph">Plugins are the perfect tool to extend Penpot's functionalities. You can install available plugins or create one that fits your needs!</p>
 
-<h2 id="installation">How to install Plugins</h2>
+<h3 id="installation">How to install Plugins</h3>
-<h3 id="hub-installation">From PenpotHub</h2>
+<h4>From PenpotHub</h4>
 
 <p>You can find available Plugins at the <a href="https://help.penpot.app/plugins/getting-started/#examples">Penpot Hub</a> and install plugins directly from the Plugins page by clicking on <strong>Install</strong> next to the desired plugin.</p>
 
 <img src="/img/plugins/00_PenpotHub_plugins.png" alt="Plugins in the Penpot hub's"></img>
 
-<h3 id="url-installation">With a URL</h3>
+<h4>With a URL</h4>
 <p>Another way to install a plugin is by copying the URL (with .json extension) provided by the plugin’s author and pasting it on to the Plugin Manager.</p>
 
 <img src="/img/plugins/02_install_url.png" alt="Install plugins using url"></img>
@@ -27,7 +28,7 @@ desc: Extend Penpot's functionality with plugins! Install from PenpotHub or via
 
 <p>Once a plugin has been installed you can access it on your files, as long as you have permissions to access it, in any of your teams. If another member of your team wants to use the plugin, they will need to install it individually.</p>
 
-<h2 id="plugin-manager">Plugin Manager</h2>
+<h3 id="plugin-manager">Plugin Manager</h3>
 <p class="main-paragraph">To start using Plugins you first need to open the Plugin Manager. There are a few different ways to access the Plugins Manager in the Worskpace:</p>
 <ul>
   <li>From the toolbar;</li>
@@ -35,16 +36,23 @@ desc: Extend Penpot's functionality with plugins! Install from PenpotHub or via
   <li>Using the shortcut <strong>Ctrl + Alt + P</strong>.</li>
 </ul>
 
-<h3>Toolbar</h3>
+<h4>Toolbar</h4>
 <img src="/img/plugins/03_toolbar_plugins.png" alt="Open plugin manager via toolbar"></img>
 
-<h3>Menu</h3>
+<h4>Menu</h4>
 <img src="/img/plugins/04_menu_plugins.png" alt="Open plugin manager via menu"></img>
 
-<h2 id="using-plugins">Using plugins</h2>
+<h3 id="using-plugins">Using plugins</h3>
 <p>To use a plugin, go to the Plugin Manager, and click on <strong>Open</strong> next to the desired plugin, and that’s it, enjoy!</p>
 
 <img src="/img/plugins/05_plugin_manager.png" alt="Plugin manager modal"></img>
 
-<h2 id="create-plugin">Create a Plugin</h2>
+<h3 id="create-plugin">Create a Plugin</h3>
 <p>You can create your own plugin from scratch or use a Template to get started. You can find the complete guide to creating Plugins at the <a href="https://help.penpot.app/plugins/create-a-plugin/">Technical Guide</a>.</p>
+
+<h2 id="teams-webhooks">Webhooks</h2>
+
+<p>Webhooks allow other websites and apps to be notified when certain events happen on Penpot, ensuring to create integrations with other services. While we are still working on a plugin system, this is a clever and simple way to create integrations with other services.</p>
+<figure><img src="/img/teams/webhooks.webp" alt="Webhooks" /></figure>
+
+<p>You can find detailed info about Penpot webhooks at the <a href="/technical-guide/integration/#webhooks">Technical Guide</a>.</p>

docs/user-guide/prototyping-testing/index.njk

@@ -0,0 +1,22 @@
+---
+title: Prototyping & testing
+order: 4
+desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
+---
+
+<h1 id="section-1">Prototyping & testing</h1>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/user-guide/prototyping-testing/prototyping">
+      <h2>Prototyping →</h2>
+      <p>Ways to start with Penpot</p>
+    </a>
+  </li>
+    <li>
+    <a href="/user-guide/prototyping-testing/testing-view-mode">
+      <h2>Testing: View mode →</h2>
+      <p>Info of interest about Penpot</p>
+    </a>
+  </li>
+</ul>

docs/user-guide/prototyping-testing/prototyping.njk

@@ -1,9 +1,10 @@
 ---
-title: 12· Prototyping
+title: Prototyping
+order: 1
 desc: This Penpot user guide explains how to prototype interactions, connect boards, use triggers/actions, and animations. Learn to build flows and more!
 ---
 
-<h1 id="prototype">Prototyping interactions</h1>
+<h1 id="prototyping">Prototyping</h1>
 <p class="main-paragraph">Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.<p>
 
 <p class="main-paragraph">Penpot allows you to prototype interactions by connecting boards, which can act as screens. Once the prototype is prepared with interactions and/or flows, it can be used at the View mode and shared through a link.<p>
@@ -20,8 +21,8 @@ desc: This Penpot user guide explains how to prototype interactions, connect boa
   <li>Activate <strong>Prototype mode</strong> clicking at the tab at the right sidebar.</li>
   <li><strong>Select</strong> the layer (shape, board or group) that will trigger the interaction.</li>
   <li><strong>Drag</strong> a connection from the selected layer to the destination board.</li>
-  <li>A <strong>flow start</strong> will be automatically created. <a href="/user-guide/prototyping/#prototyping-flows">More about flows</a>.</li>
+  <li>A <strong>flow start</strong> will be automatically created. <a href="/user-guide/prototyping-testing/prototyping/#prototyping-flows">More about flows</a>.</li>
-  <li><strong>Launch</strong> the interactive prototype to see it in action in the <a href="/user-guide/view-mode/">View mode</a> (access by clicking the play button at the top right).</li>
+  <li><strong>Launch</strong> the interactive prototype to see it in action in the <a href="/user-guide/prototyping-testing/testing-view-mode/">View mode</a> (access by clicking the play button at the top right).</li>
 </ol>
 
 <h3 id="prototype-anatomy">Anatomy of a prototype</h3>
@@ -189,14 +190,14 @@ desc: This Penpot user guide explains how to prototype interactions, connect boa
   <img src="/img/prototype/prototype-flows-multiple.webp" alt="Prototyping flows">
 </figure>
 
-<h3 id="prototyping-flows-multiple">Flows at the view mode</h3>
+<h3 id="prototyping-flows-viewmode">Flows at the view mode</h3>
 <p>At the view mode there’s a menu where you can access to all the flows set and easily switch between them.</p>
 <figure>
   <img src="/img/prototype/prototype-flows-viewmode.webp" alt="Prototyping flows">
 </figure>
 
 <h2 id="prototyping-fix-scroll">Fix elements at scroll</h2>
-<p>You can fix the position of an object when scrolling at the presentation view. This is tipically useful for prototyping fixed headers, navbars and floating buttons.</p>
+<p>You can fix the position of a layer when scrolling at the presentation view. This is tipically useful for prototyping fixed headers, navbars and floating buttons.</p>
 <figure>
   <img src="/img/prototype/prototype-fix-scroll.webp" alt="Prototyping fix scroll">
 </figure>

docs/user-guide/prototyping-testing/testing-view-mode.njk

@@ -1,13 +1,14 @@
 ---
-title: 13· View mode
+title: "Testing: View mode"
+order: 2
 desc: Present designs and share prototypes with Penpot's View mode! Play interactions, navigate boards, zoom, and toggle fullscreen. Try it for free!
 ---
 
-<h1 id="viewmode">View mode</h1>
+<h1 id="testing-viewmode">Testing: 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>
+<p class="main-paragraph">At Penpot, the View mode is the best place to test and 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/#interface-viewmode">View mode interface</a>.</p>
+<p>Take a look at the anatomy of the View mode at this section: <a href="/user-guide/first-steps/the-interface/#interface-viewmode">View mode interface</a>.</p>
 <figure>
   <a href="/img/interface/viewmode-dark.webp" target="_blank">
     <img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
@@ -27,7 +28,7 @@ desc: Present designs and share prototypes with Penpot's View mode! Play interac
 <p>You can navigate through boards by pressing the <kbd>→</kbd> and <kbd>←</kbd> keyboard keys or the navigation buttons at the right and left of the screen.</p>
 
 <h4>Play prototype interactions</h4>
-<p>The View mode is the place where you will be able to play prototype interactions. (<a href="/user-guide/prototyping/">More about prototyping interactions</a>).</p>
+<p>The View mode is the place where you will be able to play prototype interactions. (<a href="/user-guide/prototyping-testing/prototyping/">More about prototyping interactions</a>).</p>
 
 <h4>Interactions view settings</h4>
 <p>This setting allows you to decide how to show a visual cue for interactions: always, on click or just don't show.</p>
@@ -59,11 +60,11 @@ desc: Present designs and share prototypes with Penpot's View mode! Play interac
 <p>Toogle fullscreen <kbd>Shift+F</kbd></p>
 
 <h4>Comments mode</h4>
-<p>Activate the <a href="/user-guide/view-mode/#viewmode-comments">comments</a> by pressing its button at the top navbar.</p>
+<p>Activate the <a href="#viewmode-comments">comments</a> by pressing its button at the top navbar.</p>
 <p>Comments mode will not always be available in view mode shared links, this will depend on the link settings.</p>
 
 <h4>Inspect mode</h4>
-<p>Activate the <a href="/user-guide/view-mode/#viewmode-inspect">inspect mode</a> by pressing its button at the top navbar.</p>
+<p>Activate the <a href="/user-guide/dev-tools/#inspect-design">inspect mode</a> by pressing its button at the top navbar.</p>
 <p>Inspect mode will not always be available in view mode shared links, this will depend on the link settings.</p>
 
 
@@ -117,7 +118,7 @@ desc: Present designs and share prototypes with Penpot's View mode! Play interac
 <li>On 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><a href="/user-guide/inspect/">More about inspecting designs</a></p>
+<p><a href="/user-guide/dev-tools/#inspect-design">More about inspecting designs</a></p>
 <figure>
   <video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.webp" height="auto">
     <source src="/img/inspect/inspect-viewmode.mp4" type="video/mp4">