Gestures let you define what should happen when users interact with your prototype via the mouse, or finger on touch enabled devices. To add a gesture, select an element and click the ➕  plus button in the Actions section of the properties panel, then choose a gesture from the dropdown provided. Gestures can be added to hotspots, images, rectangles, ovals, text, components and containers. Gestures can not yet be added to groups.

Multiple gestures

You can add multiple gestures to a single hotspot or other element. Combine Swipe Left and Swipe Right to create carousels and pagination on mobile, or combine Mouse Over, Mouse Out and Click or Tap for hover effects on buttons. The only combination that is not currently supported is Click or Tap + Double-Click or Tap, in this situation only the Click or Tap event will trigger.

Hovers

Hover effects can be achieved by using a combination of Mouse Over and Mouse Out events. To create hover effects for buttons we recommend making the button a component and setting up the hover state as another page in the component. Other button states like 'down' or 'active' states can be created using the same approach.

Downloadable sample prototype: Button with hover and click behaviour

Swipes

Choose from the range of directions available to add a swipe gesture to the hotspot or element you have selected. When you add a swipe gesture the swipe distance will be automatically set to match the dimensions of the element you have selected. You can adjust this distance to make elements move faster or slower relative to speed the user performs the swipe gesture.

If the swipe gesture is finished after the user’s finger (or mouse) has travelled at least half of the swipe distance, then the gesture is treated as triggered, and any motion associated with the gesture will complete. If the swipe gesture  is finished before it has travelled half of the swipe distance, then the gesture is treated as having not been triggered, and any motion associated with the gesture will rewind to its starting point.

Downloadable sample prototype: Photo gallery with swipe gestures
 

Next → Animated transitions

Related articles:


Did this answer your question?