Figma Prototype Challenge Day 9: After Delay

Loading spinner

Overview of the prototype based on the use of “After Delay” interaction. Images by Pexels.

After a long break we’re back to the game with our prototype 9 as a part of the Figma Prototype Challenge! A reminder, read here about our reasons to participate, our process and find the links to other prototypes!

As usual, 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 show a spinner that appears when a user is navigating to a screen with a different device and this screen needs to load. We can see how the “After Delay” transition can be used to replicate a common swiping gesture pattern for loading a new screen.

1. A user is switching to a next screen. 2. You can see an image is loading with the spinner on top of it. Images by Pexels.

This prototype consists of two screens with background images of industrial devices and one spinner. The effect is imitating the transition from a blurry image to a fully-loaded focused image.

A couple of words about the spinner design:

• Since this prototype is meant for a technical user that is specialised in the analysis of vibration, the spinner animation is imitating sound waves.
• The transition is done using a new property option “Bouncy” when selecting “Smart Animate”.

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