Skip to main content
Solved

Solution for outline with objects with absolute positioning

  • January 31, 2023
  • 3 replies
  • 529 views

Dener_Patrick

Hi Community,
I’m designing a component using the new Figma properties of boolean etc.
I came across a problem that I’m having trouble solving, not sure if there is a way to do it.

Context:
I want to have a variant with an outline, and if I leave dot=true it will show the outline, but when using the absolute position option the content is not adapted.

I sketched out the scenarios, in option one it would be the ideal model, in option 2 it could be a palliative.

Figma2

Best answer by tank666

Create an object of the shape you need using boolean union operation and wrap it in a frame. Set this frame to an absolute position. Also set the correct constraints and apply the boolean property to the object in the union.

View original

3 replies

tank666
  • 4859 replies
  • Answer
  • January 31, 2023

Create an object of the shape you need using boolean union operation and wrap it in a frame. Set this frame to an absolute position. Also set the correct constraints and apply the boolean property to the object in the union.


Dener_Patrick

Hi!
Thanks for the feedback, see the result.
Do you recommend any layered optimization etc?
Thanks!


tank666
  • 4859 replies
  • February 1, 2023

I don’t know what other recommendations can be given when you created a component according to my example. I can only suggest considering the possibility of making separate shape components (rounded, squared, etc.), inserting an instance of one of them into a component with an icon. This way you will reduce the number of variants of the component with the icon, because you have excluded the variants of the other shape.

In general, you need to independently consider the various methods and choose the best ones for you.


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