Objects

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.

Boards

A Board is a layer typically used as a container for a design. Boards are useful if you want to design for a specific screen or print size. Unlike its predecessors (the artboards), 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, 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.

Create boards

You can create a board using the board tool at the toolbar or the shortcut B.

Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes.

TIP: Create an board around one or more selected objects using the option at the menu or the shortcut Ctrl/⌘ + Alt + G.

Select boards

There are two different cases in terms of selecting boards:

• For first level boards that have at least one inside, click on the board name or Ctrl/⌘ + click on the board area to select it and then drag
• For the rest (empty first level boards and inside boards) just click to select.

Set board as thumbnail

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:

1. Select a board.
2. Right click to show the menu and select "Set as thumbnail" or press Shift T.

Grids and prototyping

Boards have two additional features: you can set grids on them to assist with aligning objects, and you can connect them to each other to create interactions.

Read more about grids and prototyping.

Clip content

Boards offer the option to clip its content or not.

Show in View mode

Boards offer the option to be shown in the View mode or not. First level boards are shown by default, while boards created inside other boards have the option unchecked. However, you can change this setting for each board to decide what boards should be shown in your presentations.

Show fill in exports

You can also decide if the fill of an artboard will be shown in exports. ­ Sometimes you don’t need the artboards to be part of your designs, but only their support to work on them.

Rectangles and ellipses

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

To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing T. Then you have two ways to create a text layer:

1. Click to create a textbox without any specific dimensions.
2. Drag to create a textbox with a fixed size.

Edit and style text content

Press Enter with a text layer selected to start editing the text content. You can style parts of the text content as rich text.

Text options

1. Font family. You can choose any font from Google Fonts.
2. Font size.
3. Font type.
4. Line height (in pixels).
5. Letter spacing (in pixels).
6. Text case: none, uppercase, lowercase, titlecase.
7. Horizontal alignment: left, center, right, justify.
8. Vertical alignment: top, center, bottom.
9. Sizing: auto height, auto width, fixed size.
10. Text decoration: none, underline, strikethrough.

Curves (freehand)

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 Ctrl/⌘ + c.

The path created will contain a lot of points, but it is edited the same way as any other curve.

Paths (bezier)

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:

1. Click to create a new corner node.
2. Click and drag to create a curved node.

To finish the path:

1. Close it clicking over the starting node.
2. Leave it open pressing Esc or Enter to stop editing. Then press Esc to exit the edit mode.

Tip: If you hold Shift/⇧ while adding nodes the angle between the current and the next will change in 45 degree increments.

Edit nodes

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.

Node types

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.

Images

There are several options for inserting an image into a Penpot file:

1. Use the image tool at the toolbar or press K to inspect images in your file system.
2. Drag an image from your computer to the viewport.
3. Copy an image & paste it or drag it right from a browser.
4. Drag an image from a Penpot library.