Skip to main content
Solved

Negative radius on rectangle? or any solution to give desired result

  • September 18, 2023
  • 7 replies
  • 2160 views

Nikolas_Smith

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)

View original

7 replies

Gayani_S
Figmate
  • Community Support
  • 2072 replies
  • September 19, 2023

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


Fernando_Lins
  • New Participant
  • 44 replies
  • September 19, 2023

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.


Nikolas_Smith
  • Author
  • New Participant
  • 10 replies
  • September 20, 2023

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.


Nikolas_Smith
  • Author
  • New Participant
  • 10 replies
  • September 20, 2023

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.


Fernando_Lins
  • New Participant
  • 44 replies
  • Answer
  • September 20, 2023

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)


Nikolas_Smith
  • Author
  • New Participant
  • 10 replies
  • September 20, 2023

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!


ynckzru
  • New Member
  • 1 reply
  • February 15, 2025
Fernando_Lins wrote:

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings