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.

    • Related Articles

    • How to use Flows to organize your prototype

      A flow in Visily prototype mode is a set of connected screens that represents a specific user journey in your prototype. Use flows to organize prototype paths in your board, such as onboarding, sign-up, checkout, or other user journeys. Before you ...

    • How to access Prototype mode

      Visily’s Prototype mode lets you create interactive app flows by connecting screens or elements. You can simulate real user journeys, making your designs feel like a real app, even before development starts. Before you start Make sure your board ...

    • How to create a prototype with AI

      Use Create prototype with AI to quickly build an interactive flow from selected screens. Visily automatically connects the screens with interaction links, helping you visualize the user journey faster. Before you start Make sure your board has at ...

    • How to add interactions to a prototype

      Prototype interactions let you connect screens or elements and define what happens when users interact with them. Before you start Make sure your board has the screens or elements you want to connect. To add or edit interactions, switch your board to ...

    • How to set up prototype scrolling

      Set up prototype scrolling to make screens or containers behave more like real app or website experiences during preview and presentation. Before you start Switch your board to Prototype mode before setting up scrolling. Make sure the content inside ...