How to use the union selection with AutoLayout

[Guy_Cohen]

Hello, Figma community,

I’m trying to create a nice tooltip with a triangle on the middle-upper side. To do that, I used these steps:

1. wrote a random text
2. Shift-A for auto layout
3. add a background, rounded corners, a nice stroke

Now I’m stuck
I wanted to add a triangle to the frame and use the union selection to have a nice point effect on my tooltip, but the triangle gets the auto layout properties of that frame, and it can’t be achieved.

What am I missing here? What’s the right process to achieve that?

I appreciate any help you can provide.

Guy

[Gleb]

I just wrote a tweet about it, check out the file I linked in it to see some examples of tooltips with Auto Layout:

Gleb Sabirzyanov

[Guy_Cohen]

Thanks, @Gleb, much appreciated but it’s very very complicated, I’m 3 years with Figma now and it’s still too complicated for me, lost you when you said the inner frame will break and I need to group it, why? Mine didn’t break, or am I missing the meaning of break frame? I’ll check it later tonight and I’ll try to dig dipper
Thank you as always!

[Gleb]

When did I say that? O_o I only sent you a link to the file where you can find examples and copy them to your file.

[Guy_Cohen]

I was referring to your file explanation, the how-to zero-frame explanation.
This is the solution to achieve it, no?

[Gleb]

Ah, sorry, yes. I’m not used to anyone actually reading those explanations, usually people just copy-paste stuff. You can skip this part and just copy-paste the zero-height frame. And you don’t need a 0x0 frame for this, only a 0-height one. Just updated the file to make it more clear. Also watch this video if you need more clarity:

Pushing Figma to its limits - Chudo, Andrei, Gleb, Vitalii, Shuaiqi (Config 2021)

By “broken” I mean the frame is glitched, it doesn’t have coordinates and you can’t move it. You can use other simpler methods to do it, outlined in the right column (or just copy paste the ready-made zero-frame in case you ever need it).

Also you don’t need to use zero-frames here at all, but you would need to change margins in auto layout to correct for the frame size you choose (e.g if you use 2px high frame at the bottom, you would need to set the bottom margin 2px less than the top one so the text is centered).