How would you prototype fixed header, footer, and scrollable content?

WHAT THIS TESTS: This question tests whether you know how to use Figma's native prototype scrolling features rather than relying on workarounds. Interviewers want to see that you understand the relationship between frame bounds, overflow behavior, clip content, and scroll-position properties. At the senior level, they also care if you can articulate why native scrolling preserves momentum and position across screen transitions, which is critical for realistic usability testing.

A GOOD ANSWER COVERS: First, frame setup: you need a single parent frame set to your device dimensions, with a child content layer that extends beyond the bottom edge of that parent. Second, masking: you must enable Clip content on the parent frame so that anything outside its bounds is hidden and can be revealed by scrolling. Third, overflow direction: in the Prototype panel, set the parent frame's overflow behavior to vertical scrolling so the prototype recognizes the gesture. Fourth, fixed chrome: select the header layer and the footer layer individually and change their scroll position from Scroll with parent to Fix position when scrolling, which pins them to the viewport while the middle content moves. Fifth, content behavior: confirm that the middle content layer is set to Scroll with parent so it travels normally.

COMMON WRONG ANSWERS: A major red flag is suggesting multiple frames connected by drag interactions to fake scrolling, which destroys scroll momentum and makes the prototype feel broken. Another mistake is forgetting Clip content, which causes the overflowing content to remain visible outside the frame instead of being masked. Some candidates also confuse Fix position with Stick to top; stick is for elements that scroll until they hit the top and then freeze, which is wrong for a persistent footer. Finally, grouping the header, content, and footer into one flattened layer before applying overflow will break the scroll behavior entirely.

LIKELY FOLLOW-UPS: The interviewer might ask how you would preserve scroll position when navigating to a detail screen and back, which uses Figma's preserve scroll option on the interaction. They could also ask how to handle horizontal scrolling for a carousel inside the same screen, which requires a nested frame with its own overflow set to horizontal while the parent remains vertical. Another follow-up is accessibility or handoff: how do you communicate fixed positioning to developers, or how do you handle safe areas on mobile.

ONE CONCRETE EXAMPLE: Imagine an iPhone frame at 390 by 844 points. Inside it, place a header at y equals zero, a footer at y equals 784, and a content frame starting at y equals 44 with a height of 1200. Enable Clip content on the iPhone frame. Set the prototype overflow on the iPhone frame to vertical scrolling. Select the header and set its scroll position to Fix position when scrolling; do the same for the footer. Leave the content frame on Scroll with parent. When you present the prototype, the header and footer stay pinned while the long content scrolls smoothly between them.