penpot/docs/user-guide/the-interface/index.njk

---
title: 02· The interface
desc: Discover Penpot's free user guide! Learn the interface, workspace basics, flexible layouts, and prototyping. Master Penpot today.
---

<h1 id="the-interface">The interface</h1>
<p class="main-paragraph">The Penpot interface has three main areas: Dashboard, Workspace and View mode. Lets take a look at their composition and main features.</p>

<h2 id="interface-workspace">Workspace</h2>
<p>The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside boards that will help you to create pages and exportation units.</p>

<figure>
  <a href="/img/interface/workspace-dark.webp" target="_blank">
    <img src="/img/interface/workspace-dark.webp" alt="Penpot's workspace" />
  </a>
</figure>

<p class="hint">
  <strong>1)</strong> Viewport
  <strong>2)</strong> Toolbar
  <strong>3)</strong> Main menu
  <strong>4)</strong> Pages
  <strong>5)</strong> Layers
  <strong>6)</strong> Rulers
  <strong>7)</strong> Color palette
  <strong>8)</strong> Typography palette
  <strong>9)</strong> Design properties
  <strong>10)</strong> Prototype mode
  <strong>11)</strong> Inspect mode
  <strong>12)</strong> View mode
  <strong>13)</strong> Share / Invite
  <strong>14)</strong> History
  <strong>15)</strong> Comments
  <strong>16)</strong> Zoom
  <strong>17)</strong> Users
  <strong>18)</strong> Assets
  <strong>19)</strong> Design tokens
  <strong>20)</strong> File status
</p>

<ol>
  <li><strong>Viewport:</strong> An infinite canvas where you can design without limits.</li>
  <li><strong>Toolbar:</strong> This is where you’ll find all the tools to quickly and easily create different types of objects: board, rectangle, ellipse, text, graphic, path, and free drawing. <a href="/user-guide/objects/">Learn more about objects.</a></li>
  <li><strong>Main menu:</strong> From the main menu, you can customize your workspace. Manage the visibility of grids, rulers, and panels. Enable or disable snapping and dynamic alignment. Add or remove the file as a Shared Library. You’ll also find help resources here.</li>
  <li><strong>Pages:</strong> A file can contain as many pages as you need. Each page has its own viewport (the almost infinite area where you design) and its own layers. You can create, delete, or reorder pages as needed.</li>
  <li><strong>Layers:</strong> Layers are the different objects you can place in the design viewport. <a href="/user-guide/layer-basics/">Learn more about layers.</a></li>
  <li><strong>Rulers:</strong> Rulers provide coordinates to help you design. You can also drag guides from them.</li>
  <li><strong>Color palette:</strong> The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. <a href="/user-guide/styling/#color-palette">Learn more about the color palette.</a></li>
  <li><strong>Typography palette:</strong> The typography palette keeps text styles always at hand. Use the menu to switch between libraries.</li>
  <li><strong>Design properties:</strong> The Design Properties sidebar lets you view and edit the attributes of a selected layer. The list changes depending on the element type: some properties are always present (size, position), while others are optional (stroke, shadow, blur…). <a href="/user-guide/styling/">Learn more about styling.</a></li>
  <li><strong>Prototype mode:</strong> Penpot lets you prototype interactions by connecting boards. Activate prototype mode from the right sidebar, then select an element and drag a connection to another board. You can preview the interactive prototype in View Mode (access it by clicking the play button in the top-right corner). <a href="/user-guide/prototyping/">Learn more about prototyping.</a></li>
  <li><strong>Inspect mode:</strong> Use Inspect Mode to get measurements, properties, and production-ready code from your designs. It also provides a safer, view-only mode with additional improvements. <a href="/user-guide/inspect/">Learn more about inspecting designs.</a></li>
  <li><strong>View mode:</strong> The View Mode button launches a presentation of your boards. Explore more features in the <a href="/user-guide/view-mode/#viewmode-features">View Mode guide.</a></li>
  <li><strong>Share / Invite:</strong> Invite team members to give them access to this file and all team files.</li>
  <li><strong>History:</strong> The History panel records recent changes in an open file. Use undo/redo to step through changes, and expand each entry for detailed information. <a href="/user-guide/workspace-basics/#history">Learn more about the history panel.</a></li>
  <li><strong>Comments:</strong> Switch to Comments Mode to view all comments on the file and add new ones.</li>
  <li><strong>Zoom:</strong> Options to zoom in, zoom out, or fit the canvas.</li>
  <li><strong>Users:</strong> See how many users currently have the file open.</li>
  <li><strong>Assets:</strong> Each file includes a default File Library where you can store reusable elements and styles, such as components, colors, and text styles. From this panel, you'll be also able to include and use shared libraries.</li>
  <li><strong>Design tokens:</strong> Design tokens are the building blocks of UI elements, expressed in a format usable across design, tools, and code. They include colors, typography, spacing, shadows, and more.</li>
  <li><strong>File status:</strong> Displays the file’s saving state, showing whether your latest changes are saved or if there’s a problem.</li>
</ol>

<h2 id="interface-viewmode">View mode</h2>
<p>Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode.</a></p>

<figure>
  <a href="/img/interface/viewmode-dark.webp" target="_blank">
    <img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
  </a>
</figure>

<p class="hint">
  <strong>1)</strong> Pages selector
  <strong>2)</strong> Boards selector
  <strong>3)</strong> Play mode
  <strong>4)</strong> Comments mode
  <strong>5)</strong> Inspect mode
  <strong>6)</strong> Interactions settings
  <strong>7)</strong> Zoom options
  <strong>8)</strong> Edit file
  <strong>9)</strong> Full screen
  <strong>10)</strong> Share prototype
  <strong>11)</strong> Boards counter
  <strong>12)</strong> Reset prototype
  <strong>13)</strong> Navigation button
