---
title: User guide
desc: Learn everything from interface basics to advanced features like prototyping and design sharing with Penpot's comprehensive user guide! Free access.
eleventyNavigation:
  key: User guide
  order: 2
---

<div class="main-illus">
  <img src="/img/home-user-guide.webp" alt="User guide" border="0">
</div>

<h1 id="user-guide">Penpot User Guide</h1>

<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to work with Penpot, from the interface basics to advanced functionality. Learn the details on topics such as prototyping, organizing your designs, or sharing, to get the most out of Penpot.</p>

<p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, see something is missing or find anything that needs correcting, please write to us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a>.</p>

<p class="main-paragraph">Explore our featured topics:</p>

<ul class="intro-sections">
  <li>
    <a href="/user-guide/designing/layers/">
      <h2>Layers</h2>
      <p>Objects available in Penpot and how to get the most of them</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/designing/flexible-layouts/">
      <h2>Flexible layouts</h2>
      <p>Create designs that adapt automatically</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/design-systems/components/">
      <h2>Components</h2>
      <p>Speed your design workflow with reusable components</p>
    </a>
  </li>
  <li>
    <a href="/user-guide/design-systems/variants/">
      <h2>Variants</h2>
      <p>Group components into a single, customizable one</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/design-systems/design-tokens/">
      <h2>Design Tokens</h2>
      <p>Synchronize visual elements across your designs</p>
    </a>
  </li>
    <li>
    <a href="/user-guide/dev-tools/#inspect-design">
      <h2>Inspect design</h2>
      <p>Get production-ready code</p>
    </a>
  </li>
      <li>
    <a href="/user-guide/prototyping-testing/prototyping/">
      <h2>Prototyping</h2>
      <p>Build interactive prototypes to mimic your product behaviour</p>
    </a>
  </li>
      <li>
    <a href="/user-guide/design-systems/libraries/">
      <h2>Libraries</h2>
      <p>Organize and manage your stored elements with Libraries</p>
    </a>
  </li>
</ul>