InVision Sync, Dropbox, and Symlinks. Oh my!

Or, my process for creating and managing clickable prototypes…

While my day-to-day responsibilities tend to be split between front-end development and experience design, I have been doing a lot more prototyping lately than I have in a while. I have a pretty straight-forward workflow that, in a nutshell, breaks down like this:

1. Create components, wireframes, and page designs in Sketch.
2. Create an InVision prototype.
3. Save Sketch file into project folder within the InVision Sync folder and wait for screens to be created based on the artboard in the Sketch file.
4. Create hotspots to allow a user to navigate between the various screens in my application’s flow.
5. Test, document, iterate, test, rinse and repeat.

I really have grown to love the benefits that InVision Sync provides. It is such a time saver to have your prototypes automatically update when there are updates to the artboards in your sketch file. The only drawback to this workflow is the necessity to store your project’s Sketch file in the folder prescribed by InVision Sync (/InVision/Project Name/Assets/Source Files). This means, the source file and screens generated by InVision Sync are not stored in the same place as the rest of the project files that the team is creating, which in my case is Dropbox. Dropbox is a solid choice for us because of it’s versioning, automatic backups, and ease of sharing.

InVision Sync automatically creates PNG files for each of the artboards in your Sketch file

I spent a little bit of time experimenting this weekend and found a workflow that appears to solve this problem. So, let’s quickly review what we are hoping to accomplish here. We have a requirement of storing our Sketch source file in the folder set up by InVision Sync and also want our files to be backed up and organized within a larger folder structure that houses the rest of a project’s files in Dropbox. With these requirements in mind, let’s map out our approach.

The following assumes you have a Sketch file with a few artboards, a Dropbox account, and an Invision account.

1. Download InVision Sync from the link at the bottom of this post and install.
2. Log into InVision and create a new prototype.
3. There will be a new folder inside the Invision Sync folder on your machine with the same name as the new prototype you just created.
4. After a few minutes, the application will create a screen for each artboard in your Sketch file.

Now, when you make changes to your Sketch file and save, the InVision Sync application will regenerate your screens and push them to your prototype automatically. But, we still have the problem of our Sketch file and the generated screens living outside of our project folder on Dropbox. Let’s fix that up now.

In order for us to simultaneously sync our Sketch files with InVision and keep them backed up in Dropbox, we need to create something called a symlink. A symlink, in a nutshell, is a file that specifically links to another file that lives elsewhere in the file system. If you create a symlink to a folder, when that symlink is opened, the contents of the linked folder is shown. Think of it as a bookmark you create in a web browser to get to your favorite webpage.

The project folder on the right is a symbolic link to the original folder in the left.

Creating a symlink in this case, involves using the terminal, which for the uninitiated can be a little bit scary. However, this process is straight-forward and involves very little possibility of messing up your system.

1. In the Finder window, navigate to the InVision Sync folder.
2. In another Finder window, navigate to your Dropbox folder and find the parent folder for your project.
3. Right-click on the project folder and from the menu, select “Services > New Terminal at Folder.” This will open up a terminal window with the path to your Project folder.

Right-clicking on the project folder and selecting Services > New Terminal at Folder opens a new terminal window

4. In the terminal window, enter “ln -s” without the quotes. “ln” is syntax for creating a link and the “-s” is a flag that sets the type of link to symbolic. Don’t hit enter just yet.

5. Drag the folder that corresponds to the prototype you created from the InVision folder into the terminal window. This is a shortcut to get the path to your folder, which you should now see next to the “ln -s” that you typed in step 3.

Dragging the Project folder to the terminal window will give you the path to the folder.

6. Hit enter. This will create a new symlink in your Dropbox folder, which will cause it to be copied and synced up to the cloud. You will see a new folder with a small arrow icon on it. If you were to double-click this, you would open up a finder view that shows the contents of your InVision project folder.

The project folder on the right is a symlink to the original project folder on the left.

Hooray! Now, because the InVision project folder is symlinked to your Dropbox project folder, the updated and newly created files are synced to your project’s Dropbox folder every time there is an update.

Luckily, if you want to break the link between your Dropbox project and your InVision project, the process is pretty easy. All you need to do is drag the symlink to the trash and once emptied, there is no longer a link to the original file. Do note that this will remove the folder and files from Dropbox and prevent them from being backed up as part of your project.

I hope this process will save you some time and help you keep your files organized. I would love to hear your thoughts!