I think I searched as well as I can but I am not sure what the name of the tooling needed is…
I want my Red dash stroke to follow the Orange dash stroke so that the red rectangle follows the number dash stroke tooltip (hugs inside). The inverse of what is happening in the green tooltip above with the large rectangle surrounding the number tooltip (hugs outside).
Best answer by Fernando_Lins
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)
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!
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)
could you upload the file again, as it must have been deleted from this forum's CDN.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
