Figma Prototype Challenge Day 2: Smart animate matching layers

Slide transitions

One of the vibration trends from Analysis view of the prototype

This is the second 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 with 3 different screens meant for a technical user, for example a technician, an electrical engineer or vibration analyst:

• The Events screen was already explained in our previous article.
• The Analysis screen shows our user the graphs depicting how vibration of different components of a machine changes over time. Thanks to colour coding, this screen also allows a user to immediately identify 2 other trends in a form of KPIs — the number of recent breakdowns and the number of maintenance events.
• The Maintenance screen is a log where technicians can upload their reports of maintenance they performed.

1. First transition happens when a user changes an active tab in the screen. 2. Second transition happens when a user changes an active menu item.

In the prototype you can see two transitions, the first one is happening in Tabs and the other one is visible once you are in the main menu. In both cases, the transition occurs while changing an active item on the screen.

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