Visily’s prototype mode allows you to create interactive app flows. You can add interactions by connecting a component or a screen to another screen and showing the user journey.
Create your Prototype
Open the Prototype mode
To access Prototyping mode, click the “Prototype” icon on the top bar of the working screen.
Add interaction to an element
You can select an element to add an interaction to in 2 ways:
- Draw a connecting line between that element and the destination screen
- Click “Add interaction” on the right panel to select the interaction type and destination screen
Customize an interaction
Once you create an interaction, you can personalize it using the Prototype side panel on the right. Here’s a quick guide:
- Trigger: Triggers the action when the user clicks or hovers on a hotspot in your prototype.
- On click: Triggers an action when the user clicks (on a desktop) or taps (on a mobile device) on a hotspot in the prototype. This can be applied to different elements on a screen.
- On hover: Triggers an action when the user moves their mouse over a hotspot. Useful for tooltips, on-screen prompts, or state changes.
- On timeout: Triggers an action after the user spends a set amount of time on a frame. You must specify the delay in milliseconds (ms).
- On long press: Triggers an action when the user clicks and holds (on a desktop) or taps and holds (on a mobile device).
- On keyboard shortcut: Triggers an action when the user presses a predefined key or a combination of keys, similar to a keyboard shortcut.
- On press Enter: Works only for smart components like Dropdowns, Textboxes, Textareas, and Searchboxes. It triggers an action when the user clicks on these components in Presentation mode to enter editting mode; and presses Enter to confirm their input.
- Action: Choose from 3 types of interactions: Navigate to a specific screen, Go back to the previous screen, and Open overlay/popup
- Target: Decide where the interaction ends, such as another screen in your prototype. Note: “Go back” action will return to the previous screen automatically.
- Transition: Select how the prototype moves to the next screen: Instant, Fade, Slide left, Slide right, Slide up, or Slide down
- Duration: Set how long the transition takes in milliseconds (ms): Fast (100 ms), Medium (300 ms), Slow (600 ms)
- Setting scroll behaviors
Scroll behaviors help make prototypes feel real by letting users interact with content naturally. You can:
- Scroll up and down to read long content.
- Scroll left and right to navigate sliders.
- Keep important elements (like menus or navigation bars) fixed while scrolling.
Here’s how to enable scrolling within Visily:
- Prepare the frame for scrolling
- Use a screen or clipped container to allow scrolling.
- Make sure the content inside extends beyond the screen or container size.
- Set content scrolling for elements
- This decides how users can move through content that extends beyond the screen or container.
- Steps to apply:
- Select a screen or container.
- Open the Prototype tab in the right properties panel.
- Find the Scroll behavior section and choose an option in the Content scrolling dropdown:
- No scroll: The content doesn’t move.
- Horizontal: Users can swipe or scroll left and right.
- Vertical: Users can swipe or scroll up and down.
- Both ways: Users can move in any direction.
- Fix elements in place while scrolling:
- Keep specific objects in place while the rest of the screen scrolls.
- Steps to apply:
- Select an object, group, or component inside a screen or container with scrolling enabled.
- Open the Prototype tab in the right properties panel.
- Toggle ON/OFF to fix the element’s position so it stays in place when users scroll.
Set up your Presentation flow
Choose a Home screen to start your presentation
To set a screen as a Home screen, or the starting point when you present the app flow, simply select that screen and click “Start from here” button.
You can change the Home screen to any screen you want by following the above steps, as well.
Select Device frame
To set prototype device, turn on the device toggle in the prototype panel. Visily will automatically detect the screen type to show your design in a suitable device. Currently, Visily offers two types of devices: Mobile and Laptop.
When you click to present the prototype, you’ll see the device frame when you play your presentation.
Present your prototype
Once you’re ready to present your prototype, simply “Present” to enter Presentation mode in either of these places:
- On the right side of the top bar.
- In the Prototype side panel.
For further information on how to present your prototype, learn more here.
