Figma Support Forum

How do you accommodate the notch on the iPhone X in your designs?

Hey guys! This is my first time posting on the Figma community, pleasure to meet you all! :blush:

So my question is…

If you’re designing a product for a web browser and you want to test it on a phone, how do you personally accommodate for the phones notch and the browser header and footer that would usually be on the page?

When I load my design on a template or on my iPhone, the content goes behind the notch and I’m not sure of the most efficient way to design around this.

  • Is it as simple as ading in fake browser headers and footers into every design?
  • If so, would you submit designs to developers with these included in, or remove them at the end?

Thanks in advance!

I’m gonna bump this because I’m currently experiencing this issue and wondering if anybody has any insights into how they handle it, cause it’s a bit of a faff!

Something I was thinking was, it’d be great if Figma did a Prototype Frame of an iPhone with a notch, but with the option of including Safari’s address bar and controls at the bottom.

Alternatively, should I put my design in a frame and then place that on another frame that has the header and footer in?!

Thanks for reading! Feel like I’m overthinking this haha. :see_no_evil:

I have this “notch” problem… Maybe I’m doing it wrong…
I want to present my mobile prototype on iPhone X, my designs include status bar – but on the actual device (prototype saved to Home Screen) it shows this additional top margin and everything is displayed below the notch…

Glad to see I’m not alone haha!

1 Like

I’m pretty new to Figma so maybe I missed a “prototype top margin” setting that is somewhere out there… If not, I think my workaround would be duplicating my prototype page, removing the notch+status bar from my designs and pushing the content 46px up… Tried that for one of the screens, kind of works out – the only disadvantage is the white margin at the top & no status bar.