View mode

At Penpot, the View mode is the best place to present your designs. You will also be able to share them and play the interactions.

View mode interface

Take a look at the anatomy of the View mode at this section: View mode interface.

View mode

Launch your designs in View mode

To view your designs from the workspace at View mode click the play button at the top right of the navbar or press G V.

Note: the View mode shows only boards and their contents. Anything outside an board will not be shown at the View mode.

viewmode

Features and options

From the View mode you can:

  • Navigate through boards pressing and keys.
  • Play the interactions (if there are any).
  • Change view settings for interactions: don’t show, show or show on click.

    viewmode

  • Click on the board name to see the boards list (with nice thumbnails).

    viewmode

  • Click on the page name to display the pages menu. At shareable links the available pages can be configurable.

    viewmode

  • Zooming options. Zoom in +, Zoom out -, Zoom to 100% Shift+0, Zoom to fit all Shift+1, Zoom to selected object Shift+2, Full screen.
  • Activate the browser fullscreen mode.
  • Activate the Handoff.
  • Activate the Comments mode.

Handoff

At the Handoff you can inspect your designs to get specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.

Inspect Designs

You can activate the Handoff from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:

  • On the left sidebar you can see the layers tree. Select a layer to inspect it.
  • At the right sidebar: you can switch between Info and Code tabs to get design specifications or code.

codemode

Distances and measurements

You can easily get measurements and distances between an object and other objects and board edges.

To get distances:

  • Click on an object or select it at the layers panel.
  • Hover other objects to see the distances between them and the selected one.
  • Hover a free space at the board or the area around it to get the distance from the object to the board edges.

codemode

Info panel

At the info panel you can see specifications about style and content of an object. Different types of objects can have different sets of properties.

codemode

Copy properties

You can copy property values individually or full sections of them pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.

codemode

Code panel

Press the code tab to get actual code snippets. Select an object to get ready to use code for styles (currently CSS only but more coming) and SVG markup.

codemode

Export

Export option is available at the bottom of the Info panel. Export presets set at the workspace will be available at the Handoff. New export presets can be added ath the Code mode but will not persist (won’t be found at the workspace).

Comments

You can activate comments at the View mode by pressing the comments icon at the top navbar.

At the View mode only boards are shown so the comments that are placed outside boards will not show here.

comments

Sharing prototype links

A "Share prototype link" is a public url that you can share so that someone can see the prototype regardless of whether they have a Penpot account.

Create and destroy link:

The Share prototype window can be found at the View mode.

  • To create a link press the button "Get link" and the link will be automatically created.
  • To copy the link you can copy the url or press the copy button.
  • To destroy a link press the button "Destroy link" and confirm the action. The link will cease to exist and will be no longer available, so be careful if you've already shared it. However, you will be always able to create a new one.

sharing

Manage permissions:

You can create a different link for each set of permissions. Click on "Manage permissions" to edit the link permissions.

  • Pages shared: Select the pages that will be availble at the link.
  • Can comment: allow comments to users that are not in the team where the file belongs.
  • Can inspect code: allow code inspection to users that are not in the team where the file belongs.

sharing

Allowing to share a "view only" workspace is in our plans and will come soon.