💄 Layers basics 2.0

user-guide/layer-basics/index.njk

@@ -3,133 +3,226 @@ title: 04· Layer basics
 ---
 
 <h1 id="layer-basics">Layer basics</h1>
-<p class="main-paragraph">Every object you create in Penpot’s workspace is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.</p>
-
+<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>
 
 <h3 id="pages">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>
-<p><img src="/img/pages.gif" alt="pages" /></p>
-
+<figure>
+  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.png" height="auto">
+    <source src="/img/layers/pages-create.mp4" type="video/mp4">
+  </video>
+</figure>
 
 <h3 id="layers-panel">Layers panel</h3>
-<p>At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
-<p><img src="/img/layers-panel.gif" alt="layers" /></p>
+<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.png" 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 is containing 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 id="hide-lock">Hide and lock layers</h3>
 <p>Click on the eye icon to change the visibility of a layer. Click on the lock icon to lock or unlock a layer. A locked layer can not be modified.</p>
-<p><img src="/img/layers-hide-lock.gif" alt="layers" /></p>
+<figure>
+  <video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.png" height="auto">
+    <source src="/img/layers/layers-hide-lock.mp4" type="video/mp4">
+  </video>
+</figure>
 
-
-<h3 id="creating-layers">Creating layers</h3>
+<h3 id="creating-layers">Create layers</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>
-<p><img src="/img/layer-create.gif" alt="creating layers" /></p>
+<figure>
+  <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.png" height="auto">
+    <source src="/img/layers/layers-create.mp4" type="video/mp4">
+  </video>
+</figure>
 
-
-<h3 id="duplicating-layers">Duplicating layers</h3>
+<h3 id="duplicating-layers">Duplicate layers</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>
-<p><img src="/img/layer-duplicate.gif" alt="duplicating layers" /></p>
+<figure>
+  <video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.png" height="auto">
+    <source src="/img/layers/layers-duplicate.mp4" type="video/mp4">
+  </video>
+</figure>
 
-
-<h3 id="delete-layers">Deleting layers</h3>
+<h3 id="delete-layers">Delete layers</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>
-<p><img src="/img/layer-delete.gif" alt="delete layers" /></p>
 
-
-<h3 id="select-layers">Selecting layers</h3>
+<h3 id="select-layers">Select layers</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>
-<p><img src="/img/layers-selecting-1.gif" alt="layers select" /></p>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.png" 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>
-<p><img src="/img/layers-selecting-2.gif" alt="layers select" /></p>
-<h4>Selecting layers ignoring groups (deep selection)</h4>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.png" 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 is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the objects as being at the same level.</p>
-<p><img src="/img/layers-selecting-3.gif" alt="layers select" /></p>
+<figure>
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.png" 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="grouping-layers">Grouping layers</h3>
-<p>Grouped layers can be moved, transformed or styled at the same time. To group two or more layers you have to select them and then press <kbd>Ctrl/⌘</kbd> + <kbd>G</kbd>. You can also use the option at the layers menu that you can open with right click.</p>
-<p>To <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 group. </p>
-<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>
-<p><img src="/img/layers-grouping.gif" alt="layers grouping" /></p>
+<h3 id="group-layers">Group layers</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.png" height="auto">
+    <source src="/img/layers/layers-group.mp4" type="video/mp4">
+  </video>
+</figure>
 
-
-<h3 id="masking-layers">Masking layers</h3>
+<h3 id="mask-layers">Mask layers</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>
-<p>To mask layers you first have to 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. </p>
-<p>To <strong>unmask</strong> press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</p>
-<p><img src="/img/layers-masking.gif" alt="layers masking" /></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.png" height="auto">
+    <source src="/img/layers/layers-mask.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
-<h3 id="moving-layers">Moving layers</h3>
+<h3 id="move-layers">Move layers</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>
-<p><img src="/img/layers-moving.gif" alt="Moving layers" /></p>
+<figure>
+  <video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.png" height="auto">
+    <source src="/img/layers/layers-move.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
-<h3 id="resizing-layers">Resizing layers</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. If you hold <kbd>Shift/⇧</kbd> while resizing the object will preserve its current proportions. You can also use the design panel where you can link width and height.</p>
-<p><img src="/img/layers-resizing.gif" alt="layers" /></p>
+<h3 id="resize-layers">Resize layers</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 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.png" height="auto">
+    <source src="/img/layers/layers-resize.mp4" type="video/mp4">
+  </video>
+</figure>
 
-
-<h3 id="rotating-layers">Rotating layers</h3>
+<h3 id="rotate-layers">Rotate layers</h3>
 <p>To rotate selected layers you can use the handlers 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>
