Figma Prototype Challenge Day 1: Smart animate

Expand/collapse transitions

This is the first 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!

Following the instructions given by Figma team, this is the proposal we as relayr Product Design team collaboratively created, using our Design System and a concept focused on the industrial IoT domain.

Here you can see a dashboard for a technical user — a technician, an electrical engineer, a vibration analyst etc. Our user can check and review events — health states of different components of a machine (it’s called asset here) that transmits data using sensors to our software.

In the prototype you can see two expand/collapse transitions, one is produced by clicking on an expandable accordion, and the other — by clicking on the hamburger menu, generating an animation between two different screens.

If you would like to know how to create such smooth transitions, comment on this article and we can consider creating interaction tutorials!