Hi, all! I’m having a bit of trouble with this interactive component and I’m hoping you can help.
Quick backstory: since I saw that Figma changed the permissions on viewing comments in present mode (now that you must be logged in just to view them), I’ve been needing to find a new way to explain design decisions to clients in this view. I cannot feasibly ask all of them to sign up for accounts, cannot always be around as they spread the link internally, and it would be inconvenient to have them watch a video every time. I don’t need them to reply, just know why I made a certain decision.
So instead, I thought to use the new interactive components to create “Highlights” or “Tour Points,” similar to what Invision does. I created an animated, pulsing dot and an auto-layout tooltip and combined them together to make the highlight. In present mode, when the mouse enters the dot, it will pause the pulse and show the tooltip. Then on mouse leave, the pulse resumes and the tooltip hides.
You can view the prototype here: https://www.figma.com/proto/eVKBNHBVPlBfXqvCwAV0XU/Highlights?node-id=1%3A93&scaling=min-zoom&page-id=0%3A1
And see how it was built here:
Everything works great, but then I thought it might be a little distracting to stakeholders who want to see the design without the dots. I attempted to added in the ability to hide the dots simply by hitting the ‘H’ key. First tried adding in additional variants to the highlight component itself, setting each one to a 0% opacity version of themselves. Went into present mode, and saw that when I hit ‘H,’ only one dot would hide while the others remained visible. Then I tried the current version where I took an instance of the pulsing dot, made an interactive component with it to show/hide on ‘H’ key press, and then swapped out the pulsing dot in the highlight with the new highlight dot. The assumption was if a key press only works in one situation, maybe it’ll work in the master and apply to its instances. But I’m still facing the same problem–only one dot will hide. Try it for yourself in the prototype above.
I’m hoping there’s something that I’m missing where it will show/hide all instances in present mode at the same time. If there is, or if you have another solutions, I’d love to hear about it.
Thanks, community!