Every object you create in Penpot’s viewport is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.
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.
You can add, remove or rename pages to suit your needs.
Layers: Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.
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.
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.
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.
Hold Shift/⇧ while creating an ellipse or a rectangle to maintain equal width and height.
There are several ways to duplicate a layer:
There are a couple ways to delete a layer.
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.
If you want to select an element that is difficult to reach because it 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.
To select a layer inside a group you do double click. First click selects the group, second click selects a layer.
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.
Grouped layers can be moved, transformed or styled at the same time.
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 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.
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.
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 Ctrl/⌘ while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.
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:
Activate the scale tool by pressing K 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.
Aligning and distributing layers can be found at the top of the Design panel.
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.
Distributing objects to position them vertically and horizontally with equal distances between them.
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).
Groups and boards can have their contents expanded and collapsed. Click on the arrow at the right side to toggle the visibility of their contents.
To collapse all the layers, and just display the boards, press Shift/⇧ + left click over the right arrow of a group or a board to collapse them all.
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.
Constraints allow you to decide how layers will behave when resizing its container.
Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.
To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.
Constraints are set to “Scale” by default, but you have other options.
Select the elements of a page you want to work with in a specific moment hiding the rest so they don’t get in the way of your attention. This option is also useful to improve the performance in cases where the page has a large number of elements.
To activate focus mode:
Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.
If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.
