Syncing Sketch with InVision
This article contains some pro tips on how and when to sync your Sketch artboards with InVision. If you’ve ever used the InVision Sync Plugin then you might have experienced some frustration when saving Sketch files and seeing unexpected behaviour in your linked InVision Projects.
Craft is the new way in which to do integrate InVision into Sketch. I plan to do a review of this plugin in another article.
How to sync Sketch with InVision
Here’s a great free video on how to sync Sketch with InVision. If you want to a shortcut watch it from 00:19 to 3:24
Issues with syncing artboards
I expected that every edit I make on Sketch, would sync up on InVision in real time, but it’s not what happens.
InVision identifies each artboard by it’s name and everything you do is connected to the names of the artboards :O Using the artboard name as a way to uniquely identify an artboard is a problem because you might use the same name for multiple artboards
This can create a lot of frustration if you have InVision Syncing on and you keep making changes like renaming and deleting artboards. InVision starts duplicating and/or overwriting your screens. Your Sketch project and InVision project will look different unintentionally.
Simple Tip: Turn on syncing when you are ready to create a prototype on InVision
The reason why you sync your files on InVision is to create a prototype. What I suggest is that you keep your InVision Sync paused while you are designing on Sketch and resume it on when you are ready to create a prototype on InVision.
1. At the start of the project pause InVision Syncing
Click on the InVision Sync icon at the top of your screen and select Pause Syncing.
2. Have all the correct artboards ready and named properly on Sketch
Design all the artboards and have them ready on Sketch. The artboards you don’t want to sync because they may be variations of one screen, add ‘-’ in front of them and they will not be synced.
3. Turn on Resume Syncing
Click on the InVision Sync icon at the top of your screen and select Resume Syncing. Let all the files sync and then pause it again.
Things that go wrong
In the next section, you will see few things that can go wrong if you have InVision Sync on all the time and you keep saving your work on Sketch.
1. If you delete an artboard from Sketch, it doesn’t automatically delete it from your InVision prototype
You have to go to your InVision, find the correct screen you deleted in your Sketch and delete it manually on InVision. This is a real headache if you doesn’t keep eye on your InVision syncing.
2. If you rename an artboard in Sketch, it doesn’t rename it on InVision
If you rename an artboard in Sketch and save it, it doesn’t rename a screen on InVision. It keeps the existing screen and creates a new, renamed screen. Now you will have 2 exact same screens on InVision and you will have to go and delete one.
2.1. If you rename an artboard from upper case to lower case or opposite, it doesn’t change it on InVision
This is not as big of an issue as the one above. At least InVision doesn’t create a new screen.
3. Every artboard needs to have a unique name. (UPDATE: This is no longer an issue!)
If two or more of your artboards have the same name, for example, “Homescreen”, InVision registers that there is only one file called “Homescreen” and keeps updating this one file with the changes you are making on Sketch on the last artboard you created called “Homescreen”.
The solutions I’m sharing in this article are working well for my design workflow. Please feel free to share your way below if you do it differently. I’m going to review InVision Craft in another article.
