How to use Quick Preview to review your prototype

How to use Quick Preview to review your prototype

Use Quick Preview to test your prototype directly on the canvas as you design. It’s useful for quick checks and fast edits, with live sync reflecting your changes immediately.

Before you start

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

How to open Quick preview

In Prototype mode of your board, you can open Quick preview using one of these options:
  1. To review a screen, select the screen and click Quick preview from the More dropdown above the selected screen.


  2. To review an interaction, select the interaction, then choose Quick preview from the top toolbar in the Prototype panel.


  3. To review a flow, select Quick preview from the More dropdown of the flow name tab, or open it from the flow list dropdown in the Prototype panel.

Info
If no screen is selected, clicking Quick preview from the top toolbar in the Prototype panel will preview all screens on the board.

Use the Quick preview window

When Quick preview opens, the preview window appears in the top-left corner of the canvas. 

From there, you can:
  1. Interact with the prototype in the preview window to check the flow, screen behavior, or interaction.


  2. Drag the top bar to move it around the canvas


  3. Resize the window by dragging its edges


  4. Use the left and right arrows to move between screens


  5. Restart the flow from the starting point or the most recently selected screen


  6. Adjust the zoom level from the More menu

  1. Select Open presentation from the More menu to review the prototype in a full presentation view.

Notes
Navigation and restart options are not available when previewing a standalone screen.

Note

  1. Quick preview updates automatically when you make changes to your design, so you do not need to close and reopen it.
  2. When you choose Quick Preview from the top toolbar in the Prototype panel, your selection is remembered. Next time, you can click the icon directly to open the view without selecting it from the menu again.

  3. Use Presentation mode to review or share your prototype in a full view, with options like device frames for a more realistic app experience.
  4. If an overlay does not appear immediately, check whether it is set to open only after a trigger happens.
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 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 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 ...
    • 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 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 Switch your board to Prototype mode. Make sure ...