- 24 Jan 2023
- 1 Minute to read
- DarkLight
Adding fixed elements to prototypes in InVision V7
- Updated on 24 Jan 2023
- 1 Minute to read
- DarkLight
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 () to define the area that will remain locked in place while the rest of the screen scrolls.
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:
- 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. - Drop your button or another fixed element into the transparent space.
- 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).
- Upload it to your prototype in InVision V7.
- Open Build mode and mark that transparent area at the bottom of your prototype screen as a fixed footer or header.