Design

InVision Hacks: Make that Sidebar Sticky

InVision has fixed headers and fixed footers, but what about sidebars? Trick your prototype with some simple transparency tricks.

Author photo
Jason Spidle
December 10, 2018

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...

Have a look at the live prototype on InVision
Have a look at the live prototype on InVision

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:

  1. Duplicate the sidebar elements you want to designate as fixed into their own artboard.
  2. Set the background color of that artboard to the background color of your screens.
  3. Export that single artboard as a JPG image. You will not be syncing this artboard to InVision. (Protip: add a minus sign before the artboard name to exclude that artboard from sync when using Craft. For example, -fixed-sidebar.).
  4. Hide the sidebar elements you want to designate as fixed in the artboards you are syncing with InVision.
  5. Remove the background color from those same artboards in Sketch. The screens must be transparent for this hack to work.
  6. Sync your screens and then open the prototype in InVision.
  7. Set your the background image to all screens that need a fixed sidebar to the JPG image you exported earlier. After that, be sure to set the alignment of the background image to Fixed.
invision_hacks--background-image.png

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.

Shout out to Great Simple Studio for their excellent UI Kit Administrator, currently available as part of an absurdly cheap bundle. Lovely starting place for admin interfaces.

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.