Adobe XD vs Photoshop: The End of Photoshop as a UI/UX design tool
For several years Adobe Photoshop has been the tool of choice for designers wanting to create web sites, mobile apps and user interfaces in general.
Then in 2010, the new kid on the block made its appearance on the market: Sketch, from Bohemian’s coding.
Especially in the last couple of years, it became a great alternative to Photoshop: cheaper and completely dedicated to UI/UX designers, it gradually stole a lot of designers’ hearts and went on to form a loyal and growing community.
Still, a lot of designers never left the Adobe ecosystem as you can’t really do everything with Sketch, and most importantly, this software is only available on Mac, so all Windows users could never switch to it even if they wanted to (unless you run Mac OS on a virtual machine or come up with similar hacks).
So how many people are still using Photoshop for UI design? Hard to say, but my guess is A LOT.
I still see plenty of new UI .psd resources sold on marketplaces like Themeforest or UI8 (UI kits, icon sets, ..), lots of Photoshop tutorials and courses are still being posted on Youtube, Udemy, Lynda and the likes, many projects made with PS are still appearing on Behance, and so on..
Hell, I also never stopped using Photoshop for most of my older projects, even though I use a mix of Adobe XD and Sketch for my new ones.
But things are finally changing for all these happy (or not so happy) Photoshop users: the time for a big shift is coming very soon.
Adobe Experience Design is here.
Why should I switch?
Adobe XD has made some remarkable progress since its launch back in February 2016 and is finally becoming a solid product we can all use in real design projects.
At the beginning of November 2016, Adobe announced the latest release of the Adobe XD beta version during their yearly conference, Adobe Max in San Diego.
Two important and long-awaited features have finally been released: layers and symbols.
The former was a particularly frustrating feature not to have, but now we can finally organise all the elements in our designs via a layers panel displayed on the left side of the screen, where we can easily group, move and rename layers, set their locking and visibility options, and so on.
It’s also pretty cool that only layers belonging to the currently selected artboard are displayed at one given time, reducing the amount of clutter in the layers panel.
Symbols are a much needed new feature too.
Symbols are objects that you can reuse across your designs and change them all simultaneously by only modifying one instance of them.
Let’s say you have designed a green icon which you placed in 10 different screens. If you want to make this icon blue, you can do it by only changing the color of one icon (as long as it’s a symbol), instead of changing it 10 different times. The change will be replicated across all of them instantly.
This is very similar to Sketch’s symbols and to Photoshop’s “smart objects”, except it all feels much smoother and easy to use.
It’s pretty basic now, but I am sure Adobe will bring more improvements in the near future.
Another fairly important change that was introduced at Adobe Max is the possibility to easily export vector assets from Photoshop to Adobe XD: in the new Photoshop version just released (CC 2017), you can just right-click on a shape/vector layer and click on “Copy SVG”.
This will copy that vector object to your clipboard, and once you move to Adobe XD, you can simply paste it and use it in your design.
This is particularly great for people like me who invested quite a bit of money in premium Photoshop icon-sets over the past few years, and can finally use all of them on Adobe XD.
The 3 features I described above are just the latest improvements recently launched by Adobe, but there are plenty more reasons why Photoshop users should consider switching to Adobe XD.
Here are the most relevant, in my opinion:
1. Unlike Photoshop, Adobe XD is really built for UI/UX design
Adobe XD’s user interface has been designed to make the job of a UI/UX designer as easy and straight forward as possible.
The most common tools and features like shapes, borders, shadows, blurs, alignment options, .. are always visible on the screen, you don’t need to look for them in hidden menus or panels. Way less clicks are needed to accomplish the same things you would do on Photoshop.
This seems like a small difference, but as soon as you give Adobe XD a try, you’ll realise how uncomfortable the whole Photoshop experience seems in comparison.
Photoshop wasn’t built to design websites or mobile apps, it’s a photo editing software!
2. Adobe XD is the natural upgrade for Photoshop users
Adobe is putting a lot of efforts into this product, and I’m sure they will “kindly force” Photoshop users to make the switch to XD by improving even further the integration between the two, and probably by stopping developing new UI/UX related features on Photoshop.
I believe all of those companies still using PS for their design and front-end development projects will naturally adapt to the change, as XD is within the same Adobe CC ecosystem.
This is the opposite reason why many companies were reluctant to switch to Sketch: they wanted to avoid paying for another software while still paying for the Adobe CC subscription.
3. Adobe XD is lightweight
The first thing you will notice is how fast Adobe XD really is. It starts up in less than a second, it can handle files with several dozens artboards and never show any sign of slowing down.
Everything feels smooth, fast, pleasant.
This is because Adobe XD was built completely from scratch, only features that are really needed were included and great performance is one of the core objectives for this product.
It’s exactly the opposite of what Photoshop is: still a great piece software, but based on some super old legacy code and packed with hundreds of features you don’t need for UI/UX design, which make the overall experience sluggish and painful at times.
To be honest, at this point even Sketch seems sluggish compared to Adobe XD!
It’s also amazing how small the .xd files are. I made a few tests by creating the same designs on Adobe XD vs Photoshop, and on average, .xd files are 5 to 10 times smaller than .psd files.
Not sure exactly why, but who cares, it’s just great.
4. Adobe XD is vector-based
In an era where new devices with higher pixel densities appear on the market every year or two, it’s really important to be able to scale up or down your designs in a non-disruptive way.
With Adobe XD you can just design @1x and stop sweating about the resolution of the device your design will be displayed on.
And when it comes to exporting assets, it’s as easy as selecting a few options:
Also, another cool thing about vector is when you zoom into a portion of your design and it all looks crisp and nice, no blurry elements or quality loss (aside from bitmap images obviously). Looks pretty neat.
5. The “Repeat Grid” feature
This is just awesome, a huge time saver when designing pages or screens with lists of repeating objects and trying to decide which layout works better.
You can create a list of objects and manage its content (images and text) in a blink of an eye.
See it in action here: https://www.youtube.com/watch?v=42VCB42TKp4
Needless to say, there’s nothing like that on Photoshop.
6. Artboards that actually work
Let’s face it, dealing with Artboards in Photoshop sucks. I never really liked this feature for many reasons, and before I moved to Sketch and Adobe XD, I was still creating a separate .psd file for each screen of a mobile app. Crazy, I know.
This obviously won’t be necessary in Adobe XD. You can design an entire app or website in one single file. And performance won’t be an issue even with a hundred artboards.
No need to mention the amount of time you are going to save with this.
7. Mobile preview that actually works
I always had two main issues when previewing my mobile designs on the “Adobe Preview” app for Photoshop: it’s painfully slow and it disconnects from the Photoshop source every 10 minutes.
Adobe launched a couple of months ago the Adobe XD iOS and Android apps, allowing you to preview in real time your designs on your mobile device.
And by “real time” I mean that you can instantly see the changes you are making on mobile, without any kind of lag or delay, it’s incredibly fast and responsive.
Also, you can interact with your project in Prototype mode, tapping on the hotspots you defined allowing you to browse through your app screens.
For now it only works via USB, but I know Adobe is already considering adding wi-fi support.
8. Prototype, share and collaborate
So far in this article I mainly focused on the design side of things, but a big part of Adobe XD’s power lies in the “Prototype mode” features.
You can easily create an interactive prototype of the project you are designing by simply “connecting” links and buttons of your app or website to other screens/pages included in the project, choosing a type of transition and previewing the final result on your machine or on mobile via the Adobe XD mobile app.
You are also able to share your prototype with your team or stakeholders, who in return can post comments to the whole project or to specific pages/screens.
More collaboration features will be released in the future and they have been showcased at the Adobe Max conference.. they look very promising: https://blogs.adobe.com/creativecloud/collaborative-design-with-adobe-xd/
Having all of these features under the same roof as your design tool is quite remarkable.
By using Photoshop, you need to rely on external prototyping tools like Invision or Marvel. With Adobe XD, you’ll soon realise that these tools are not as indispensable as we thought..
9. Adobe XD is likely to be the next big thing
3 simple reasons for that:
- Windows support: not everyone likes or can afford a Mac. And Windows designers and companies who could not use Sketch will finally be able to adopt a new software totally dedicated to UI/UX design. We are talking about a lot of people.
- Adobe CC subscribers: Adobe already has a very solid user base to sell this product to. And as I said above, for each UI/UX designer still subscribed to Creative Cloud it will be just the obvious choice to give XD a try.
- Adobe has a lot of money: they will push the hell out of this product from a marketing point of view. I believe they already started doing that and you can already see some big names and companies being associated with the XD brand.
These are the first few reasons that came to my mind, but I just suggest you guys install Adobe XD and have a go at it. After just a couple of days you will notice a big difference on so many levels.
Obviously I am not claiming the product is perfect yet, there’s still a bit of work to do, and after all it’s still a Beta version.
Some essential features like guides, vertical/horizontal flipping, text underline, gradient swatches, export to .jpg, .. are still missing. And some of the features that are already included, are still pretty basic and could be improved.
Also the Windows version is not out yet, but Adobe claims it will be released by the end of 2016.
But I think Adobe did a great job in laying some solid foundations for a product that in just a few months will start to look very competitive even compared to a pretty advanced tool like Sketch, let alone Photoshop.
Photoshop served us well for a long long time and it is still a strong piece of software for what it does best: photo editing. But after the almost fatal blow struck by Sketch in the past few years, I think Adobe XD will finally mark the end of Photoshop as a UI/UX design tool.
Give XD it a try and let me know what you think!
If you’d like to see Adobe XD in action with some real app designs, check out my free tutorials on the XDGuru’s Youtube channel.
You can also download our first Adobe XD Free UI kit and practice with a real app design.
PS: I am in no way associated with Adobe. I just really like this product and decided to start a blog about it.