Adobe XD v/s “Sketch + CanvasFlip”?

1-IvMGhQE4AQhdXrl9PYgMOQ

Here’s why ( and why NOT) CanvasFlip with Sketch is a good swing against Adobe XD?

From Ideation to live product, entire design process can be simply divided into three parts: designing how it looks, designing how it works (prototyping) and validating if users understood how it looks and works (Usability Testing).

There’s been lots of buzz in design space especially after the launch of recent design tool — Sketch, a simple lightweight tool for designing interfaces, low learning curve and low-weight output won hearts of many design teams ( not to mention nominal lifetime cost of $99 compared to blood-sucking $1000+ Adobe subscription).

That’s why, thousands of design teams switched from photoshop to Sketch.

And I know you did too.. 🙂

To fight with Sketch, Adobe is coming up with a lightweight design tool tailored for designing interface and prototyping. Yes, I’m talking about @adobe XD.

However, Sketch has been a brutal blow to Adobe community. Since inception, it has improved a lot and has a deep respect among design community.

Designers have widely adopted Sketch as an alternative to photoshop, and illustrator and use it in the combination of prototyping tools like CanvasFlip,InVision Or Marvel to make design presentations and design collaboration.

We are going to take a dig into “Sketch + CanvasFlip” as an alternative to Adobe XD for — Designing the interface, Prototyping and User Feedback.

1. Designing

Adobe has been unchallenged winner in design space, so far. This is going to be their strong suite when it comes to compare b/w Adobe XD (Preview) & Sketch.

  • Design with real-world data Let’s start with the best of both worlds. Now with Adobe XD ( and in Sketch app too ) you can easily replace “Lorem ipsum” with real-world data — people’s’ name, cities, dates, pics or even your own custom data set from @Google sheets data.
  • No Layers in Adobe XD. Going by my experience and reviews from Kady Jesko, etc.. there’s no grouping, renaming or reorder of layer items which is a major pain-point. Sketch beautifully handles design hierarchy with Page > Artboard > Symbols.

( I know right?? NO Layers… Can you imagine? **cries in corner** )

  • Sketch is known to be very light weight tool and output, both. Adobe XD seems lightweight too in preview version but popular opinion is that it’s only going to be heavier.
  • Sketch offers minimal set of features, which makes it super Intuitive and incredibly fast. It has sincerely reduce cognitive switching efforts. With XD, Adobe has trimmed down lots of features ( not required in building product interfaces) but Sketch takes the lead in positioning with super useful features “Dynamic Boolean operations” being my favorite.
  • The Design Inspector in Adobe XD, seems copy of Sketch. Not that it really matters but bad move for a brand like Adobe.
                  ( Design inspector in Sketch app )
  • Sketch provides “pen tools” to, you know, draw things. Now it’s not a core designers thing but can be handy when discussing ideas at a very very early stage.

Bottomline, Adobe XD seems to be taking cue from Sketch when it comes to “digital first” designs.

[Special thanks to anjhero, @outsmart_labs etc.. for sharing their reviews on Adobe XD v/s Sketch app before. It helped me cross verify my experience.]

Prototyping

With age Adobe must have realized that designing experiences ( how it works) is future of design. XD comes with “prototyping mode” when you can add interactivity to your static designs.

( Prototyping in Adobe XD )

But, is XD prototyping worth investing time and money?

At least, till recent preview versions, prototyping capabilities are limited to screen to screen transitions. You can NOT have layers based transitions in Adobe XD. ( Hell, there aren’t any layers!!)

