Show nested interactions in dev mode

Hello everyone.

Dev mode is great and it really helps to decrease hand-off pain.

I found just one issue: interactions. It would be even greater if under the “interaction” section in dev mode, I could see all nested interactions of my selection.

I share a concrete example: tooltips.
To put it simple, let’s say I have a card component with an heading which have an edit icon button and a star icon button on the right side. I’d like to put a tooltip on the edit button saying just “edit” and a tooltip on the star saying “add to favorites”. I don’t want to make a variant for each tooltip, I want to use prototypes (open overlay while hovering), so that every card just has the tooltips I need.

My fear is that the interaction gets lost and my dev colleague won’t find it because he has to click inside the component until reaching that particular button which have the interaction.

It would be a charm if she could see the interaction of the nested layer right on the parent component and be aware of of all page interactions right when she selects the frame.

What do you think?

1 Like