</p>

<ol>
  <li><strong>Pages selector:</strong> Navigate through the pages of a file.</li>
  <li><strong>Boards selector:</strong> Boards selector displays a list of the boards with thumbnails that provide a graphic overview of the file.</li>
  <li><strong>Play mode:</strong> Default presentation mode where you can also play with interactions.</li>
  <li><strong>Comments mode:</strong> Comments mode shows comments inside Boards and allows users to reply or add new ones.</li>
  <li><strong>Inspect mode:</strong> At the Inspect mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for CSS styles, HTML and SVG. <a href="/user-guide/view-mode/#viewmode-inspect">More about Inspect.</a></li>
  <li><strong>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all. <a href="/user-guide/view-mode/#viewmode-features">More about interaction settings.</a></li>
  <li><strong>Zoom:</strong> Zoom options and info about their shortcuts.</li>
  <li><strong>Edit file:</strong> Opens file edition at the design workspace.</li>
  <li><strong>Fullscreen mode:</strong> Activate or deactivate browser fullscreen mode.</li>
  <li><strong>Share prototype:</strong> Create shareable links of the view mode to send it to developers, other designers or stakeholders, so they can view the designs and access the code specifications regardless of being at your team or even logged at Penpot.</li>
  <li><strong>Boards counter:</strong> Boards count and current position. </li>
  <li><strong>Reset prototype:</strong> Goes to the first board of the prototype.</li>
  <li><strong>Navigation buttons:</strong> Forward and backwards buttons.</li>
</ol>

<h2 id="interface-dashboard">Dashboard</h2>
<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.</p>
<figure>
  <a href="/img/interface/dashboard-dark.webp" target="_blank">
    <img src="/img/interface/dashboard-dark.webp" alt="Penpot's dashboard" />
  </a>
</figure>

<p class="hint">
  <strong>1)</strong> Teams
  <strong>2)</strong> Search files
  <strong>3)</strong> Projects
  <strong>4)</strong> Drafts
  <strong>5)</strong> Shared Libraries
  <strong>6)</strong> Custom fonts
  <strong>7)</strong> Pinned projects
  <strong>8)</strong> User area
  <strong>9)</strong> Comment notifications
  <strong>10)</strong> Create project
  <strong>11)</strong> File card
  <strong>12)</strong> Libraries & Templates module
</p>

<ol>
  <li><strong>Teams:</strong> A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.</li>
  <li><strong>Search:</strong> If you are looking for a specific file just type its title at the search box.</li>
  <li><strong>Projects:</strong> A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.</li>
  <li><strong>Drafts:</strong> The drafts section is where you can find the design files that are not inside any project.</li>
  <li><strong>Shared Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
  <li><strong>Custom fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
  <li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.</li>
  <li><strong>User area:</strong> This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)</li>
  <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.</li>
  <li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
  <li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).</li>
  <li><strong>Libraries & Templates module:</strong> A curated selection of Libraries & Templates files ready to import.</li>
</ol>

<h3 id="your-account">Your account</h3>
<p>Your account settings can be changed at the user area, in <b>Your account</b>. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.</p>

<h4 id="your-account-profile">Profile
  <a class="direct-link" href="#your-account-profile">#</a>
</h3>
<p>If you want to change the email address associated to your account or remove your account entirely, this can be done in the <b>Profile</b> section.</p>
<figure>
  <img src="/img/interface/youraccount-profile.webp" alt="Penpot's profile" />
</figure>

<h4 id="your-account-password">Password
  <a class="direct-link" href="#your-account-password">#</a>
</h3>
<p>If you want to change your password to a new one, this can be done in the <b>Password</b> section.</p>
<figure>
  <img src="/img/interface/youraccount-password.webp" alt="Penpot's password" />
</figure>

<h4 id="your-account-notifications">Notifications
  <a class="direct-link" href="#your-account-notifications">#</a>
</h3>
<p>At the <strong>Notifications</strong> section you can configure the email and dashboard notifications.</p>
<figure>
  <img src="/img/interface/youraccount-notifications.webp" alt="Penpot's notifications" />
</figure>

<h4 id="your-account-settings">Settings
  <a class="direct-link" href="#your-account-settings">#</a>
</h3>
<p>At the <strong>Settings</strong> section you can change the language and the UI color theme.</p>
<figure>
  <img src="/img/interface/youraccount-settings.webp" alt="Penpot's settings" />
</figure>

<h4 id="your-account-accesstokens">Access tokens
  <a class="direct-link" href="#your-account-accesstokens">#</a>
</h3>
<p>At the <strong>Asset tokens</strong> section you can manage your access tokens. <a href="https://help.penpot.app/technical-guide/integration/#access-tokens" target="_blank">Read more about access tokens here</a>.</p>

<h2 id="interface-ui-theme">UI Theme</h2>
<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
<ul>
  <li>From "Your account" > "Settings".</li>
  <li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
</ul>

<figure>
  <a href="/img/interface/dashboard-light.webp" target="_blank">
    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
  </a>
  <figcaption>Penpot's dashboard in light mode</figcaption>
</figure>
<figure>
  <a href="/img/interface/workspace-light.webp" target="_blank">
    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
  </a>
  <figcaption>Penpot's workspace in light mode</figcaption>
</figure>
<figure>
  <a href="/img/interface/viewmode-light.webp" target="_blank">
    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
  </a>
  <figcaption>Penpot's view mode in light mode</figcaption>
</figure>