Design

InVision Hacks: Make that Sidebar Sticky

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

Benke

This is Benke (pronounced ben•kuh). He's a one year old rescue. He's afraid of big bags and loves cuddling on the couch.

- Travis Meyer

Kuri (Maori for dog)

Kuri acts more like a dog than a cat. She once found her way into a drywall resulting in us having to cut through our wall to get her out. She has lived in several countries, and 9 different houses/apartments with me.

- Per Kvanbeck

Flynn or Flynnigan

At the first glance, he may appear a tad dopey, but once you get to know him you see that his charm is that he is a love-able lug that just wants to be a part of the pack and please his humans. Getting up there in years, you will find him asleep in whatever room the rest of his humans are in.

- Leana Stone

Lou and Winnie

This pair of energetic pups love to bark at seemingly nothing. With kids around and a constant need to eat anything that hits the floor, you will often find Lou with food somewhere in his fur or Winnie with the occasional popcorn bag on her head.

- Joe De Jarnett

Nori, Dee, and Janet

Here’s my cool, calm, and collected bunch. This is Nori (a Norfolk Island Pine – left), Dee (a Bird of Paradise – back), and Janet (a Dracaena Janet Craig – right). Despite their tropical roots, they seem to have adjusted nicely to their Minnesota home.

- Kelsey Schwalbach

Cabela

Cabela enjoys long walks in the park, hunting for pheasants, grouse and crumbs off the floor. She can nap just about anywhere but she is a champion dock jumper. Flying through the air at the ol’ age of 10 just makes makes her feel like a young pup!

- Sarah Bruss

Groucho

This is Groucho, my adopted stray cat (we checked for previous families.) He started following me while I was walking our dog. We fed him for a winter, a summer, and another winter, and only then he finally decided to let us bring him inside. This is a particularly glorious BLEP he gifted me that lasted several minutes.

- David Middlecamp

Jerry

This is Jerry. I mean what else can I say? We love him and are glad he is faring well, even while at our Foundry office.

- Foundry Office

Hunter

Hunter was found alone in the middle of a freeway when she was 8 weeks old. She’s a year and half old german shepherd/chow mix. She enjoys attention more than anything: from dogs, cats, people, you name it, she wants to be your friend. Her favorite toys are extra small...preferably cat toys.

- Mika Albornoz

Franny

Meet my dog. She makes no effort to help around the house, and gets depressed on car rides. Her Olympic level shedding is world renowned. When she’s not trying to get me to play instead of work, she sleeps. And sleeps. Her hobbies include barking at people we pass on walks, removing her toys from the bin and evenly distributing around my office, and tricking me into feeding her dinner twice.

- Robert Nelson

Hamlet

As much as I hate to admit it, he runs the house. He even has his own bedroom and sleeps all day on his queen-sized bed. When he’s awake, he wrestles with his brother, but it’s hard to tell whether or not he’s having fun. He also yells at his humans constantly for food when his bowl is clearly full. He won’t eat if he even sees a speck at the bottom of the bowl. You know, cats.

- Ashley Kim

Europa

Together with Io and Callisto (Europa's cat siblings) they almost complete the set of Jupiter's four Galilean moons. We Just need Ganymede...

- Nils Hansen

Rachel and Oliver

When they’re not chasing each other in circles around the apartment, Oliver enjoys sitting on laps and Rachel enjoys biting feet. Rachel uses her extra thumb to get an exceptionally good grip to scratch furniture, while Oliver prefers to serenade us in the middle of the night with a variety of his greatest hits, including “Mrreeeeww” and “Brrrrwwoowww”.

- Claudio Rivera

Podrick

This is Podrick. He’s a happy, smart, and stubborn corgi with a passion for blueberries (and anything that his grandma sneaks him, really.) He prefers humans over dogs, but he’s pretty good when it comes to the ladies. In his free time, he enjoys destroying toys, harassing his brother, napping on the couch and borking at nonexistent sounds.

- Ashley Kim

Emerson and Noodle

No introduction required.

- Evan Kearney

Baymax

This is Baymax. We have tried multiple times to grow our favorite herbs and have failed miserably... To our rescue is our new buddy, that helps us grow our herbs and vegetables. With Baymax’s help, we hope to have cilantro to add to our dinners!

- Andy Stone

Pudd’nhead

This is Pudd’nhead. She is a #cat.
- Jason Spidle

No items found.
No items found.

Jason Spidle

Director of Design Operations

A self-styled product therapist, Jason leads our talented team of product designers in uncovering digital solutions both obvious and unexpected. When he’s not sharing his latest discovery in the world of digital tools, you can find Jason working on the next theme song for Foundry with his band.

Got a big idea? Let's make it happen.

White Right Arrow

Let's Chat