In this video Dennis shows you how you can build prototypes using real content from across the web with InVision's Craft plugin for Photoshop and Sketch. Dennis shows you how to download the plugin, install it and how to evolve a prototype from a wire-frame to a hi-fidelity design in minutes.
- [Voiceover] So you know how to create rapid prototypes with InVision. But sometimes you wanna create a prototype with real content. Craft by InVision is is a plugin for Sketch and Photoshop that allows you to use real content images from the web inside your prototypes. First we need to download Craft. You'll visit http://invisionapp.com/craft. Click the DOWNLOAD NOW button, and we'll install the CraftInstaller. Click Open.
Click Install Craft Manager. Once the Craft Manager is installed, it'll sit in the top, right in your menu bar. You can then install Craft for Sketch or Photoshop. I'll install for Sketch. And you can see that we have Duplicate, Photos, Styles, Type all turned on. We'll jump back to Sketch. And we'll start to see how this is done. Go to Sketch. And here you can see we have the Craft plugin installed. InVision has a number of plugins available.
We have a duplicate plugin, a photos plugin, a styles plugin, and a typography plugin. So let's jump into our Exercise Files and start building this out. We'll go to Exercise Files, Prototype, Sketch, Wireframes, Open this file. Here you can see a basic wireframe that we can use to show you how Craft can evolve this wireframe into something much more high end fidelity. We're just gonna focus on a few pages, but feel free to take it as far as you'd like.
The first thing we need to do is add our logos. You'll select where you'd like your logos to appear. Go to the Photos extension. Go to Folders. And you can point Craft to any folder that's on your desktop. Go to our Exercise Files. Go to Prototypes. Sketch. Wireframes. And you'll see a folder called DesignImages. And you can see there's a logo_mark.png file living inside this folder. So we'll click Open.
We'll click Place Photos. And that logo has been placed inside our design. You can also find photos from Dropbox, search for them on Unsplash, and anywhere on the web. Quickly resize these. Now you can see we actually have a username. But maybe we want this to be an email. We can simply click the name. Go to our typography plugin. Click Email. And that's now an email.
Here, we have a few images. Go back to our Images Folder. Go back into our assets and we have a folder called People. Click Open. Place Photos. Now they've been placed. There's a number of other things that we can do to this design. You can see we can duplicate our content, using a duplicate plugin. We'll select the content that we need to duplicate.
Come up to the duplicate plugin. We're gonna duplicate this vertically. We'll say, maybe 30 pixels. And you can see we've duplicated the content. But one of the other things that's really exciting about the Craft plugin is how you can actually evolve this design quickly using style sheets. Style sheets are only available with the Sketch plugin. So you can see if I click Sync Styles, it's generating a style sheet. These are all the styles that are associated with this wireframe.
So if I jump back to the first page, I have all the grays that I can replace with actual colors. So I'll find the hex code 767, go back to the style sheet, 767, and I'll make this blue. Click Sync Styles. And you can see that is now blue. Also I have some headers, that I wanna make black.
67 Jump back to the styles. Black. Sync Styles. Jump back to the design. And you can see we now have black headers. There's one last thing I wanna do to evolve this design. I wanna make this button pink. Back to Styles. Pink. And click Sync Styles.
Now you can see this is much more reflective of what this actual design would look like. And if you had this synced inside InVision, all these changes would happen automatically and be pushed into your prototype. So that's how quickly you can evolve a design from a wireframe, into something more high fidelity using Craft.
- 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