Skip to main content

Hi all,


So I’m hoping to be able to create a component animation which will “highlight” a particular line in this transit-map style layout - so I created a variant in which the other lines all become grey.


The effect works - but the hover is activating when I hover over the whole bounding box area of the red line, rather than when I just hover over the line.


This is obviously happening because the connection is made to the overall bounding area box of where the red line is.


Is it possible to make the hover only work over the thinner line/object? I guess that it might not be possible given how objects/lines/strokes are represented in Figma. But maybe there’s a workaround, if someone much smarter than me could enlighten me??


Thank you all in advance.


Screenshot 2024-10-28 at 17.11.13

Hi there,


Thanks for reaching out. I tested it on my end with a sample, and it seems I was able to do it by zooming in.



My sample is not so clean but I hope it helps! Please let me know how that works.


Thanks,

Toku

Hi Toku, thank you for taking the time to try and respond to this.


I have attempted what you did and it is still only connecting to the bounding box.


I think it may have worked for you because you did it on a straight line (so the bounding box is effectively the same area as the line itself).


Could I please trouble you to try this with one of the lines that is not just straight?


(Just typing this, I think I have thought of a hack I could do by dividing all the lines into straight lines - but this would be a very long workaround!)


Thank you in advance

Thanks for getting back to me. Would you be able to share the file link with access to support-share@figma.com? It won’t affect your billing so please add it as an Editor. Hope to investigate it!


Thanks,

Toku

Hi Toku,


I have added access for the email address you provided.


I also tried this ‘hack’ I thought would work - by breaking up a compound line (in this case, the red line in my design) into separate straight line segments, and hopefully be able to connect directly to the lines for hover effects.


And in the first screenshot, you will see it attached to this straight line, as the bounding frame/box would be exactly the same area as the line itself.


However, in the second screenshot (post below), you will see I encounter the same as before, whereby the diagonal line segment obviously takes up a large square of bounding frame/box, and therefore, the interactive connection is made to the bounding outline, and so hover effect activates when I hover over the frame/box, rather than when I hover over the line, which I want.


Screenshot 2024-10-29 at 17.30.28


Starting to get the feeling that the way Figma is built, my intended effect is not possible with the prototyping.

Screenshot 2024-10-29 at 17.30.34


Second screenshot showing failed connection of prototype line to shape, only connecting to bounding frame/box instead.

While I’m checked internally, unfortunately, it appears that this is a limitation of the current feature. When an object is rotated, Figma generates a bounding box, as you mentioned. While you can technically create the desired hit area if the line is straight, it becomes difficult when dealing with rotated objects or non-straight connected paths.


I apologize for any confusion earlier. If I find any workaround, I’ll be sure to let you know!

Yes, I thought that the limitations of the feature might prevent me from creating the prototype and interactions exactly as I want to. And please don’t feel the need to apologise – I highly appreciate your taking time to help me find a solution, and offering your expertise, I am very much a beginner with Figma so it’s all a great learning experience for me!


Thank you once again for your assistance and advice!

Reply


Terms & ConditionsCookie settings