Fixed background in prototyping

Ask the community
8

Because Timj didn’t explain it, I’ll explain for future readers:

  1. Create a frame the size of your screen. This is your master.
  2. Create a second frame the size of your screen nested inside the first. This is for your scrolling content. Fill it with overflowing content.
  3. Create a third frame the size of your screen also nested inside the first. This is for your static background. Place a background in it. Make sure the third frame is under the second in the Layer panel.

Next set scrolling behavior for each frame under Prototype settings.

  1. Set Overflow scrolling to No scrolling for the master frame.
  2. Set Overflow scrolling to Vertical for the second frame (content).
  3. Set Overflow scrolling to No scrolling for the third frame (background).

If you have static UI elements that need to remain fixed on top of the scrolling content, just add another frame of content above it in the layers panel and set the overflow scrolling to no scrolling.

37 Likes