Workspace basics

The Workspace is where you create designs. You have an infinite canvas in where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.

The viewport

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 an board.

the viewport

Navigate the viewport

Press space while moving your mouse to navigate the viewport. If you are using a trackpad you can do two finger scrolling.

You can also use the scrollbars, which are specially useful for those who love using graphic tablets.

navigate the viewport

The menu

There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. Export, view and edit options and preferences among them.

workspace menu

Zoom

At the viewport

To zoom in and out hold Ctrl (or 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.

All zoom shortcuts →

zoom menu

At the layers panel

Double click over a layer icon to zoom to the layer.

zoom layer

Dynamic alignment

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.

Dynamic alignment

If there are more than two objects nearby and you drag one of them Penpot will show their distance to help you distribute them equally.

Dynamic alignment

Rulers

Penpot has rulers that measure in pixels. Soon there will be guides that can be dragged from the rulers.

rulers

Snap to grid

Objects automatically snap to the nearest point of a visible grid. This option can be disabled anytime from the main menu.

snap to grid

Snap to pixel

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 . This option can be disabled anytime from the main menu.

snap to pixel

Nudge amount

Set your desired distance to move objects using the keyboard. This is a must if you’re working with grids (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.

nudge amount

Shortcuts panel

Shortcuts boost your productivity but are not easy to find and learn. A handy panel at your workspace will help you with that.

Display the shortcuts panel at the workspace by clicking on the shortcuts button at the bottom of the left toolbar or using the shortcut ?

Categories and a filter will help you to find the shortcut you need.

Shortcuts panel

History

The history panel keeps track of the latest changes on an opened file.

View history

To view the recent history of a file at the workspace press Ctrl/⌘ + H or click at the history icon on the toolbar at the left.

At the history you can see items with information about the last changes. At first sight you have object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item further details are shown.

history

Note: History panel is still in a very early state and shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the History as well.

Navigate history

To navigate through the history press Ctrl/⌘ + Z to go backwards and Ctrl/⌘ + Shift/⇧ + Z to go forward.

You can also press any item of the history list to got to this specific state.

history

Comments

Comments allows the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.

Adding comments

comments

  1. At the workspace, activate the comment tool by clicking the comment icon in the toolbar or pressing the C key.
  2. Click a place at the viewport where you’d like to leave the comment. If you want the comment to appear at the view mode leave the comment inside an board.
  3. Write your comment at the text box.
  4. Press Post to leave the comment or Cancel to not do it.

How to reply a comment

  1. Open a comment by clicking at its bubble (a circled number).
  2. Write your comment at the text box at the end of the comment popup.
  3. Press Post to leave the comment or Cancel to not do it.

Mark threads as read

Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.

comments

Edit and remove comments

At the top right of the comment popup you can find options to edit or delete comments.

Dashboard notifications

comments

At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.