Most popular option is to design static interfaces in Sketch and protoype in a web based prototyping tool — like CanvasFlip ( available athttp://canvasflip.com )

( CanvasFlip plugin for one-click design sync )
  • Quickly sync your sketch artboards in CanvasFlip and add layer transitions in your designs ( beat it XD!! )
  • To share a design prototype in XD, you need to upload all your artboards into Creative Cloud and manually share the link ( bit of a hassle for me when iterating designs 20 times a day.)

XD needs you to “Link > Update > Upload all artboards > Share Again” every times in a row when working on your prototype. Not an impressive experience!!

Negatives for Adobe XD prototyping:

  • In Adobe XD, I can’t set Header & Footer for longer screens so that’s a negative for me.
  • No timers for automatic screen transitions for splash screen, notifications scenarios.

Bottomline, in Adobe XD mapping screens is slightly better ( I kinda liked it) but it totally kills the experience by troublesome sharing. Not to mention, it lacks some of important features for realistic prototyping.

Whereas CanvasFlip offers rich set of options to bring an extra bit of realism. Mapping screens is 3 times faster than other prototyping tools. Shared prototypes are automatically updated in real-time. Also, any change in your sketch files reflects on CanvasFlip.. 🙂

User Feedback

Now, if you ask me one reason on why you should stick to Sketch + CanvasFlip, it’s “User Feedback”.

In Adobe XD, there’s NO WAY you can capture user feedback, not even comments.

With Sketch + CanvasFlip there are two of capturing user feedback — Explicit and Implicit.

( Interaction Heatmap recorded in CanvasFlip Prototype )

Explicit Feedback is when person looking the prototype has a suggestion so he leaves a comments on Screens ( if possible ) or sends you an email with his suggestions. Capturing these feedback is smoothly possible in CanvasFlip + Sketch ( which is NOT possible in Adobe XD ).

Implicit Feedback are ones that can be captured by recording what users are doing on prototype. Using Sketch + CanvasFlip, you can record this without having to install any app or plugin in reviewers’ browser.

( Screen video recording and playback in CanvasFlip )

Some of the Implicit Feedback CanvasFlip captures are: Navigation video of the task completion and User Journey over screens. These are generated for every user individually.

These feedback are then consolidated in Conversion Funnel and Interaction Heatmap for you to quickly spot UX improvements in your flow and design.

If you wish to get user feedback on your designs, Sketch + CanvasFlip is your obvious choice.

Design hand-off to engineering team

Finally, you have validated your designs and all set to hand it off to the engineering folks.

Hand off with Sketch: Now, lots of teams install Sketch app in developer’s’ machine as well, so designers send the Sketch file to developer and developers use design inspector to export the development specs out of the design ( it’s just $99 bucks for lifetime. )

Hand off with XD: Adobe XD seems to have followed the suite closely, they have copied the Design Inspector for the job. But here’s the point — since Adobe XD is (going to be) expensive, it makes it difficult for teams to get Sketch kind of workaround.

Hand off with Sketch + CanvasFlip: CanvasFlip offers it’s own set of collaboration suite between Design & Engineering team — it’s called SPECS.

You guessed it right. SPECS lets you sync your Sketch artboards into CanvasFlip which are available to your developers from a web based interface. Cool, isn’t it!!

Another subtle yet very powerful feature in CanvasFlip is — Interaction Map.It helps me visualize entire UX flow in a single snapshots. It’s beautifully layered combination of Screens + HotSpots + Anchor Connections.

Interaction Map is customizable for flow break up, in case you have various engineering teams to share different flows. ( Which is NOT possible in Adobe XD )

( Automatically generated Interaction Map in CanvasFlip )

Besides, CanvasFlip offers WORKFLOW management tool which lets you keep track progress of your design project, review & address comments. Which is NOT POSSIBLE in Adobe XD.

Conclusion

Adobe XD and Sketch offers it’s own set of advantages and challenges.

Sketch and XD are apple to apple when it comes to design interfaces. Sketch has deeply made soft corner designer hearts.

Prototyping in XD is at nascent stage and can’t be used in current stage. Which makes CanvasFlip + Sketch an obvious choice.

If you are not sold for prototyping aspect, remember that you won’t be able to capture any user feedback on Adobe XD.

Here’s link to Sketch, CanvasFlip and Adobe XD for you to evaluate.

GET MORE With CanvasFlip + Sketch

Like it? Share it.. 🙂

  • I played a video on CanvasFlip home page. Can’t stop video, scroll or do anything while it’s playing. But then even more magical thing happened, video ended and I still can’t use website without refresh. I guess you didn’t use Canvas Flip for prototyping your own website…

    • Vipul

      Hey Nemanja N., Getting it fixed right away.

      Thank you so much for bringing it to our notice.

  • Apurv Ray

    “The Design Inspector in Adobe XD, seems copy of Sketch. Not that it really matters but bad move for a brand like Adobe.”
    Thats rich coming from a software where each and every feature is stolen from another pre-existing software.

  • web designer

    Great post,It was really nice..Thank you for sharing this information!!
    http://www.canopuswebtech.co.in/

  • Crea Youz

    Sketch only mac os, and XD coming soon on windows… XD will have more and more users, because many of us do not want to buy a computer dedicated to a single app. And that’s his biggest flaw, Sketch may not be expensive but if it is necessary to equip the developer with mac for interporable, XD takes over Sketch …

Related Posts
Vipul Mishra