Figma Prototype Challenge Day 7: On Drag

Navigation using horizontal and vertical scroll

Overview of the prototype base on the use of “On drag” interaction. IMAGE CREDITS: photos downloaded from Pexels: Company — Curioso Photography, Engine — Hebert Santo, Fan 1 — Pixabay, Fan 2 — Miguel Á. Padriñán

This is the 7th out of 15 prototypes we are aiming to create as a part of the Figma Prototype Challenge. Read here about our reasons to participate, our process and find the links to other prototypes!

As usual the prototype shows an app meant for a technical user who is in charge of monitoring or analysing performance of a machine that transmits data using sensors to our software.

Here you can see a different concept for navigation in the app. In this prototype we used the On Drag interaction. It replicates the transition triggered when scrolling horizontally and vertically on different screens, which creates different effects in combination with Smart Animate or Push interactions.

1. Browse different machines tracked by dragging horizontally. 2. From Motor you can discover more detailed info by dragging up. 3. Horizontal scroll for different data cards.

First, a user can see a big image of a factory from above with “health icons” located in different areas and buildings.

Then, by dragging horizontally a user can browse different machines, represented by large images. Each screen informs a user about the health status of that particular machine. On each machine they can drag the image up (or scroll down) to reveal different measurements tracked by the system (vibration and sound).

Every measurement has three cards, that can be swiped horizontally to display different data visualisations that allow a user to better interpret the machine performance.

If you would like to know how to create smooth animations with interactive components, let us know in the comments!