Objects

Objects are the items that you can place at the viewport. Artboards, shapes, texts, path and graphics are objects. Learn the specifics of the different objects that you can use at Penpot to get the most of them.

Artboards

An artboard is a frame with fixed edges. Using artboards is really useful if you want to design for a specific screen or print size. Objects inside artboards only show parts that fall within its shape.

Create artboards

You can create artboards with custom sizes or choose one of the provided presets with the most common resolution for devices and print.

Select and move artboards

Click on the artboard name or double click over an area without layers.

To move an artboard you have to select it first and then drag it from its name or from an area without layers.

Tip: If you hold Shift/⇧ while dragging you can do it from any part of the artboard, regardless where the layers are.

Grids and prototyping

Artboards have two main particularities over the rest of the objects: you can set grids on them and you can connect them to create interactions.

Rectangles and ellipses

Rectangle and ellipses are two basic, “primitive” geometric shapes that are really useful to kickstart your designs.

Shortcuts are E for ellipses and R for rectangles.

To know details about how to edit and modify them go to Layer basics.

Texts

To insert a text you have to activate the text tool first clicking on the icon at the toolbar or pressing T. Then you have to 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 a 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.

Paths (bezier)

A path is composed by two or more nodes that will form a vector shape. To draw a new path you have to activate the text path by clicking on the icon at the toolbar or pressing P. Then you have two ways to create a text shape:

1. Click to create a new corner node.
2. Click and drag to create a curved node.
3. 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

Double click a path or select and press Enter to start editing a node. Then you can choose 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 to modify the curvature of a path contours.

Images

You have several options to insert an image in 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.