How to present your prototype

How to present your prototype

Presentation mode lets you experience your design in full screen, just like a real app. It’s perfect for walking through complete flows, sharing with teammates, or showcasing your ideas.

Before you start

  1. Switch your board to Prototype mode.
  2. Make sure your prototype has the screens, flows, or interactions you want to present.

How to open Presentation mode

In Prototype mode of your board, you can open Presentation mode using one of these options:
  1. The Play button in each Flow tab above the screens


  2. The Play button next to each flow in the Prototype panel


  3. The Open presentation option in the More dropdown on the quick preview top bar


  4. The Play button in the top toolbar of the Prototype panel. This opens a default presentation of the earliest created flow.


  5. The Play button in the top toolbar of your board


Presentation flow

When you launch Presentation mode, your prototype opens in a new browser tab. During the presentation, you have a set of controls to explore and fine-tune the flow.


Here’s what you can do:
  1. Select flow to present: Use the dropdown in the left menu to switch between different prototype flows. You can also choose to present all your screens, even if they belong to different flows.


  2. Rearrange screens by dragging and dropping them in the screen list on the left panel when presenting all screens.


  3. Collapse the left panel: Click the collapse icon in the left panel to hide it and expand the preview area.


  4. Navigate between screens: Move forward and backward through your flow using the left and right arrow buttons, or by pressing the arrow keys on your keyboard.

  5. Restart the flow: Click the Restart icon to return to the starting point of the current flow, or to the first screen if no flow is defined. You can also press the R key to restart quickly.


  6. Toggle the device frame:
    1. Turn on to view your design inside a mock device. The viewport is automatically applied based on your screen width (Desktop/Mobile)
    2. Turn off the frame to see your design as it originally appears. When turned off, scale controls will appear next to it for more flexible viewing.
            
  1. Change background color: Customize the background to better fit your presentation context or simulate different environments.

  2. Toggle the “change component states when interacted”: When turned on, components will have interactive effects such as hover, pressed, focused, checked, etc.

  3. Enter full-screen mode
    1. Click the expand icon in the top-right corner to view your prototype in full screen.

    2. To exit full-screen mode, press the Esc key or click the Exit full screen button in the top-right corner

  1. Exit presentation mode: Click the back logo to return to the editor view.

Info
Visily also supports hotspot hints to guide users during interactions. When clicking outside a hotspot, Visily highlights all clickable areas with a pink bounding box.

Share action in presentation mode

You can share your presentation with others using the share dialog in the top-right corner. The link will take invited users directly to the presentation page.


Info
Users with view-only permission can still interact with the prototype using all supported actions in presentation mode, except for rearranging screens.

Comment in presentation mode

  1. Anyone with access can leave comments during Presentation mode by clicking the comment icon in the top-right menu or pressing C.
  2. When a comment is added in presentation mode, it’s pinned to the same position on the screen as it appears on the canvas.
  3. When comments are turned on, you’ll see all comments from both the current presentation screen and the canvas.



Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.