Figma Support Forum

Toggle Browser Overlays

  1. I’m building a web app. The issue I have is that the mobile frame options in Figma don’t include the header and footer that browsers have. So when you preview your work, it looks like a native app, not how you’d actually see it when browsing the web on a phone.

I know I can manually add this as a header and footer for every frame for every page of the site I’m designing, but it’s kind of a pain.

Real mobile browsing includes these headers and footers of the browser.
2.

3: Would like to see an option to turn on this kind of overlay for frames, so I can easily design for mobile browsing, and not just for native apps.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Lately, I have been designing and prototyping mobile websites and applications. A dominant problem I run into is that I need to add browsers frames to my design frames whenever I design for mobile websites to provide the proper context.

This workaround works quite well for previewing the prototype in prototype mode, but whenever I want to walk through designs in design mode, the frames are lying on top of the content of the page, which needs to be reviewed.

An excellent solution would be a toggle in the prototype mode to add or remove browsers frames. iOS designers would have Safari, Andriod has Chrome, etc.

By allowing users to toggle only for prototype use, the actual (needed) content within design mode can be more easily reviewed and is always accessible.

1 Like

When I use protype in the phone I always had to add a design of the browser in my UI to make it more real. For a solution I suggest to add a checkbox in the prototype section that said “Add Browser to your prototype”

Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?

1 Like