InVision is the nerve center of all our design efforts at Foundry. It allows us to quickly prototype high level concepts for clients at early stages in a project, collect feedback from stakeholders, perform user tests (with the help of the excellent maze.design), and facilitate easy developer handoff using Inspect. That said, InVision has a few shortcomings that remain unaddressed despite having been requested for years.
Today, we are looking at how to make a sidebar sticky so that it doesn’t move when you scroll the prototype.
An increasingly common pattern, fixed sidebars provide easy navigation for data heavy interfaces without taking up vertical real estate. They also translate well to drawer-style menus on mobile. InVision natively supports fixed headers and footers, but there isn't a way to fix a sidebar element. (And if anyone from InVision is reading, can we please get global fixed header and footer distances please!)
At least, there isn't a way using the InVision interface...
The trick is to set your artboards as transparent and then to set the background for your screens in InVision to an image of the fixed sidebar elements. Here's a look at the Sketch file for this particular prototype. Now for the nitty gritty details:
You are now the proud owner of a prototype with a fixed sidebar. Should you ever need to update the sidebar, just export the image again and upload it as the background image for those same screens.
Now if only I could hack InVision to allow unlimited viewers to use the Inspect feature! Then we’d be in business. Are there any tricks you employ to get InVision (or your prototyping tool of choice) to go the extra mile? Let us know on Twitter.