Adding fixed elements to prototypes in InVision V7
  • 24 Jan 2023
  • 1 Minute to read
  • Dark
    Light

Adding fixed elements to prototypes in InVision V7

  • Dark
    Light

Article Summary

Fixed headers and footers

Adding subtle transparency to things like fixed navigation goes a long way in raising the bar of fidelity and realism in your prototypes.

You can set fixed headers and footers on mobile and desktop prototypes. While viewing the screen in Build mode, you'll notice Fixed Header and Fixed Footer sliders near the edges of the screen. Simply drag the slider control icon (invision-v7-fixed-header-slider.png) to define the area that will remain locked in place while the rest of the screen scrolls.

Fixed headers and footers are limited to 45% of the image height to ensure that the prototype is still scrollable after adding fixed headers or footers.

invision-v7-create-fixed-header.gif

Fixed elements

If you want an element—such as a button or perhaps a Contact modal, or other important elements—to float on top of your design as you scroll, you can create a fixed element using the fixed headers and footers described above. Fixed sidebars are not present at this time, but the functionality is being considered within a future release.

To create a fixed element:

  1. Open your design file and add extra transparent space to the bottom of the design.
    Note: Be sure to leave room for approximately 20px of margin to the right and bottom of where you will place the fixed element.
  2. Drop your button or another fixed element into the transparent space.
  3. Export your screen as a PNG, so the file will maintain the transparent space (rather than fill the space with a color, like a JPG or other image file would).
  4. Upload it to your prototype in InVision V7.
  5. Open Build mode and mark that transparent area at the bottom of your prototype screen as a fixed footer or header.

Was this article helpful?