Figma Prototype Challenge Day 4: Nested interactive components

Interactive cards and tiles

Overview of components used in this prototype

This is the 4th 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 Analysis screen meant for a technical user, for example a technician, an electrical engineer or vibration analyst. You can read more about this screen in our 2nd article from this series.

1. The card is entirely interactive with nested interactive components. You can see the hover interaction applied to background, button, line chart and data points. 2. After pressing the icon on top right corner of the card you will see the second screen with stacked interactive tiles inside container with autolayout.

Inside this Analysis screen you can see hover effects applied to interactive components nested inside a card. The interaction occurs inside the background of the card, as well as inside the line chart and its data points, changing the hover state of the point, while showing a tooltip over it.

Once you click on the icon located in the top right side of the card, you can see a detailed screen. On that second screen you can find interactive tiles indicating possible errors or components requiring attention nested in a container with autolayout. The interaction allows to show more information about the error and remove it from the list of tiles.

If you would like to know how to create such interactive components effects, comment on this post and we can consider creating interaction tutorials!