In this video Dennis will show you how you can integrate InVision with your Photoshop and Sketch source files to quickly streamline your prototyping process. Dennis covers how to download and install InVision Sync, how to set up your Photoshop or Sketch files and how to sync them inside InVision. Dennis also shows you how you can view the history of the changes you've made to your prototype right inside InVision.
- [Voiceover] Previously, we looked how you can build a basic prototype using your already exported screens. But did you know that you can include source files inside InVision to build up prototypes? We're gonna look at how you can use Sketch and Photoshop files to bring your source files into InVision and start building prototypes. The first thing we need to do is make sure that our Sketch file or Photoshop file is optimized. We're gonna go to our exercise folder, go to prototypes, I'm gonna use Sketch, go to Hi-Fi.
With InVision sync, the only thing that you have to keep in mind with your files is that every art board will become a screen inside InVision. And every name of that art board will become the title of that screen. So you want to make sure that you set up your file with that in mind. And any screen that you don't want to include or any page that you don't want to include, you simply put a minus sign in front of it. So I don't want to sync my icon or my loading screen. So I'm gonna put a minus sign in front of that art board. A minus sign in front of that art board.
And then I'm gonna rename my screen just to make sure that they're a little bit more reflective of what they'll be in the prototype. Screen one will become our log in. Screen two will become our home. Three will be compose. Four will be chat. Gallery is five. Six is attached. And let's just make sure seven and eight, so seven is overlay.
And eight is menu. Another thing to keep in mind with Sketch is that if you create symbols or slices as you can see here, those will automatically be synced inside InVision. So you can work as you would like normally inside Sketch with having to do very little. With Photoshop and art boards, it works the same. But if you're using older version of Photoshop, there's a few other things that you may need to do but we'll include those with your files. Once we're done, we'll click save. Jump back to InVision.
And we'll start bringing these inside. So to start syncing your source files with InVision, we'll first need to download the InVision for Mac client. We'll go to tools and extensions, desktop sync, and here's all the ways you can get your source files inside InVision. Keep in mind that InVision Sync for Mac is only for Mac. But if you are on a PC, you can use Dropbox Sync, Drive, and even Box to include those sources files inside InVision. So the first thing that we need to do is download our Sync for Mac.
We'll install it. Click open. Now it's gonna ask us to move that application into our applications folder, we'll say yes. You can see it installed a menu icon here in the menu bar. We'll go to preferences. And you'll just log in. Now it should include an InVision folder on your side bar. If it doesn't include your InVision Sync folder in your side bar, you can quickly make that a shortcut. Go to your InVision Sync application in your menu bar, click open InVision Sync folder, and simply drag InVision into your side bar.
Next, we'll need to go back into InVision and create our project. We'll go back to prototypes. Click a plus. We'll call this Chat App Redesign. It'll be a iPhone app. It'll be portrait. And we'll create prototype. Now that your prototype is created, you can go back to your InVision Sync folder, and once this is done syncing, you'll now see your project inside InVision Sync. And any projects that you are part of or you've created will also be here as well.
And in here you'll have your assets folder for any fonts, images, and source files that you'll be using on a project. And you'll have your screens, which will be the screens that actually InVision uses to build the prototypes. So to get your source file inside InVision, all you need to do is go to your source files folder, we'll go to our exercise files, and we'll simply drag and drop that source file right inside that source files folder. With Sketch, you will have to include your fonts, but with Photoshop, you don't.
We'll go to fonts, we'll go to our exercise files, go to fonts. I'll copy those as well. Now you'll see that this will start syncing, and your source file will now be synced with InVision. So now I'm going to refresh the page and our screen should be there. Great. So that's how easy it is to bring your screens inside InVision using your source file. But what makes this so cool is that any change that I make in this source file will actually be made here inside InVision. So I'm going to jump back to my InVision Sync folder, open that source file, and make a quick change to show you how that's reflected.
We'll go to our InVision Sync folder. We'll make sure we're in our source files. We'll open up this Sketch file. And we'll just make a quick change to this button. We're just going to change the color to the pink. Maybe the client or the stake holder asked for that color change. We'll change the font and the arrow to black. Now that the changes are made, we'll click save. We'll see InVision Sync start to sync.
We'll go back into InVision. We'll refresh the page. We'll go to the page that we made the change to. And you'll see that the color has been reflected right inside your prototype. The cool thing about InVision Sync and our source file integrations is that if you keep this same file name, any art board that you replace will actually have a history to it. So you click the history mode and you can see all the changes that we've made on this prototype.
Started with the blue button, now we're at the pink button. And you can see all the activity associated to that as well. So that's a really quick look at how you can use InVision Sync with your source files to keep your prototypes up to date.
- Creating your InVision account
- Adding linked screens, overlays, and transitions to prototypes
- Creating and customizing a board
- Sharing prototypes and boards
- Collaborating and commenting
- Integrating with Photoshop and Sketch
- Using the InVision mobile app