Prototyping Battle: Adobe XD vs Sketch + InVision’s Craft
Updated Adobe XD pricing, January 2018 — $9.99/month
Updated Both Adobe XD and InVision’s pricing, May 2018
For a few months, I’ve used Adobe (XD) Experience Design to create wireframes, design studies and prototypes. It’s a good, fast and lightweight, ‘somewhat free’ software that does the job.
For me, It was easy to use Adobe XD because I’ve been a Photoshop user for a long time, the learning curve to use it is almost zero for me, especially the keyboard shortcuts.al
After a while, our team at First Circle decided to use Sketch because of its wide community support. There’s a lot of useful plugins out there with continuous development and support which Adobe XD still doesn’t have right now. One of them is InVision’s Craft Prototype plugin. It was easy to use. The installation was a breeze, the shortcut was pretty simple, and the syncing isn’t complicated. But which one is better? Here are the few things that you might want to consider before choosing one.
When Adobe XD was still in beta period, it was free to create unlimited prototypes which is both available offline and online. Now (May 2018), Both of them offer a ‘1’ prototype as a free trial and If you need unlimited prototypes (which most likely you will) You have to pay for at least $13/month for Adobe XD and $25/month for InVision’s Craft.
Here, Adobe XD is still cheaper than buying Sketch which is $99 with 1 year of updates, plus the InVision subscription. It may also be easily added to your subscription if you’re already using other Adobe products.
In Adobe XD all you need to do is press CMD/CTRL+Enter to run and test your prototype on the fly. You can still upload it later for web (Creative Cloud) if you need to.
In InVision’s Craft, you need to sync the boards every single time you need to test your prototype and then open the provided URL in a browser. That’s 2 extra step and if you’re like me that test micro changes, that’s going to be a very slow process. In fairness though, I like how InVision inserts a few instructions to guide testers and how the prototype behaves more realistically when it’s opened using the appropriate device/screen.
Setting a Home Screen
In Adobe XD, you can easily select the starting screen of your prototype, In Sketch + InVision, you have to manually arrange your screens in the Layer Panel to make sure that your screens appear when they should be.
Built-in Screen Recording
One feature though that Sketch/Craft don’t have that you can do in Adobe XD is that you can record a video of the interactions within your prototype while testing it without installing additional software on your machine. It still lacking microphone support though, which is going to be useful for recording presentation demos.
Adobe XD has very limited way of handling transition, you can select what kind of transition will happen from Screen A to B like dissolve or slide to left. This means the whole screen, so if the screen has a navigation, and you set the transition to slide, the navigation goes with it.
In InVision’s Craft, you have more fine control with this:
- Link to a screen or just overlay.
- Link an external URL or link back/close.
- Set gesture separately for desktop like hover and in mobile, double taps and swipe on different directions.
Adobe XD is supported by Creative Cloud and again, it currently cost nothing. Though I haven’t been able to utilized it frequent and extensive, It is a relief to have your prototypes there and ready to be shared. InVision’s Craft on the other hand offers a way to manage your Sketch assets. This is very useful specially if you already have a design system and want to reuse and share those assets within your team. Plus, Craft as another plug-in called Freehand where you and your client/boss/colleague can collaborate remotely, real-time.
I know that I may probably missed a few more things about Adobe XD, Sketch and InVision’s craft, but so far, those are the things that I find worth considering if you want to compare the two.
Both of them does the job when creating UI prototypes. If you have a tight budget, working solo with a team or a freelancer, and mostly on small projects, I’d totally recommend Adobe XD, but if you’re not the only designer in your team and handles medium to big projects, Sketch is definitely a must for the reasons that I already mentioned above.
InVision’s Craft is just one of the Sketch plugins that can help you improve your workflow, and there’s definitely tons of useful plugins out there, released and or still being developed. To be honest, I’d like to see more of advance but still easy to use prototyping tools to be built on top of Sketch. With features like being able to accept input, create conditionals, etc., Maybe someday?
Thank you for reading!
P.S. Your claps and share would definitely make me a bit happier!