For COVID-19 updates, please go here
Adobe XD vs Sketch and Invision

The right web design tool will have you work smarter, not harder

As a designer, creating beautiful, functional web and mobile designs for clients is truly rewarding. Here at Speedwell we like to be efficient without compromising quality, therefore having a powerful, feature-rich toolkit is important.

Nowadays there is a wealth of programs and tools available to designers who are designing for the web and mobile. Finding out which programs will work best for you and fit within your workflow can be a bit of a process, which is something we’ve taken a look at recently at Speedwell. For some time now we’ve been using Sketch for our design work, along with Invision for prototyping, presenting designs to clients and making the transition between design and development easier.

Adobe have come out with their own program, Adobe Experience Designer (XD), that is geared towards designing and prototyping for the web and mobile, a competitor for Sketch and Invision. Seeing as we already had a Creative Cloud subscription, we took a look at Adobe XD to see how it compares to Sketch and Invision. In this blog post we will share our findings, outlining many of the features, benefits and drawbacks of each program. Hopefully it will help you decide which program might be suitable for you if you’re considering making a switch.



At the moment Sketch is only available on macOS, and Invision is available on both macOS and Windows. Adobe XD is available on both macOS and Windows.



Sketch costs $99USD per license, which gives you one year of updates. Once the year is passed, you can choose to renew your license for $69, or continue to use Sketch without getting further updates. Adobe XD comes with Adobe Creative Cloud, so if your agency already subscribes to this, they will be able to install Adobe XD at no extra cost. A subscription to Creative Cloud costs $101.19 per month per licence with access to all the apps, or $43.99 per month per license for a single app.


Previewing designs on devices

With both Sketch and XD, users can view their designs on their iPhones or iPads by downloading a companion app. This allows designers to get a better feel for how a design will actually look in situ. Sketch users can connect their computer and device to the same Wi-Fi network, or connect via a USB Lightning cable. Adobe XD users don’t have the Wi-Fi option, and will need to connect via USB. At the moment this feature is only available for macOS.


Exporting assets


Sketch - export to png
Sketch export panel


Sketch makes it easy to export artboards, objects and groups in a number of formats and sizes. You can create a list of the different file types and sizes (eg. 1x, 2x, 3x) you’d like to export to in the Export panel, and then export them all in one go. File types include PNG, JPG, SVG, PDF, TIFF, WEBP and EPS.


Adobe XD - exporting assets
Adobe XD export dialog box


In Adobe XD, you can choose to export to PNG, SVG, PDF or JPG. The process is a little slower than Sketch though as you have to export each file type individually, rather than in one go. If you’re exporting PNGs you can however export 1x, 2x and 3x in one go if you choose the ‘Export for iOS’ setting. Exporting assets for Android is a little easier in XD as you can select ‘Android’ in the dialog box and it will export assets at the 6 different required sizes (ldpi, mdpi, hdpi, xhspi, xxhdpi, xxxhdpi).


Exporting CSS / generating style guides

The ease with which one can go from design mockups to development is important to consider when deciding on a design program. At the moment I believe the combination of Sketch and Invision is the winner in this regard. Designers can sync their designs to Invision using the Craft plugin, where developers can use Inspect mode to view details such as colours, font styles, dimensions of objects, and even the spacing between elements. Developers can click on an element and view the CSS styles related to it, allowing them to copy and paste the CSS in to their code. At Speedwell the use of Invision Inspect mode has made the design-to-dev transition period quicker and easier as we no longer need to create documents outlining styles, dimensions, margins and so on.


Invision inspect mode
Invision Inspect Mode


In Sketch users can also generate a style guide with a single click using the same plugin. It generates a new ‘Styles’ page in the document containing a colour palette, list of fonts used and list of text styles. The great thing about this feature is if you edit something on this page it will update throughout the document. So if your client decides they want to change their brand colours, you only need to change the colours in one place and they will be updated throughout the designs.


Sketch styles - colour palette
Colour palette in Sketch


Sketch styles - fonts
Fonts in Sketch


Sketch styles - text styles
Text styles in Sketch


