How to Save InVision projects in 3 steps

Last Modified: Feb 22nd, 2024 - Category: Freebies, UX, UX Tutorials
how to save InVision projects as interactive prototypes image cover

Now that InVision is closing, many PMs, UXers, and former InVision users are left worrying about their InVision projects, which won’t be accessible anymore.

But there’s no need to worry! InVision has always featured an amazing option that allows UI designers to save their projects in various formats, including one that replicates their platform. This last format is especially useful for prototypes, as it allows you to preserve their interactions.

Saving InVision Projects

To save an InVision project, you need to follow these three easy and simple steps.

I strongly encourage you to save your prototypes ASAP. While access will be closed by December 31, 2024, giving you several months to do so, there’s no point in delaying a process that is both quick and straightforward. Plus, if you have a UX portfolio, you’ll likely want to include these prototypes.

The good news is that you can not only add the prototypes to your UX portfolio but also maintain them as interactive prototypes, complete with hot spots and everything. It’s a fantastic tool, and it’s a shame it has to close.

Step 1: Log in to InVision

First, log in to your InVision account. Here, InVision made a UX mistake (or perhaps it was intentional). If you visit your usual InVision page, you’ll find Freehand and a notice that it’s now part of Miro, and the login option is a bit hard to find. To save time, here is the direct link to log in to your InVision account.

image showing the InVision projects page
The Invision projects page

Once logged in, you’ll see your files as usual, though some may be locked. If this is the case, it’s because you have more active files than your plan allows. Simply archive one or more active projects until the others are unlocked. Don’t worry, you won’t lose the files; we’ll address that soon.

Step 2: Look for Your Project

In this step, we’ll search for the project we want to save. Once you find it, hover over the thumbnail, and you’ll see the “View Prototype” button. Click on it.

After clicking, you’ll be inside your InVision project screens. Here’s what you need to do next:

  • Locate the navbar at the top of the page.
  • Look for the 3 dots menu.
  • Click on it.
image displaying the InVision projects navbar
Your InVision projects navbar should look like this. The 3 dots are on the right.

After clicking on the menu, you’ll see several options. For the purposes of this article, we’ll focus on the second one labeled “Download Prototype.” Click on it.

InVision projects menu options
Click in the second item in the popup menu

Step 3: Save Your InVision Prototype

Now, you should be on a page similar to the one in the provided image below.

An image displaying the screen to save InVision prototypes and its options
Screen to save InVision prototypes

Make sure you select the “Offline Share (ZIP)” tab. Look at the checkboxes and check all those that matter to you. Personally, I unchecked them all, but it’s up to you.

Once you’re satisfied with your selection, click the “Generate Zip” button. You’ll be directed to a page as shown in the image.

image of InVision file download page
Your InVision file is ready to download!

Wait a few seconds until you see a white div with the message “Your zip is ready” and a “Download” button. Click on “Download,” and that’s it; you can close the tab on your browser!

Note: If you don’t download it right away, you don’t need to recreate the prototype. You’ll receive an email with instructions and a link to your file.

Checking Your Local InVision Prototype

Now that we’ve downloaded our prototype, what’s next?

Check your files and unzip the file you just downloaded. You’ll see something similar to the image below:

Image showing the contents of the InVision zip file
The contents of the InVision zip file

Just click the index.html file, and you’ll see your InVision project just as it was on InVision. Now, you can include these files in your portfolio. From an SEO and web development perspective, this can be done quickly using the following structure:

work (or whatever you name your portfolio) --> project name --> index.html and associated files

You could also insert a “prototypes” category if it fits your SEO strategy and you’re implementing SEO silos. However, the structure mentioned should suffice.

For WordPress development, I recommend creating a special page and using custom fields to link to your files. There’s no need for complexity; the free version of ACF (Advanced Custom Fields) works well. For reference, we use the PRO version on the Dorve website (yes, what you see is a custom WordPress theme!).

Can I Save InVision Projects in Other Ways?

Yes, you can save InVision projects using any of the options you saw when you downloaded your prototype.

If you closed the tab or new window after the download, you’d return to the creation page with various options and check-boxes. There, you’ll see tabs like:

  • Print prototype (PDF)
  • Offline share (ZIP)
  • Prototype as PDF
  • Screens
  • Comments
  • Inspect text
  • Tasks
  • Sketch
Detail of the tabs in the Export prototypes screen to save InVision projects
The tabs in the Export prototypes screen

Unless you were highly active with InVision projects (or have a long history), you’ll probably want to use only the method I recommended. Nonetheless, you can use any available option. The PDF prototypes option is useful mainly for mobile, as the desktop version won’t fit on a single page.

But the Sketch option is interesting. In this case, you can export your prototype in the .sketch format. Just be warned: as noted on the export page, it’s a “best effort” export, so don’t expect miracles. Generally, I’ve had good results with this, though some complex projects may require adjustments (and some may be a complete failure).

Final Helpful Tips

One thing to note: if you’re trying to navigate back to your projects, InVision has made a UI oversight. There’s no need to click ‘back’ in your browser. Instead, in the list of options for saving your prototype, look for an ‘X’ sign in the upper right corner. It’s easy to miss, especially on a large screen.

Another point: as mentioned earlier, you can only have one active prototype at a time (assuming you’re on the free plan, as there’s no benefit in continuing to pay). After saving your prototype, return to the main page, find the prototype you just saved, and archive it. This will unlock your locked files.

If you don’t see any, you may have already archived some to free up a slot. If so, click on ‘My Documents,’ and a popup will display both active and archived files. Select ‘archived,’ find the file you need, activate it, and you’re ready to save a new InVision project.

Detail of InVision archives structure.
Detail of InVision archives. My Documents are the active ones.

I hope this article is helpful, and happy prototype saving!

We can improve your business!

Let us help you with the best solutions for your business.

It only takes one step, you're one click away from getting guaranteed results!

I want to improve my business NOW!