Adobe XD vs. Sketch – Which UX Tool Is Right for You?
After years without a dedicated UX tool and the space owned by Sketch, InVision, and Figma, Adobe started developing XD. Let’s look at XD and how it compares with Sketch, the market’s dominant choice.
After years without a dedicated UX tool and the space owned by Sketch, InVision, and Figma, Adobe started developing XD. Let’s look at XD and how it compares with Sketch, the market’s dominant choice.
With a decade of experience in UI/UX, Sérgio has worked in a wide range of industries such as education, enterprise, and entertainment.
Expertise
PREVIOUSLY AT
A UX designer needs many tools to complete the many stages of the UX workflow from research to design to prototype and handoff. If you do your work on a PC, you are probably haunted by the constant mention of Sketch, a popular, streamlined vector graphics editor with countless useful plugins that is quickly becoming an industry standard—but only available on Mac OS. This means that, unless you have an Apple machine, you are left out. But now Adobe is actively working on a proper cross-platform Sketch competitor (and lookalike?), after years of absence: Adobe XD.
![Adobe XD User Interface](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F124228%2Ftoptal-blog-image-1505882906541-adc2280c98fc6eaadcd7c916eac708fc.jpg)
![Sketch User Interface](https://assets.toptal.io/images?url=https%3A%2F%2Fuploads.toptal.io%2Fblog%2Fimage%2F124229%2Ftoptal-blog-image-1505882936666-2a4a02836e20df333fe73db0d21e9010.jpg)
What Is Adobe XD?
Adobe Experience Design CC, or Adobe XD, is a lightweight vector graphics editor and prototyping tool that was announced at Adobe MAX 2015 as Project Comet. The software launched in preview in March 2016 as part of the Creative Cloud, and nowadays it is in beta phase, receiving updates almost every month.
Before that, Adobe was working on adding features for UX designers on their established tools like Photoshop and Illustrator. Although they are both great pieces of software, they are neither lightweight nor streamlined for this type of job. Over the years—and especially after the 2013 deprecation of Adobe Fireworks (the classic web-oriented prototyping tool acquired from Macromedia)—more and more UX designers felt that the Creative Cloud did not match market expectations. So, they jumped to Sketch (if they had a Mac). While Adobe’s response for this mass exodus was a bit late (Bohemian Coding launched Sketch a full 6 years ago) it is worth the wait, especially if you have been limited to using less adequate tools on your PC. Let’s compare Adobe XD vs Sketch
User Interface and Exclusive Features
When you open Adobe XD, the first impression you’ll have is that the interface is very familiar, both for Sketch users and long time Adobe fans. Adobe departed from the expected Creative Cloud darker buttons and menus, and choose to offer the best of two worlds. Unlike Sketch, you’ll see a set of tools on the left side of the screen, but also the taller layers panel and dynamic properties on the right, as seen on Sketch. It’s a breeze to use, and easy to learn, no matter what tool you used previously.
Repeat Grid
Adobe XD also has a set of unique features like the Repeat Grid, a tool that lets you replicate a group of objects like a Material Design card with variable data and configurable spacing between the copies.
![Repeat Grid feature in Adobe XD](https://uploads.toptal.io/blog/image/124230/toptal-blog-image-1505882972366-9a7619922848832575f37779d5a2f974.gif)
Prototyping
In XD, you can create an interactive prototype without needing third-party plugins as you would in Sketch. The Adobe prototyping editor allows designers to visually connect interactive areas to other screens using wires and setting up transitions. With the interactive prototype ready, you can publish and share the prototype, which can be viewed on the web or with the Adobe XD mobile app. XD prototypes, however, don’t have support for gestures or fixed sections like headers yet, something that is possible on InVision and other prototype-only tools that connect with Sketch.
![Prototype feature in Adobe XD](https://uploads.toptal.io/blog/image/124231/toptal-blog-image-1505883031913-76eafc1210183fe57920423995c88aeb.gif)
Assets Panel
In the August 2017 update, Adobe added the Assets panel, a clever way to bring together an interactive style guide with colors, character styles, and symbols. When you change something in the Assets panel, every use of the asset in your artwork follows. Sketch also has color variables, character styles, and symbols, but each one contained in their own panel.
![Adobe XD Assets Panel](https://uploads.toptal.io/blog/image/124232/toptal-blog-image-1505883125127-34ba8ce9047b68eda8c1ea451f6b2473.gif)
Adobe announced some of the [next features to appear on ](https://www.adobe.com/products/xd/solutions/design-collaboration-tool.html](https://blogs.adobe.com/creativecloud/collaborative-design-with-adobe-xd/). One of them extends the Assets feature, allowing the designer to publish the project’s style guide with downloadable fonts, assets, and the colors hexadecimal codes, alongside the interactive prototype and an inspection feature for developer’s survey of elements inside the prototype. This is called the “handoff for developers” and is already possible in Sketch (and Photoshop) using plugins like Zeplin. Another future feature being teased is the real-time collaboration inside XD, something that resembles the collaboration feature present on Google Docs and already available on other UX design tools like Figma.
Sketch (and its plugins) vs. Adobe XD
Features | Adobe XD | Sketch |
---|---|---|
Vector graphics | Yes (and includes Adobe Illustrator in CC subscription) | Yes |
Advanced image editing | No (but includes Adobe Photoshop in CC subscription) | No |
Lightweight | Yes | Yes |
Prototyping | Yes | No (but available with third-party plugins) |
Assets export | Yes | Yes |
Handoff with online style guide and inspector | No (announced as a future feature) | No (but available with third-party plugins) |
Symbols and styles | Yes | Yes |
Repeat grid | Yes | No |
Document grid | Yes | Yes (with columns and more options) |
Plugins | No | Yes |
Collaboration | No (announced as a future feature) | No (but available with third-party plugins) |
MacOS version | Yes | Yes |
Windows version | Yes (Windows 10 or above) | No |
Price and licensing | Beta version is free, it requires to have an Adobe ID. Final pricing will be announced. | USD $99 for a year of updates, but you can keep using after that without updates |
When you see the bigger picture, it becomes clear that Adobe intends to make XD do not only everything that Sketch does as a vector graphics tool but also its plugins, covering the entire UX design workflow. From design to prototyping to handoff, Adobe XD will probably be the definitive UX designer tool, but what about today?
Is It Time to Switch?
Adobe XD is first and foremost for Windows users (who can’t use the macOS-only Sketch) and current Adobe Creative Cloud subscribers (who wouldn’t need to pay more for XD in addition to Photoshop, Illustrator, etc.).
There are many UX designers already making the jump, either because they are Creative Cloud subscribers even on macOS, or because they believe XD will be the next standard and are satisfied with the current feature set. If you are an experienced Sketch user, you’ll enjoy an overall better interface, unique XD features, but will also have to deal with the current limitations and lack of plugin support. In any case, give it a try and share your impressions with us!
Further Reading on the Toptal Blog:
Sérgio Estrella
São Paulo - State of São Paulo, Brazil
February 1, 2017
About the author
With a decade of experience in UI/UX, Sérgio has worked in a wide range of industries such as education, enterprise, and entertainment.
Expertise
PREVIOUSLY AT