Hey there, would you mind sharing a copy of your file?

Have you tried “cutting out” the orange dash area from the red dash object with vector boolean operations? You can set it up with a mask and have the orange dash object resize accordingly, if you want it to be responsive.

Fernando,

I tried using the Number 1 tooltip as a mask of the larger dashed object and vice versa to no avail. I have also tried all versions of Boolean group operations with Z indexing swaps and no luck their either. I know there is a way. I’m just not thinking about it the correct way.

AV User Guides - Template.fig (4.2 MB)

I know I still have a LONG way to go with making a better design system etc and getting there bit by bit but it’s tough with…life HA

I am also okay with blowing all work done out of the water as I’m sure that whatever I do to make this work on this variant, needs to be undone on all other variants. I just want to know how to get to the desired outcome.

I downloaded your file and I see the issue(s) now. You are over-doing everything 🙂 You are creating way too many components and relying way too much on auto-layout.

For this kind of design you should use rectangle shapes and frames, and work out their spacing with constraints instead of auto-layout, and use masks to get to the desired result. There are specific cases where auto-layout is encouraged, and this is not one of them.

For your negative radius, you’ll have to use a trick with a rectangle inside a mask, since Figma does not apply strokes to boolean objects that haven’t been flattened - and you need it to not be flat otherwise it won’t be responsive.

Please check the attached file, I have replaced the last variant in your uiTooltipStroke component with one possible solution.

AV User Guides - Template (1).fig (4.2 MB)

Fernando,

😂 😂 thank you so much sir. I was almost positive I was making it more difficult than it needed to be. I also would not have known how to do what you did but I am eternally grateful that you 1)understood and 2) killed it!