penpot/docs/user-guide/objects/index.njk

---
title: 05· Objects
---

<h1 id="objects">Objects</h1>
<p class="main-paragraph">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.</p>

<h2 id="Boards">Boards</h2>
<p>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. Boards can contain other boards. First level boards 
are shown by default at the <a href="/user-guide/view-mode">View mode</a>, 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.</p>

<h3>Create boards</h3>
<p>You can create a board using the board tool at the toolbar or the shortcut <kbd>B</kbd>. </p>
<p>Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes. </p>
<figure>
  <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
    <source src="/img/objects/board-create.mp4" type="video/mp4">
  </video>
</figure>

<p><strong>TIP:</strong> Create a board around one or more selected objects using the option "Selection to board" at the menu or the shortcut <kbd>Ctrl/⌘</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>.</p>

<h3>Select boards</h3>
<p>There are two different cases in terms of selecting boards:</p>
<ul>
  <li>For first level boards that have at least one inside, click on the board name or <kbd>Ctrl/⌘</kbd> + click on the board area to select it and then drag</li>
  <li>For the rest (empty first level boards and inside boards) just click to select.</li>
</ul>
<figure>
  <video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.webp" height="auto">
    <source src="/img/objects/board-select.mp4" type="video/mp4">
  </video>
</figure>

<h3>Set board as thumbnail</h3>
<p>Select a specific board to be the file thumbnail that will be shown at <a href="/user-guide/the-interface/#dashboard-interface" target="_blank">the dashboard</a> in the file card.</p>
<p>To set a custom thumbnail:</p>
<ol>
  <li>Select a board.</li>
  <li>Right click to show the menu and select "Set as thumbnail" or press <kbd>Shift</kbd> <kbd>T</kbd>.</li>
</ol>
<figure>
  <video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.webp" height="auto">
    <source src="/img/objects/board-thumbnail.mp4" type="video/mp4">
  </video>
</figure>

<h3>Clip content</h3>
<p>Boards offer the option to clip its content (or not).</p>
<figure>
  <video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.webp" height="auto">
    <source src="/img/objects/board-clip.mp4" type="video/mp4">
  </video>
</figure>

<h3>Show in View mode</h3>
<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p> 
<p><strong>Defaults</strong></p>
<p>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.</p>
<ul>
  <li>Boards created at first level (<a href="/user-guide/workspace-basics/#viewport">the viewport</a>): shown by default.</li>
  <li>Boards created inside other boards: not shown by default.</li>
</ul>
<figure>
  <img src="/img/objects/board-show.webp" alt="board show in view mode">
</figure>

<h3>Show fill in exports</h3>
<p> 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.</p>
<figure>
  <img src="/img/objects/board-fill.webp" alt="show board fill in exports">
</figure>

<h3>Board guides</h3>
<p>You can set guides on boards that will assist with aligning objects.</p>
<p>Read more about <a href="/user-guide/workspace-basics/#guides">guides</a>.</p>
<figure>
  <img src="/img/objects/board-guides.webp" alt="board guides">
</figure>

<h3>Prototyping boards</h3>
<p>You can connect boards with other boards to create rich interactions.</p>
<p>Read more about <a href="/user-guide/prototyping/">prototyping</a>.</p>
<figure>
  <img src="/img/objects/board-prototyping.webp" alt="prototyping with boards">
</figure>

<h2 id="rectangles-ellipses">Rectangles and ellipses</h2>
<p>Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting
a design.</p>
<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
<p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/layer-basics/">Layer basics</a>.</p>
<figure>
  <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
    <source src="/img/objects/rectangles-ellipses.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="text">Text</h2>
<p>To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have two ways to create a text layer:</p>
<ol>
  <li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
  <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
</ol>
<figure>
  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
    <source src="/img/objects/text-create.mp4" type="video/mp4">
  </video>
</figure>
<h3>Edit and style text content</h3>
<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
<figure>
  <img src="/img/objects/text-edit.webp" alt="editing text">
</figure>
<h3>Text options</h3>
<figure>
  <img src="/img/objects/text-options.webp" alt="text options">
</figure>
<ol>
  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/custom-fonts">install your own fonts</a>.</li>
  <li><strong>Font size.</strong></li>
  <li><strong>Font type.</strong></li>
  <li><strong>Line height</strong> (in pixels).</li>
  <li><strong>Letter spacing</strong> (in pixels).</li>
  <li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
  <li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
  <li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
  <li><strong>Vertical alignment:</strong> top, center, bottom.</li>
  <li><strong>Decoration:</strong> none, underline, strikethrough.</li>
  <li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
</ol>

<h2 id="curves">Curves (freehand)</h2>
<p>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 <kbd>Ctrl/⌘</kbd> + <kbd>c</kbd>.
<p>The path created will contain a lot of points, but it is edited the same way as any other curve.</p>

<h2 id="paths">Paths (bezier)</h2>
<p>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 <kbd>P</kbd>. Then you have two ways to create the path:</p>
<ol>
  <li><strong>Click</strong> to create a new corner node.</li>
  <li><strong>Click and drag</strong> to create a curved node.</li>
</ol>
<p>To finish the path:</p>
<ol>
  <li><strong>Close it</strong> clicking over the starting node.</li>
  <li><strong>Leave it open</strong> pressing <kbd>Esc</kbd> or <kbd>Enter</kbd> to stop editing. Then press <kbd>Esc</kbd> to exit the edit mode.</li>
</ol>
<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
<figure>
  <video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.webp" height="auto">
    <source src="/img/objects/path-create.mp4" type="video/mp4">
  </video>
</figure>

<h3>Edit nodes</h3>
<p>To edit a node double click on a path or select and press <kbd>Enter</kbd>.
You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
<figure>
  <video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.webp" height="auto">
    <source src="/img/objects/nodes-edit.mp4" type="video/mp4">
  </video>
</figure><h4>Node types</h4>
<p>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.</p>
<figure>
  <video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.webp" height="auto">
    <source src="/img/objects/node-types.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="images">Images</h2>
<h3>Insert images</h3>
<p>There are several options for inserting an image into a Penpot file:</p>
<ul>
  <li>Use the <strong>image tool</strong> at the toolbar or press <kbd>K</kbd> to inspect images in your file system.</li>
  <li><strong>Drag</strong> an image from your computer to the viewport.</li>
  <li>Copy an image & paste it or drag it right from a <strong>browser</strong>.</li>
  <li>Drag an image from a Penpot <strong>library</strong>.</li>
</ul>

<h3>Images aspect ratio</h3>
<p>Images fill the layer backgrounds by default, so they take up the entire object while maintaining the aspect ratio. This is great for flexible designs because the images can adapt to different sizes.</p>
<p>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.</p>
<figure>
  <video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.webp" height="auto">
    <source src="/img/objects/image-ratio.mp4" type="video/mp4">
  </video>
</figure>