Trouble with overlay background, effects, Nav and Status bars

Ask the community
1

This year I am learning Figma as I’ve been unable to get work with my UX-research+physical product portfolio. The industry wants UX*/UI designers. * User-retention > user experience
I gave up on XD back in 2018 because it couldn’t do basic things that most apps can do.

I Once again find myself greatly discouraged due to not being able to do a few key things that all apps have/can do:

  • Automatically add dominant/ever present OS-Status & Nav bar

  • Overlays that don’t blur Status/NAV BAR when using the “add background behind overlay” feature.

  • Opacity on content in overlays. passthrough and aplha don’t work on shapes, just on an outer-frame/component level which defeats the purpose.

  • The “add background behind overlay” feature covers EVERYTHING, including my DIY status/nav bar. Overlays can’t be part of the same frame as what it’s covering and thus it doesn’t respect the hierarchy.

Why do Figma designers design apps without the OS nav/status bars? instructors omit it in courses and YouTubers omit it in tutorials. But it’s always there in real apps regardless of phone or OS. it’s as integral as a steering wheel and dashboard in a car.

Hope someone can enlighten me on industry standards, as I find it difficult to find solutions when there are more casual users than designers. Democratized design is my jam, but it often amplifies the voices of people who assert themself rather than the reclusive experts.

given that I can’t post more than 1 media file, I’ll had to choose the scenario that blurs out my nav/status bars despite the overlay component being scaled to fit between the two.

I hope people can test out how Opacity, passthrough and background blur doesn’t work with overlays themselves.

image
image468×832 75.3 KB

2

I’m a ux designer. But mainly with figma and xd i find at first they are quite complicated in a way. Especially since you can’t design things in the typical way you would expext. I do want to mention I have seen jobs for UX researchers before, I think maybe it depends on where you live.

Regardless a few things can make your life easier.

Maybe you could try move the nav bar to the top if it isnt already and see if this helps. If all fails you could do the overlay as a component or a seperate artboard. Also if you click for the nav bar to stay fixed while scrolling maybe that will help.

Sorry if this hasnt been helpful, I’ve been using Xd for over two years but figma only a couple of months

3

Hey, thanks for taking the time to reply.
I have tried everything and I’m afraid it’s a fundamental flaw with the software that Opacity/alpha doesn’t carry over when an overlay is active, even if it’s a component.

I also tried being clever by making the Nav bar an overlay, but only 1 overlay can be active at a time and there’s no “always active” flag for overlays, the closest is hove or as you would normally do things, put it in all frames as a static component.

Given that Nav bars are visible at all times I find it crucial to be there for user testing as it makes UI claustrophobic and with subpar whitespace and continuity if left out during the wireframing process.

Do you OS-status/nav bars in your designs?
If not, why?