Figma Prototype Challenge Day 5: Nested interactive components + Inheritance

Redesigning navigation with floating actions

Overview of the components used in this prototype

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

The prototype shows an app meant for a technical user, for example a technician, an electrical engineer or vibration analyst:

• The first screen, Home page, shows an overview of the whole App, with simple KPI stacked with numerals and semantic icons. You can also see an image with icons indicating the status of different parts of the engine.
• The second screen, Tasks page, shows a control panel with progression tiles indicating the status of different tasks, the person assigned to do them and the priority.
• The third screen, Assets page, shows a detailed screen focus on the assets tracked by the sensors. Inside the card you can see a picture of the asset with details like the location or type of asset.
• The fourth screen, Dashboard page, shows the main section of Analysis, focused on Data Visualisation.

1. Navigation across different screens. 2. After clicking on the Interactive Component attached to “+” button, you can see three actions buttons appearing. The Actions buttons are interactive, you can see the action label once you click on them, and a “x” button is displayed in case you want to close the label.

This prototype has a different approach when it comes to screens interactions. We have redesigned the navigation from previous challenges, and as you can see in the overview picture, the navigation component has icons connected to the screens, instead of recreating the connections on each screen.

You can also see that we used nested interactive components in the navigation, like adding hover effect to Open and Close button. The actions buttons are also built as interactive components, with hover and pressed effects.

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