How to set up interaction actions

How to set up interaction actions

In Visily, actions help you turn prototype interactions into real user flows, such as navigating between screens, going back, opening overlays, or closing overlays.

Before you start

  1. To set up or edit interaction actions, switch your board to Prototype mode and select the screen or element where the interaction starts.
  2. An interaction works when its key settings are fully configured, including the source, trigger, action, and any related settings. The trigger defines when the interaction starts, while the action defines what happens next.

Action types

The common action types in Visily include:
  1. Navigate to: Moves to a specific target screen. Commonly used for navigation between app sections.
  2. Back to previous screen: Returns to the screen visited before the current one.
  3. Open overlay: Displays an additional layer on top of the current screen (e.g., popup, toast).
  4. Close overlay: Hides the currently displayed overlay. Common for dismissing modals, popups, or notifications.

When you choose Navigate to, you can customize how the screen transition works. Common navigation settings include:
  1. Target: The destination screen users will move to.
  2. Transition: How the prototype moves to the next screen, such as instant, fade, slide left, slide right, slide up, or slide down.
  3. Duration: How long the transition lasts, except for instant transitions.

Overlay settings

When you choose Open overlay as the action type, you can customize how the overlay appears and interacts with the screen using the overlay settings.
  1. Overlay: This field lets you select a container or screen to use as the overlay.


  2. Overlay Position options include:
    1. Relative to source: Places the overlay near the trigger element. Best for dropdowns, tooltips, or contextual menus, with 12 position options.


    2. Relative to screen: Places the overlay based on the screen layout. Best for modals, toast messages, or panels, with 9 position options.


    3. Keep original position: Keeps the overlay where it was designed. Best for pre-placed tutorials or banners. This option is only available if the selected overlay is inside the source screen.


  3. Offset: Sets the distance from the trigger element or screen boundary. Available for Relative to source and Relative to screen.
  4. Show background overlay: Adds a background behind the overlay. Available for Relative to screen and Keep original position.
  5. Preview on canvas: Shows the overlay position on the canvas without presenting. Available for Relative to source and Relative to screen.
Notes
When the prototype action is set to Open overlay, the linked overlay elements may not appear in Quick Preview or Presentation mode until the trigger happens. If an element does not appear as expected, check whether it has been set as an overlay in an interaction.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How interaction triggers work

      Use interaction triggers to control how users start an action in your prototype, such as moving to another screen or opening an overlay. Before you start To add or edit triggers, switch your board to Prototype mode and select the screen or element ...

    • How to set design instructions for AI

      This article explains how to set design instructions for AI in Visily. Design Instructions help you guide the AI with consistent preferences, so generated results stay more aligned with your project’s style, context, and requirements. Set up Design ...

    • 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 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 ...