Manual Overlay is not working

Yep, I’m having the same trouble. Manual overlays just stopped working today on a prototype that was working fine yesterday.

As you say, if I use any of the pre-defined options like ‘centered’ or ‘top left’ it works fine, but as soon as I switch to ‘manual’ the overlay disappears.

Hey both - I’m sorry this is a late reply, but I wanted to check and see if you were still having issues with overlays.

If you are, I just want to check a couple of things:

Are you seeing this on multiple files? If just on one, can you try duplicating it and seeing if the manual overlays are still not appearing as expected?

Is this traveling across both the desktop app and web version of Figma?

Thanks for your patience 🙏🏼

Hello, I’ve been having a similar issue as OP.

Accordingly, what I did is that I duplicated my current Figma file (the one with the problem), and then tried to do the manual overlay option again when prototyping, on the new file.

Specifically, I set the overlay to pop open with custom positioning when an “on click” event occurs.

The overlay now pops up when the button I rigged with the behavior/action is clicked.

The issue I’m having now is that the overlay doesn’t pop up where I positioned it manually.

For example say I position the overlay manually near center, the overlay opens up left of center.

Can you share a link to the file?

same issue here

​@Leni Leng ,

I tested on my end but it seems to be working fine for me.

Could you please provide more details about the issue you're experiencing? Also, could you share the link and grant access to support-share@figma.com? Rest assured, this won't affect your billing.

Thanks,
Toku

The problem you are having is happening because the manual placement happens ONLY in relation to the original component, not the copy of a component.

How it happens

Let’s say you have 1 component that is off the frame. You create a copy to place on your frame, where you want it on the page.

Now you want an overlay to appear when that component is clicked and you want to manually place it. You select the original component and direct it to the overlay component and select manual placement. After that, you drag the manual placement onto your frame where you want it to appear. UH OH. It isn’t working? It’s either not showing up at all, or it’s not correctly placed! Why not?

It is appearing at the X/Y coordinates you placed it at relative to the component you are using to enable its appearance. Because the original component is off the page and you placed the manual position ON the page, there is a massive gap between the two.

The copy of the original component on your page, when pressed, will spawn the overlay at the same relative position, this time relative to itself. It is a child, looking at its parent for guidance and will copy it exactly. “My parent placed the manual overlay 200px right and 400px up above itself, so I will too”. 

How to fix it

You have 2 choices. 

       1. Place the overlay at the correct relative position to the original component that enables it (this is hard if the correct placement isn’t directly on top or somehow aligned with the component)

​​​​​​​

2. Make the overlay appear directly as a result of clicking the copy(child) of the component, not the original (parent). Then it will appear relative to the child you have placed on your page only, letting you more easily place the manual overlay where you want it to appear on the page. The disadvantage here is that you’d have to repeat the connection for each child, as the behaviour isn’t part of the parent. This is fine for unique overlays.

Thank you! This addresses the the issue I was experiencing. It was so confusing.