Skip to main content

It’s really cool how Figma’s prototypes since recently support a responsive mode, but sadly there doesn’t seem to be a way to make overlays responsive. Their size isn’t adapted to the frame. Also see: Overlay with responsive size depending on the browser window

While I understand it would be hard for Figma to know how to adapt the overlay size automatically it might be interesting to add some explicit position options for this? Like



  • Fill right (Position on the right, fill available space vertically)

  • Fill left (Position on the left, fill available space vertically)

  • Fill screen (here we’d be able to manage the position logic ourselves)


Screenshot from 2024-07-08 13.26.53@2x


When you want your overlay to fill the screen one workaround might be to make it super tall, but, when you want to enable scrolling this doesn’t work, the scrollable area would not adapt.


One alternative to the overlay settings might be to expose the prototype width+height in the width height settings, possibly by making it available as variables. But I assume that would be less intuitive.

My work around so far has been:



  • Make the overlays super tall, non scrollable

  • Put it’s content in a scrollable wrapper with a height like 400


This way people can scroll more further than they would normally be able to, content that fits in the screen still scrolls, but at least everything is available.


The other more complex solution is to add a component in the frame, overlayed by using absolute positioning and then controlling it’s visibility with a variable. But if you have a lot of very different overlays that will probably get messy.

Reply


Terms & ConditionsCookie settings