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.
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 View mode, 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.
To create a board, use the board tool at the toolbar or the shortcut B.
Then, with the board tool selected, you have two options:
TIP: Create a board around one or more selected layers using the option "Selection to board" at the menu or the shortcut Ctrl/⌘ + Alt + G.
There are two different cases in terms of selecting boards:
There several ways to rename boards:
At the workspace, select a specific board to be the file thumbnail that will be shown at the dashboard in the file card.
To set a custom thumbnail:
You can get the link to each individual board, making it easy to share them with team members or include direct links in documentation.
There are two ways to copy a direct link to a board:
Boards offer the option to clip its content (or not).
Boards offer the option to be shown as a separate board/screen in the View mode. Use this setting to decide what boards should be shown as individual items in your presentations.
Defaults
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.
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.
You can adjust the board size to fit its content by clicking the icon in the design sidebar.
You can set guides on boards that will assist with aligning layers.
Read more about guides.
You can connect boards with other boards to create rich interactions.
Read more about prototyping.
Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting a design.
The shortcut keys are E for ellipses and R for rectangles.
To find out more about how to edit and modify these shapes go to Layer basics.
Text layers are how you add copy to your designs in Penpot. If you want to go deeper into fonts, typography and advanced text options, check the dedicated Text & Typography section.
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 Shift/⇧ + c.
The path created will contain a lot of points, but it is edited the same way as any other curve.
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 P. Then you have two ways to create the path:
To finish the path:
Tip: If you hold Shift/⇧ while adding nodes the angle between the current and the next will change in 45 degree increments.
To edit a node double click on a path or select and press Enter. You can choose to edit individual nodes or create new ones. Press Esc to exit node edition.
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.
There are several options for inserting an image into a Penpot file:
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.
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.
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.
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.
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 layers 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.
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.
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.
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 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.
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.
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:
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 layers to position them vertically and horizontally with equal distances between them.
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.
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.
Penpot has a variety of properties for each layer. When selected, the options are displayed in the design panel on the right.
You can customize the border radius of rectangles and images, with the option to customize each corner individually.
Adding shadows is easy from the design panel. You can add as many as you want.
Shadow options are:
You can set a blur for each and every layer at Penpot.
Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.
Set the overal opacity for layers and their blend mode.
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.
Blend options available:
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.
Using the layer menu
Using Shortcuts