Prototyping Battle: Adobe XD vs Sketch + InVision’s Craft

For the past few months, I’ve been using Adobe Experience Design to create wireframes, design studies and prototypes. It’s a good, fast and lightweight, ‘currently free’ software that does the job. As it is currently in beta, it has some quirks, but definitely tolerable ‘for the price’.

The most annoying quirk (could be a bug) I experienced so far, which they managed to fix very recently is that you have to set the font, color, border, fill etc. every single time you create a new element. It doesn’t save the previous settings applied. It was time consuming. Still, I did stick to Adobe XD for a while, and because I’ve been a Photoshop user for a long time, the learning curve of using it is almost zero for me, specially when using keyboard shortcuts.

Just recently though, our team at First Circle decided to use Sketch for the obvious reasons that it’s widely supported by the community. More specially because there’s a lot of useful plugins out there with continuous development and support which Adobe XD doesn’t have right now. One of them is the most recent release of InVision. The Craft Prototype plugin. It was easy to use. The installation was a breeze, the shortcut was pretty simple, the syncing isn’t complicated. But which one is better? Here are few things that you might want to consider before coming to a verdict.

Pricing
Currently, It’s free to create unlimited prototypes in Adobe XD which is both available offline and online, but in InVision’s Craft, you’re limited to ‘1’ prototype for the free account and $23–25/mo if you need unlimited prototypes.

InVision’s Pricing Grid

Though it’s okay to assume that Adobe will someday charge their users for subscription, a few months of free trial will still save you extra bucks for coffee and snacks.

Prototype Testing
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.

Screen Transitions
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.

Cloud Storage
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.

Verdict
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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.