The Think Blog

5 Tips & Tricks for Using InVision

Sunkwon Bush Senior Experience Designer December 30, 2015

Over the past year, InVision has become a vital part of our workflow for many design projects. We love that it’s easy to use and flexible as a tool for collaboration, client presentations, and prototyping. I’ve had the chance to use InVision in a variety of ways and would like to share a few tips and tricks I’ve picked up to make the most of this app.

1. Use a Clickable Sitemap or Workflow to Help Clients Navigate the Prototype

Clickable Site Map Example

The applications we build at Think Company tend to have a lot of moving parts. InVision’s section and navigation features work pretty well for small projects, but it’s easy for clients to lose track of what pages they need to review and how the pages relate to one another as the project becomes more complex. I’ve found that dedicating one screen at the beginning as a clickable site map or workflow makes it easier for our clients to keep track of the big picture behind the designs.

These site maps are also a great spot to include status indicators to mark versions or signal whether something needs review. InVision has a similar feature built into Workflow, but we find that keeping this information in one spot on the site map is easier for stakeholders to remember.

2. Establish a Naming System for Hotspot Templates

Hotspot Template Naming Example

As designers, most of us are pretty familiar with naming our files, pages, and layers in other design tools. It’s a crucial practice for keeping track of the many little pieces of each project.

InVision also has Hotspot Templates that allow you to link up multiple screens at a time, saving hours of repetitive work. This is great when most of your elements stay in one spot, but things get messy when they don’t. One or two buttons may need to change position or hide while others are constant. My usual workaround for this problem is to make most buttons a separate template instead of grouping them. This strategy gives me most of the time-saving goodness of templates, even if I have to make and manage more of them. The trade-off, however, is that I have tons of little templates all over my prototype.

Setting up a naming system makes it easier to keep track of every variation of my templates. It’s been much easier for me and my team to go back in and edit or apply them throughout the life of the project. The convention I like to use is:

[Page Name] – [Element Name] – [Element State or Variation if needed]

This system handles most of my needs since I can easily skim the menu for each template and recall its corresponding hotspots. Now that InVision released the Overlays feature, I’ve found it helpful to apply this system to those as well.

3. Involve Clients Early and Encourage Using Comments


Collaborating with InVision can be a joy when there is a good rapport between the clients and our team. Some clients take to the app quickly and actively give and keep track of feedback through comments without any guidance. Others prefer to give feedback verbally and depend on our team to handle comments. Here are some of the steps we take to make the most of commenting:

  • Establish rounds for feedback and revision. Though few of us at Think Brownstone miss the days of sending and reviewing static PDF documents, one thing it did well was establish clearly documented rounds of feedback. InVision works just fine as a tool for gathering feedback, but to do so it’s important to settle on a pattern with your team and clients early on. The goal is to make it clear to everyone how much work is in scope and what’s expected.
  • Write a few comments during meetings in front of the client. If a picture is worth a thousand words, a live demo is worth thousands more. Making note of some specific comments made by the client during a meeting is a great way to acclimate them to using InVision themselves. This works well in remote meetings, too, if you are screen-sharing.
  • Set clear guidelines on resolving comments. I’m a firm believer that checking “Mark as Resolved” after making a change counts as one of the simple pleasures of life. To ensure that it remains so, make sure your team and clients are clear on who handles resolving comments. Decide if you want this to be a way for clients to “sign off” on changes, or if the project manager or design lead will clean up comments when they feel an issue is resolved.

4. Use Project Folders for Versioning of Entire Prototypes

Versioning Project Folders Example

One type of deliverable clients will often ask for is an interactive proof-of-concept. Some of these projects are best served with an html prototype, but we don’t always need that level of fidelity. InVision is a great choice when clients are only looking for a few interactive elements and the ability to navigate to different pages. Some projects are small enough that we can use sections to distinguish between versions or simply keep wireframes and mockups separate. InVision’s History mode is also great for tracking changes to single pages.

However, on projects like these, where the entire prototype becomes the final deliverable, versioning can become a challenge. As a design consultancy, we don’t always have the option to receive rapid feedback from our clients, and we need to set clear boundaries for how many rounds of revision are in scope. The bigger the prototype, the harder it is to manage each round of revision using sections alone. Clients have trouble figuring out which version is current, and designers will struggle with managing multiple versions of hotspot templates or screens.

The simplest way we’ve found to work around this issue is to copy the prototype’s project folder and give it a higher version number. Since this adds to your project count, this tip requires a Team Edition account or higher. This approach has the added benefit of allowing us to maintain a share link to earlier versions of the prototype. Hopefully, InVision will add better versioning controls in the future but until then, this works for us.

5. Place Overlays Precisely Using Lines or Cropped Objects as a Guide

The new Overlays feature is a huge time-saver when our designs call for a little more interaction via modals, menus, or sidebars. When designing desktop or tablet applications, I find myself using the Custom position the most. However, the current version of InVision doesn’t provide smart guides or nudges to help you place an overlay with precision. In all likelihood, this means you will need to reposition your overlays several times to get pixel-perfect precision.

One trick I use to speed up this process is to include a reference point from from the current page as a guide. I usually do this via the Slice tool in Sketch, then use an overlay to illustrate two different states of a line graph using the two elements above the chart as a reference point.

Like I mentioned above, this is a workaround that I hope will be obsolete in a future version of InVision. For now, this method lets me make the most of what InVision has to offer without needing to switch to a higher-fidelity tool.

Wrapping Up

InVision fits nicely into our project work and continues to pump out new features. With the big Motion update on the horizon, some of these tips could become obsolete. However, even as our tools evolve, the need to set expectations with clients won’t change anytime soon. For now, I hope these tidbits make your next InVision project run a little smoother!

June 2019 update: While Invision’s “Motion” update has since evolved into Invision Studio, the original overlays feature has remained largely unchanged for desktop. While Invision Studio and the Craft plugin allow for some more precise overlay placements, the workarounds in this article still hold true and could still be useful if you are only working with the core Invision app.