Overlay with responsive size depending on the browser window

Forum|Forum|2 years ago
June 28, 2024
14 replies
3405 views

I am trying to build a prototype where the size of the overlay depends on the size of the window. There is a set of overlays. On click of the button I open overlay on the side of the screen

and the height of the overlay needs to follow the height of the window.

First image looks good. The overlay in the second needs to adjust.
HOW?

Ask the community

This topic has been closed for replies.

Best answer by Alexei

I found a simple solution:

modal window needs to be placed on the page(s) and hidden;
using variable visibility can be toggled with links/buttons;
the property of the modal window responsive adjustment can be set using Constraints

djv

Community Support

Hey @Alexei, thanks for reaching out!

It’s not currently possible to create a responsive overlay. Instead, you’ll want to create different overlay sizes to correctly fit the different window sizes. There’s no way to make the overlay responsive or auto-adjust.

AlexeiAuthor

New Participant

Is there a way to measure a window resolution in prototype?

Peter_Uithoven

I’ve proposed a solution as an idea:

Please upvote.

Jouni_Koivuviita

I just bumped into this limitation as well. The responsive preview mode is really nice, but this limitation kills it for my use case.

Luke34

Same problem. Been fighting this on my own for about two hours believing it must be possible, given some of the responsive capabilities in Figma, and other instances that can maintain top and bottom distances from boundairies, etc. Finally gave up hacking and came here to search for the ‘answer’… and this thread is it. Once again, Figma failng at basic common sense ui requirements. Like so many other basic needs it cant do. How did this tool become the darling of businesses, it so handicapped. And now to get a job, you’re expected to be able to use this? Why ? Do I have to know how to use Figma to make things NOT work?