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

Forum|Forum|5 years ago
April 28, 2021
21 replies
15249 views

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

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!
Tom

Ask the community

This topic has been closed for replies.

Show previous replies

QuintinUXForge

Hi folks. Just wanted to give a big old + to this thread here. (sorry, deleted my last post as I couldn’t find an “edit” button).

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! 😃

Or so I thought. Until I opened up one of my nice drawer overlays. 😦

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)

Brian_Saunders

New Participant

I can empathize with the problem you described in the latest post because I do similar overlays, however I still prefer to add the status bar into screens myself, instead of Figma automatically adding it. I want to be able to customize the time shown and state of the status bar, and be able to configure these things per screen. Figma would maybe need to make the status bar configuration customizable on every single prototype screen, and also include a way to show it in exports. I do remember how Invision used to handle this automatically, and even then it was my preference to include the status bar manually.

QuintinUXForge

Got it. How do you accommodate for the status bar needing to float or be “sticky” when scrolling, Brian?

Brian_Saunders1

New Participant

You can use the “Fix position when scrolling” checkbox for that. Make sure you set the constraints to top.

QuintinUXForge

Thanks! I’m aware of that. The way I had it was to have the status bar in my navigation component, but because it’s in a component the “Fix position when scrolling” option isn’t available.

I could technically have instances pasted onto the page frames above the navigation. A bit inelegant but it will do the job!

RobS

Just bumping this up. Especially helpful for website design.

Pipa

Glad to see I’m not the only one having this issue. A bit frustrating designing so many frames and finally when you see the prototype running, the notch covers all the headers. Really hope the Figma team would come up with a solution!