At the moment XD doesn’t seem to have the same sort of functionality for generating and viewing CSS styles. They do however have the feature Design Specs (Beta), similar to Invision’s Inspect mode. Clicking ‘Publish Design Specs’ generates a URL, where designers and developers can view the artboards, and click on elements to see things like dimensions, colours, font styles and spacing between things. Hovering over the artboard reveals the connections between the artboards. The feature is in Beta stage, and at the moment doesn’t have functionality such as code snippets or the ability to extract assets.


Adobe XD design specs
Adobe XD Design Specs (Beta)



Plugins extend the functionality of programs, allowing members from the community to contribute their own ideas and make the program more powerful and improve workflows. Sketch has a thriving plugin community, which they have embraced by making it easy for users to find and install plugins. On the Sketch website users can search for plugins and download them with ease.

Some of the plugins we’ve found useful at Speedwell include Craft by Invision LABS and Auto Layout by Anima App. Craft allows users to do a number of things, including syncing their designs to Invision and generating content such as images, names and headlines to help create more realistic mockups. Users can also quickly create grid layouts, and find stock images without leaving Sketch.

Auto layout by Anima App is a plugin that allows designers to create responsive artboards, particularly useful when needing to create design mock ups at desktop, tablet and mobile size. Read more about the plugin and download it here.

At the moment XD doesn’t allow plugins, though that may change as XD progresses.


Both Adobe XD and Sketch + Invision allow some level of prototyping. In Sketch users enter prototype mode, and can select objects (eg. buttons) and assign which artboard they will go to when clicked. Designers can add these connections as they go, then they just need to click ‘Sync’ in the Craft plugin and a prototype complete with clickable hotspots will be created in Invision.

Some of the plugins we’ve found useful at Speedwell include Craft by Invision LABS and Auto Layout by Anima App. Craft allows users to do a number of things, including syncing their designs to Invision and generating content such as images, names and headlines to help create more realistic mockups. Users can also quickly create grid layouts, and find stock images without leaving Sketch.

When in prototyping mode, users can see how their artboards are connected through blue arrows, which can be advantageous when mapping workflows. Clicking on an artboard will hide all arrows that aren’t linked to or from that artboard, helpful when you’ve got a large document with a lot of connections.

At present Invision prototype functionality includes hotspots that link to other pages on click or hover (or with various gestures for mobile prototypes), sticky headers and modal windows, but doesn’t yet include things like fillable fields, working dropdowns or much in the way of transitions and animations. People viewing the prototype in Invision can add comments to individual pages, allowing for feedback to be collected and responded to.


Sketch prototyping
Prototyping in Sketch



 Prototyping in XD
Prototyping in Adobe XD


Prototyping in Adobe XD is similar to Sketch, where you can link objects to different artboards. XD has more in the way of transitions, allowing you to choose ones such as dissolve, slide and push, as well as set the transition duration and the easing type. XD doesn’t require users to use another program to view their clickable prototypes, one just needs to click the play button on the top right and a window will open showing the home screen. To share the prototype with others, the user just need to click ‘Publish Prototype’ and a URL will be generated, where anyone can click through the prototype and add comments.


Adobe XD - prototyping window
The prototype window in Adobe XD



Symbols are a powerful feature in Sketch, allowing designers to create an element and use instances of it throughout their design. Whenever changes are made to a symbol, it is updated throughout the document. Adobe XD has the functionality to create symbols too, however they are fairly basic compared to Sketch. In Sketch, designers can create a symbol from a series of elements, such as the example in the screenshot below. They then have the option to change the image and text in different instances of the symbol, without changing the original. In the panel to the right the user can upload a different image, and change the text in each text box. Features such as these make editing designs with repeated elements, such as grids, much easier.


Sketch symbol with dummy content
Sketch - the original symbol


Sketch symbol with new content
Sketch - an instance of the symbol with different content



After comparing the features of the three programs, we decided to stick with Sketch and Invision for now. Overall the combination of these two programs makes for a more powerful, feature-rich toolkit that speeds up the design process and makes the transition from design to dev smoother. Sketch’s strengths lie particularly in its symbols feature and its plugin community, two things that Adobe XD are a bit lacking in at the moment. While Adobe XD is still relatively new, they’ve been adding features and functionality on a regular basis so it may just be a matter of time before it is competing alongside Sketch and Invision.





By continuing to use our site, you indicate your acceptance
of our Privacy Policy and Website Access Rules.