Layer basics

Every object you create at Penpot’s workspace is a layer. Rectangles, ellipses, artboards or texts are some types of layers that you can use to build your designs.

Pages

Pages allows you to organize your layers in separate tabs inside a file. Subdividing a file gives you options to make better sense of your work. For instance, you can use them to separate different stages of the design process in the same document. Screen sizes, features or atomic design categories are other common ways to use pages.

You can add, remove or rename pages to suit your needs.

pages

Layers panel

At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.

layers

Hide and lock layers

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.

layers

Creating layers

To create a layer you have to select the type of layer by clicking the selected tool (artboard, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport.

Hold Shift/⇧ while creating an ellipse or a rectangle to maintain equal width and height.

creating layers

Duplicating layers

There are several ways to duplicate a layer:

  1. You can press Ctrl/⌘ + D to duplicate a layer right over a selected layer.
  2. 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.
  3. You can also select a layer and drag while pressing Alt/⌥ so you can simultaneously duplicate and drag the new layer.

duplicating layers

Deleting layers

There are a couple ways to delete a layer.

  1. You can press Supr/⌫ to delete a selected layer.
  2. 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.

delete layers

Selecting layers

The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar.

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 Shift/⇧. If you hold Shift/⇧ and click you can deselect layers individually.

layers select

Selecting layers at the layers panel

  1. Click a layer to do a single selection.
  2. Press Ctrl/⌘ while clicking two or more layers to do a multiple selection.
  3. If you press Shift/⇧ while selecting two or more layers all the layers within the selection area will be selected.

layers select

Selecting layers ignoring groups

If you want to select an element that is difficult to reach because is under a group of elements, hold Ctrl/⌘ to make the selection ignore group areas and treat all the objects as being at the same level.

layers select

Grouping layers

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 Ctrl/⌘ + G. You can also use the option at the layers menu that you can open with right click.

To ungroup press Shift/⇧ + G or use the option at the layers menu that you can open with right click over the group.

To select a layer inside a group you do double click. First click selects the group, second click selects a layer.

layers grouping

Masking layers

A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape.

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 Ctrl/⌘ + M. The shape that is at the lowest level at the layer list will be used as a mask.

To unmask press Shift/⇧ + Ctrl/⌘ + M or use the option at the layers menu.

layers masking

Moving layers

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 artboard.

Moving layers

Resizing layers

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 Shift/⇧ while resizing the object will preserve its current proportions. You can also use the design panel where you can link width and height.

layers

Rotating layers

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 Ctrl/⌘ while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.

layers

Flipping layers

To flip a layer horizontally press Shift/⇧ + H. To flip a layer vertically press Shift/⇧ + V. You can also find these actions at the layers menu.

layers flipping

Aligning and distributing layers

Aligning and distributing layers can be found at the top of the Design panel.

Aligning will move all the selected layers 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.

layers

Distributing objects allows you to position them vertically and horizontally with equal distances between them.

layers

Collapsing groups and artboards

Groups and artboards can be expanded and collapsed to show and hide their contents. Click at the arrow at the right side to toggle their visibility state.

Sometimes you just need to have more clarity at the layers artboard. Press Shift/⇧ + left click over the right arrow of a group or an artboard to collapse them all.

Collapsing groups and artboards

Boolean operators

Combine shapes in different ways to create more complex ones by using formulas called "boolean operators". Boolean combinations are non destructive operations, the original shapes remain grouped and apt to further editions. There are five options: Union, difference, intersection, exclusion and flatten. Using boolean operations will lead to countless graphic possibilities for your designs.

boolean operators

  • Union: the resulting combination is the sum of the shapes.
  • Difference: 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.
  • Intersection: creates a group whose shape is the overlapping area between the shapes.
  • Exclusion: the opposite of intersection, the resulting shape is the area that does not overlap between the shapes.
  • Flatten: Tecnically not a boolean operator, this is the way to permanently combine the paths of a group of shapes in a single one.