-<p><img src="/img/layers-rotating.gif" alt="layers" /></p>
+<figure>
+  <video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.png" height="auto">
+    <source src="/img/layers/layers-rotate.mp4" type="video/mp4">
+  </video>
+</figure>
+
+<h3 id="flip-layers">Flip layers</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.png" height="auto">
+    <source src="/img/layers/layers-flip.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
-<h3 id="flipping-layers">Flipping layers</h3>
-<p>To flip a layer <strong>horizontally</strong> press <kbd>Shift/⇧</kbd> + <kbd>H</kbd>. To flip a layer <strong>vertically</strong> press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>. You can also find these actions at the layers menu.</p>
-<p><img src="/img/layers-flipping.gif" alt="layers flipping" /></p>
-
-
-<h3 id="scaling-groups-texts">Scale tool for texts and groups</h3>
+<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.
-<p><img src="/img/scale-groups-texts.gif" alt="Scaling groups and texts" /></p>
+<figure>
+  <video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.png" height="auto">
+    <source src="/img/layers/layers-scale.mp4" type="video/mp4">
+  </video>
+</figure>
 
-<h3 id="aling-distribute-layers">Aligning and distributing layers</h3>
+<h3 id="aling-distribute-layers">Align and distribute layers</h3>
 <p>Aligning and distributing layers can be found at the top of the Design panel. </p>
-<p><strong>Aligning</strong> 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>
-<p><img src="/img/layers-align.gif" alt="layers" /></p>
-<p><strong>Distributing</strong> objects allows you to position them vertically and horizontally with equal distances between them.</p>
-<p><img src="/img/layers-distribute.gif" alt="layers" /></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.png" height="auto">
+    <source src="/img/layers/layers-align.mp4" type="video/mp4">
+  </video>
+</figure>
+<h4>Distribute layers</h4>
+<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.png" height="auto">
+    <source src="/img/layers/layers-distribute.mp4" type="video/mp4">
+  </video>
+</figure>
 
 <h3 id="layers-search">Searching and filtering 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>
-<p><img src="/img/layers-search.gif" alt="Search layers" /></p>
+<figure>
+  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.png" height="auto">
+    <source src="/img/layers/layers-search.mp4" type="video/mp4">
+  </video>
+</figure>
 
-<h3 id="collapsing-groups">Collapsing groups and boards</h3>
+<h3 id="collapse-groups">Collapsing groups and boards</h3>
 <p>Groups and boards can have their contents expanded and collapsed. Click on the arrow at the
 right side to toggle the visibility of their contents. </p>
 <p>To collapse all the layers, and just display the boards,
 press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a board to collapse them all.</p>
-<p><img src="/img/collapsing-groups.gif" alt="Collapsing groups and boards" /></p>
+<figure>
+  <video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.png" height="auto">
+    <source src="/img/layers/layers-collapse.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 objects by using
 "boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available or 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>
-<p><img src="/img/booleans.gif" alt="boolean operators" /></p>
-
+<figure>
+  <video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.png" 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>
@@ -145,7 +238,11 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
 <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>
-<p><img src="/img/constraints.gif" alt="constraints" /></p>
+<figure>
+  <video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.png" 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>
 
 <h4>Horizontal constraints</h4>
@@ -156,7 +253,9 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <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>
-<p><img src="/img/constraints-horizontal.png" alt="constraints" /></p>
+<figure>
+  <img src="/img/layers/layers-constraints-h.png" alt="Horizontal constraints">
+</figure>
 
 <h4>Vertical constraints</h4>
 <ul>
@@ -166,7 +265,9 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <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>
-<p><img src="/img/constraints-vertical.png" alt="constraints" /></p>
+<figure>
+  <img src="/img/layers/layers-constraints-v.png" alt="Vettical constraints">
+</figure>
 
 
 <h3 id="focus-mode">Focus mode</h3>
@@ -176,10 +277,16 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <li>Select one or more elements.</li>
   <li>Right click to show the menu and select the option "Focus on" or press <kbd>F</kbd>.</li>
 </ol>
-<p><img src="/img/focus-mode.gif" alt="focus-mode" /></p>
+<figure>
+  <video title="Focus mode" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-focus.png" height="auto">
+    <source src="/img/layers/layers-focus.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
 <h3 id="rtl-support">RTL support</h3>
 <p>Diversity and inclusion is one 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>
-<p><img src="/img/rtl-support.png" alt="rtl support" /></p>
+<figure>
+  <img src="/img/layers/layers-rtl.png" alt="RTL support">
+</figure>