Figma Prototype Challenge Day 6: Interactive components + Auto-layout

Interactive tiles with asset events

Overview of the prototype base on Interactive Components inside Auto Layout context.

This is the 6th 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.

This prototype was entirely built using the auto-layout tool, showing how the auto-layout reacts when:

• size of a container with content change
• part of content disappears [Dismiss, Delete … ].

1. Interactive component in tiles appearing after clicking on a Turbine widget. Once you click on “details”, you can see how the tile expands and shows more information. 2. Once you click on Delete icon, you can notice how the first tile disappears.

The first screen shows the analysis dashboard with KPIs in different styles: two widgets with numbers and status indicators and two widget with charts.

In the second screen a user can access all the events that need attention by clicking on the open icon in the chart widget. In the top of the screen you can see a header displaying the total number of events.

A user can perform different actions on the list item:

• Delete the item
• Expand the item in order to display more information without leaving the screen.

When a user deletes an event, it will disappear from the list.

If you would like to know how to create such smooth animations with interactive components effects, comment on this post and we can consider creating interactive tutorials.