I have an overlay that pops up and sticks to the bottom of the window as a small footer. The problem that it seems blocks all interactivity until it’s closed. I mean interactivity not just beneath it but on the whole page. Am I getting this right? Is it how it supposed to work? Is there any way to fix it?
Solved
Overlay blocks interactivity?
Best answer by Klesus
You don’t need to make considerations what screen the client is using (for the purpose of objects with fixed positioning).
First of all, you should be designing with one viewport in mind. You can’t design for a 1920x1080 and a 4k monitor at the same time, not in the sense that you are thinking of. Figma is vector based so it can scale it up or down to fit the clients display. What matters most is that the form factor is the same, i.e. is it 16:9 or 4:3 for desktop or 9:16 portrait for iPhone?
Second, when making an object fixed, it is rendered on screen as an offset depending on its constraints regardless of the screen size. If a fixed object is positioned 500px from the bottom and constraints set to bottom, it will always render on the viewport 500px from the bottom, regardless if the frame is 1080px or 8640px tall.
This topic has been closed for comments
Overlays in Figma are basically modals. You’ll either have to make it its own view, part of the flow or if possible you might do with a component variant.
Sorry, I don’t understand what you’re saying.
I used overlay to have a sticky footer at the bottom of the screen. I am building a website, not an app. Since I don’t know what monitor the client will use, I need to have a prototype as flexible as possible. Overlay is the only element I found that could stick to the bottom of the screen. The problem that it blocks every interactive element on the screen. I need to allow somehow the interactivity or to find the way to stick an element to the bottom of the screen.
No I’m sorry for not explaining more clearly.
Modals are popup-windows that forces the user to respond, halting all other interactions until the modal window has been dealt with. What I’m saying is you can’t use overlays if you want the user to be able to interact with the rest of the app while the overlay is opened.
The most likely route you can take is make it a separate view and part of the flow. I.e. instead of having the interaction be “On click > Open overlay” change it to “On click > Navigate to”. So you would have a view, possibly several, for when the “overlay” is opened, and then another view for when you close it. I know this probably requires a lot of work just to make an overlay like this, so that’s why you should use interactive components instead if possible, but if that’s even possible depends on your project.
Thanks for the reply.
Now I see the limitation. My problem however is to have something as sticky element at the bottom of the screen (I am building website, not an app). Imagine you have a second header but at the bottom. The problem is the overlay is the only element I found that could be set at the bottom of the screen. When I run prototype I want this element to be at the bottom regardless of how big the window is. If I use fixed position I will have to define where the bottom of the screen is and it’s impossible since people could see my prototype on HD monitor or 5k monitor. I hope I clarified my struggle better this time.
1 person likes this
You don’t need to make considerations what screen the client is using (for the purpose of objects with fixed positioning).
First of all, you should be designing with one viewport in mind. You can’t design for a 1920x1080 and a 4k monitor at the same time, not in the sense that you are thinking of. Figma is vector based so it can scale it up or down to fit the clients display. What matters most is that the form factor is the same, i.e. is it 16:9 or 4:3 for desktop or 9:16 portrait for iPhone?
Second, when making an object fixed, it is rendered on screen as an offset depending on its constraints regardless of the screen size. If a fixed object is positioned 500px from the bottom and constraints set to bottom, it will always render on the viewport 500px from the bottom, regardless if the frame is 1080px or 8640px tall.
that’s what solved my struggle! Thanks. I didn’t think of these constraints in this way.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.