Figma Prototype Challenge Day 8: Drag to Delete

Completing maintenance tasks

Overview of the prototype showcasing “Drag to Delete” interaction. Background image by Curioso Photography, Pexels.

Hooray, we’re half way through! This is the 8th 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 in all previous prototypes, we are displaying 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.

In this prototype we are showing how this technical user can access a particular machine from a map to check related maintenance tasks. You can see how the “Drag to Delete” tool can be used to replicate a common swiping gesture pattern for marking a task as done or deleting it from the list.

1. Tapping on the error icon to see pending tasks. 2. Dragging to delete the tasks that were completed.

The base of this prototype is a list with auto-layout as an interactive component, where each item can be removed with a delay effect:

• First, a user can observe a background bird-view image of a factory with “health icons” located in different areas and buildings.
• Second, after tapping on one of the “error icons”, a user can access the screen with multiple maintenance tasks, related to one of the machines.
• Third, once the task is complete, a user can delete it from the list by swiping left.

As usual, if you would like to know how to create interactions like this, let us know in the comments!