Skip to main content

I am building a hi-fi iOS prototype in Figma. Trying to keep things as real as possible. Using the bezels to demo on desktop, for recording video.


Important to be as real as feasible, as the people viewing would be used to seeing hi-fi iOS demos.


So, I am desperately wanting to stop the status bar from pushing in on animated transitions and causing the effect seen in the movie below.




But I also don’t want to remove the status bar and put it back in post (too lazy and then I can’t demo live), nor do tons of wacky magic animation or custom transitions to pull this off (seems like not worth the pain), nor stick to instant transitions (definitely will look fake).


My question: Has anyone figured out how to pull this off in an easy way? Keeping the status bar always fixed when using out-of-the-box prototyping transitions.

Hi there,


Thanks for reaching out. I think you hope to fix the status bar position even when other frames move. If that is the case, you can fix the specific frame by following this article. This article has a video tutorial about how to fix the frame, so I hope it helps! I also attached a sample screenshot of the property from my Figma file.

Fixed-position


Am I understanding the issue you are describing correctly? Please let me know if I’m missing any additional points. I want to make sure I am fully addressing your questions.


Thanks,

Toku

Thanks for the reply, but my question is a bit different.


Your info is great for fixing the status bar on screen. But…


When you transition from screen A to screen B, unless you use an instant transition, in Figma it will always look to the user like the iOS status bar at the top is sliding up over the old one, where in reality what I want is that the status bar never changes on transition. I attached a video of what that looks like in iOS. (See how the red bar stays in place even as you navigate to another screen).




The only method I have found is to use partial overlays for all the screens in the prototype, which is one way but makes it a pain to manage easily.


The only other method is to use Smart animate so the item stays in place. But then the tradeoff is that you can’t use any pre-built transitions.

Is the status bar named the same thing in both frames? Do you have “animate matching layers” checked? is the status bar in a separate frame from the rest of the content? is said status bar frame set to fixed?

Checking “Animate matching layers” was the thing I was looking for. Thanks so much!

Reply


Terms & ConditionsCookie settings