InVision Hacks: Make that Sidebar Sticky
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:
- Duplicate the sidebar elements you want to designate as fixed into their own artboard.
- Set the background color of that artboard to the background color of your screens.
- 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.).
- Hide the sidebar elements you want to designate as fixed in the artboards you are syncing with InVision.
- Remove the background color from those same artboards in Sketch. The screens must be transparent for this hack to work.
- Sync your screens and then open the prototype in InVision.
- 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.
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.
Year-round mountain biking on metro-area singletrack trails!
Luminary Loppet at Theodore Wirth Regional Park. An annual event as part of The Great Northern Festival, it’s a fairly magical celebration and a great way to interact with the great outdoors during winter.
Winter walks in Chicago
One of the best parts of moving to a new city is exploring it by foot. This is the Riverwalk in Chicago.
We had no idea how to ice fish, but you only turn five once so we bundled up and had an adventure.
Ice fishing on Lake of the Woods
Our shanty was at this spot on the lake. It took us 30 minutes to drive out to it. And we almost didn’t make it because our guide was the polar vortex equivalent of a Mad Max character and he insisted driving 60 MPH. We were riding in a Prius so it was difficult to keep up.
Iceskating, Fetch, and Snowmobiling
2021 Winter (so far) has brought the following…
1. Many hours of iceskating with a shiny pink cast on the wrist of my 9 year old
2. Lots of playing fetch for our lab
3. My first time snowmobiling! (I’m hooked)
Frozen Lake Biking
No greater way to enjoy Minnesota lakes in a new way than biking on them while frozen.
Winter geocaching is a great way to stay warm and explore favorite places around the city in a new way.
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 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
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
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 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
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
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
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
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
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