<p class="main-paragraph">The Workspace is where you create designs. You have an infinite canvas where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.</p>
<h2 id="viewport">The viewport</h2>
<p>Surrounded by panels, header and toolbars, in the middle of the workspace, you can find the viewport. The viewport is the design area of a file page. It is practically infinite. If what you need is a frame with specific, limited dimensions, you can create a board.</p>
<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. File, View, Edit, Preferences and Help.</p>
<p>To zoom in and out hold <kbd>Ctrl</kbd> (or <kbd>⌘</kbd> if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.</p>
<p>While moving objects at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the object that is being moved to those guides to help you align to the center of the edges of other objects.</p>
<p>To create ruler guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.</p>
</figure><p>To <strong>delete ruler guides</strong> drag the guide to the ruler or select the guide and press delete / supr.</p>
<p>To <strong>show/hide ruler guides</strong> use the same shortcut as for rulers: <kbd>Shift/CMD + Ctrl + R</kbd></p>
<h2 id="guides">Guides</h2>
<p>Guides are design aids that are used to help you to align content to a
geometric structure. In Penpot there are three types of guides:
<strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
<p><strong>Note:</strong> Guides are only visible in the viewport and will never be shown on exports.</p>
<h3 id="add-guides">Add guides</h3>
<p>Guides can be added at board level. With a board selected, in the design sidebar you'll find the section "Guides". Click the "+" button to add a guide to the selected board. You can add as many guides as you want.</p>
<h3 id="hide-remove-guides">Hide and remove guides</h3>
<p>You can hide a specific guide by clicking at the eye button of a guide configuration. If you want to remove a guide, use the "-" button at the right side of the guide settings.</p>
<p>To hide or show all the guides at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
<h3 id="guides-snap">Snap to guides</h3>
<p>If you want to enable or disable the snapping to guides you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
<p>Objects automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option anytime from the main menu.</p>
<figure>
<img src="/img/workspace-basics/workspace-snap.webp" alt="Snap to pixel setting" />
</figure>
<h2 id="nudge-amount">Nudge amount</h2>
<p>Set your chosen distance to move objects using the keyboard. This is a must if you’re working with guides (if you’re not, you should ;)). Being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.</p>
<p>Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.</p>
<p>Display the shortcuts panel at the workspace using the shortcut <kbd>?</kbd> or through the option at the <a href="/user-guide/workspace-basics/#workspace-menu">main menu</a>.</p>
<p>The categories and a filter will help you to find the shortcut you need.</p>
<p>The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.</p>
<p>All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.</p>
<p>You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.</p>
<p>When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.</p>
<p>In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.</p>
<p>File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.</p>
<p>At the Actions panel, you have the object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.</p>
<p class="advice">The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.</p>
<p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
<p>You can also press any item of the actions list to get to this specific state.</p>
<li>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key.</li>
<li>Click on a location within the viewport to leave a comment. If you want the comment to appear in the board view, add the comment to the board.</li>
<li>Write your comment in the text box.</li>
<li>Press Post to leave the comment or Cancel to not do it.</li>
</ol>
<h4>How to reply a comment</h4>
<ol>
<li>Open a comment by clicking at its bubble (a circled number).</li>
<li>Write your comment at the text box at the end of the comment popup.</li>
<li>Press Post to leave the comment or Cancel to not do it.</li>
</ol>
<h4>Mark threads as read</h4>
<p>Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.</p>
<figure>
<img src="/img/workspace-basics/comments-mark.webp" alt="Marking comments as read" />
</figure>
<h4>Edit and remove comments</h4>
<p>At the top right of the comment popup you can find options to edit or delete comments.</p>
