Hey everyone,
I’m having an issue where frames nested inside a parent frame don’t respect their constraints when viewing a prototype on a mobile browser (tested on both iOS Safari and Android Chrome).
In the Figma editor everything works perfectly, inner frames resize as expected when the parent frame changes size. But when I share the prototype link and open it on a phone:
-
Child frames inside a parent frame don’t follow their top/bottom/left/right constraints.
It seems like the mobile prototype viewer scales the parent frame as a flat image instead of actually resizing it, so the nested constraints never recalculate. The layout looks fine in the desktop viewer and the Mirror app, the issue only appears in mobile browsers.
Here’s what I’ve already tried:
-
Setting the parent frame to the exact device size (e.g., 390×844 for iPhone 13)
-
Using Auto layout + “Fill container” instead of fixed widths
-
Disabling the “Show device frame” option
-
Testing both “Fit width” and “Fit to screen” scaling modes, and Responsive Mode
No luck so far, constraints on nested frames still get ignored.
Question:
Has anyone found a reliable workaround for keeping nested frame constraints working correctly in prototypes viewed on mobile browsers?
Is this a known limitation or a bug in Figma’s mobile prototype renderer?
Any insight would be appreciated. I’d love to understand if there’s a proper setup or best practice to make constraints work consistently on mobile.
(Environment: Figma desktop; tested prototype on iOS Safari 18.0, Chrome 129, Android Chrome 129)