Figma Prototype Challenge Day 3: Interactive components

Hover, pressed and focus states

Overview of components used in this prototype

This is the 3rd 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 2 different screens meant for a technical user, for example a technician, an electrical engineer or vibration analyst. You can read more about Events screen in our 1st article from this series, and in the 2nd article you can learn about Maintenance screen.

1. First, you see hover effects over Accordions and Sort button inside the Events screen. 2. Then you see hover/click and focus effect on Calendar input, and hover effect over Cards and Pagination buttons inside the Maintenance screen.

In this prototype you can see hover effects applied to different interactive components — cards, buttons and accordions — inside the Events screen. You can also notice the example of hover, pressed and focus states in the calendar input located inside the Maintenance screen.

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