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

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. 🙈

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!

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.

Any idea or solution to this

I would just like to support this as an option and have full empathy for everyone. Without detracting from Figma because its fantastic and we stopped using invision and zeplin for Figmas tools, but invision was great for his in its view options.

Any update on this issue after an year.

Hi team. Any news on this? As mentioned previously being able to have Figma automatically adjust the designs to accomodate for the notch like Invision would be a great addition! Here’s hoping!

I just add the system status bars into all my comps. I treat it like it’s part of the design, and doing it this way helps me account for it in the design process. I never thought it should be any other way, though I’m aware that in invision days they drew it automatically, I didn’t enjoy that approach.

Hi folks. Just wanted to give a big old + to this thread here.

I recently finished a full website design and prototyped everything out nicely, then realised that the iPhone 13 Pro device prototype doesn’t include the status bar… so I included it in my mockup in the header component. Problem solved! Yay! 😃
[Uploading: Screenshot 2022-07-25 at 12.27.22.png…](Screenshot 1)

Or so I thought. Until I opened up one of my nice drawer overlays. 😦
[Uploading: Screenshot 2022-07-25 at 12.27.13.png…](Screenshot 2)

On a real device, the status bar always displays regardless of the app that it’s used in. In some apps (like Safari) it’s on its own opaque background, but on others it’s on a transparent background, but it always takes up space to either side of the notch.

I think that this is a feature that should be baked into Figma’s device settings for the prototype to be close to a real world preview. The status bar should remain visible at all times - currently in my mockup it scrolls along with the rest of the mockup - so surely it would be a question of just updating the image the device prototype uses to include the status bar?

Could we have this added as an option?

Perhaps the following:

• **iPhone 13 Pro - No status bar ** (the current option and the only option)
• iPhone 13 Pro - Status Bar on White (for Safari - I will use this most frequently)
• iPhone 13 Pro - Status bar on Transparent Background (for other applications)

Thanks!