What Does InVision App and the Craft Sketch Plugin Do?
Pretty much all designers have heard of the Craft Sketch Plugin, and I'm almost certain they've heard of InVision App and how Craft bridges the gap between the two. Well, I actually collaborated with InVision on a free ebook recently, that teaches you about designing and prototyping with Sketch and the Craft Plugin.
Craft is free too, so download it here, install it, then sit back as I give you the rundown on how it helps designers iterate through various ideas at lightening speed. Even if you've heard of Craft and you already know what it does, InVision are adding new features all the time, so it's useful to stay ahead of the curve. One of the new features, maybe Craft Stock or Craft Freehand, could be a game-changer for you.
What does InVision do? What does the Craft Sketch Plugin do? 🤔
Let's find out using 1-min videos and quick explanations.
What Does InVision Do?
InVision App is for prototyping and collaborating on mobile apps and responsive web designs. You design in Sketch, and then export it to InVision, where you can then demonstrate how the different screens link up, and also communicate with your teammates to discuss feedback, changes and reiterations. Oh, and your exportable assets live there too, because developers can use InVision to receive your design handoff, and actually inspect the design and translate it to code.
InVision App is for the whole team—stakeholders and all.
What Does Craft Do?
It brings most of that functionality to Sketch.
Simple really—Craft Data means that you don't have to come up with "realistic" names, numbers and addresses and stuff, as you can have Craft randomly come up with content and insert it into your design. Plus, if you need something more specific, for example album titles from Spotify, you can even connect to a JSON API.
Here's how it works:
Craft Duplicate is the easiest way to tile layers/objects horizontally or vertically, and if you've used Craft Data anywhere in the original component, the Craft Plugin will automatically make sure that each instance of the tiled component has fresh data, making your designs look even more realistic when tiling/repeating content.
After you've mocked up a rough concept of your design (and for every iteration after that), it's time to quickly request some feedback—this is where you'd use Craft Freehand to invite team members to a realtime whiteboard collaboration session. You're in Sketch, they're on their mobiles or tablets, and you're all annotating, drawing shapes and pretty much using freehand tools to discuss ideas and feedback.
Damn, things are heating up now. Give me a sec, let me find my sunglasses 😎.
Yeah, so, Craft Prototype is for designing user flows and interactions—it lets you link up your artboards, demonstrate how the user would navigate from one screen to the next, refine the animation/transition that happens in-between (if any), and create dynamic components such as fixed headers and footers. You can do this in the InVision web-app, but it's easier to do it in Sketch with Craft Prototype.
Just some of the things you can customise:
- Clickable hotspot region
- Gesture (tap, slide, …)
- Transition (push, slide, flow, dissolve, …)
- Duration (how long it takes for the animation to complete)
If you're totally sold on the Sketch + Craft + InVision workflow already, and you want to learn more about Craft Prototype right now, InVision shared an extract from my book on their blog yesterday, about prototyping with Sketch. Check it out.
Once you have a working low-fidelity prototype, it's time to start thinking about the visual asethetic a bit more. After all, visuals are still a vital aspect of the overall UX, especially when it comes to visual consistency. Craft Library is about saving those commonly used styles, text styles and exportable design assets so that they can be used time and time again; but, most importantly, they can be stored in the cloud and shared with designer teammates, keeping your assets in-sync across the board.
Craft Stock is the newest addition to the Craft Suite. Remember: the content sourced from Craft Data was only temporary; now it's time to start taking imagery more seriously, because it plays an extremely crucial role in conversions and captivating the user emotionally. Craft Stock sources high-resolution images from Getty and iStock, although I suspect InVision will add more sources over time.
Finished? Oh, you're not—my bad! Either way, you can sync your progress into the core InVision app at any time, allowing collaborators to see where you are with the design, offer feedback, and if you're 100% finished, handoff the design specs to the developers. I cover handoff in the book (I actually talk about designing with Sketch, collaborating in InVision, accountability, design handoff—the whole shebang) but here's a quick tutorial on design handoff I wrote over at SitePoint.
Keen to learn more about Sketch, Craft and InVision in more detail? Download my free Sketch + Craft ebook from the InVision App website to read the tutorials!