Figma Prototype Challenge Day 3: Interactive components
Hover, pressed and focus states
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.
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!