What is Adobe XD and why should you use it?
Adobe XD is shaking up the design world, but is it worth purchasing?
Adobe was the undisputed king of the design market for years, offering the go-to tools for all things visual, including UI design. However, killer app Sketch disrupted the market, along with InVision and Figma. At a time when UI design was starting to take center stage, Adobe’s dominance in this segment was challenged.
Adobe XD is their answer. It has a lot of the Adobe look and feel that professional and amateur designers are familiar with, but it’s more focused: every one of its features is designed to make wireframes and prototypes come together with ease. And designers are calling it a game-changer. Many Sketch advocates are switching over, and those who stuck with Photoshop are waking up to the fact that Adobe XD is an amazing compliment to the godfather of visual design apps.
Why? Why should you use Adobe XD? Let’s break it down and go over some of Adobe XD’s killer features.
1. It’s Fast
When you’re doing UI design, speed isn’t just a convenience. An app that responds instantly to your every touch and demand changes what designing feels like. Instead of harnessing a cumbersome tool, you’re enjoying a direct brain-to-page connection. You won’t lose any ideas or your momentum, or be irritated by laggy cursor movement.
Adobe XD is just inherently faster than Photoshop, given that its suite of tools is smaller. Whereas PSD files can quickly balloon in size, because there’s so much information to be stored, XD’s remain small. On any modern computer, XD instantaneously responds to requests that would be demanding for many apps of the past. As well, its stripped-down interface is easier to master.
2. Repeat Grid
There are lots of features on XD designed to speed up routine processes. Perhaps the most exciting is Repeat Grid.
At some point in the design of any prototype, there will probably be some repetition. Whether it’s elements on a nav bar or a grid of photos. With previous applications, designers spent a lot of their time clicking and dragging thumbnails, fiddling with their placement, and then doing it again when the prototype didn’t end up looking quite right.
Repeat Grid is XD’s potent answer to this common situation. In XD, when you want to repeat an element, you don’t have to set up a table or copy and paste anything. You just grab ahold of it and drag outwards, and the element repeats automatically in the space you establish. Work that took a fussy half-hour is done in five seconds.
Moreover, that work is easy to adjust. Once you’ve established a Repeat Grid, it’s easy to manipulate spacing, so if your client decides that the thumbnail gallery is looking a little busy, you can just click a button.
This is just one of a number of time-saving features in XD. But Repeat Grid is a definite high point, a “wow” moment for designers who are tired of spending their time fussing with little boxes over and over again.
When you’re designing a mobile app, having a static image of the interface is all well and good, but knowing how it will feel in motion is necessary. Attractive progress bars and pleasant scrolling make a huge difference in user experience. Where would Tinder be if not for its trademark swipe? And yet, UI design tools of the past didn’t make it easy to incorporate animation.
Adobe XD’s Auto-Animate is a giant step in the right direction. As its name implies, it automates motion design. All you have to do is create two art-boards with the same layer groupings, manipulate one of the layers, and let Auto-Animate do the work. A variety of trigger types can be applied, such that the prototype displays the motion upon a finger-scrub or button-press or even voice command.
This feature takes a little bit of getting used to, and requires some advance planning. Differences in layer distribution between the two art-boards can mess up the animation, and tweaking it after the fact can be time-consuming. However, if you’re designing an interface with a view to use Auto-Animate eventually, you’ll be able to bring motion to it with ease.
Given that Adobe XD isn’t intended as a complete visual toolkit, designers will still want to use Photoshop for image manipulation. That’s why Adobe XD allows you to cut and paste assets from Photoshop directly into XD. As you fiddle with a banner to get it just right, there’s no need to import and export and then do it all over again.
What’s more is that XD plays nicely with other design apps. If you find an image you like in a web browser and you want to incorporate it into your design, you can just click and drag it directly. And, remarkably, there’s full Sketch integration—it’s unusual that an app meshes perfectly with a third-party competitor, but in the case of XD, elements can move back and forth seamlessly. So, you won’t have any problems with taking over a project started in Sketch, or even with using both apps in conjunction.
But it’s not just visual design apps. XD also integrates with productivity systems. For example, you can get Slack to send you notifications when a team member comments on your design, if you’re using XD’s collaboration features.
The full list of integrations is too numerous to get into here, but you should know that this is just the beginning. Check out Adobe’s site to understand just how vast the possibilities are.
5. Design Systems
Managing visual assets over multiple documents is vital to creating a unified look and feel for a brand. If your client already has any established visual identity at all, they’re going to want you to preserve it perfectly. Adobe knows this, so they’ve made it incredibly easy to manage assets across multiple designs. Using libraries stored in the cloud, you can bring in assets of any kind, from color palettes to polygons, and access them at a click, thus easily maintaining a design system.
As well, if you’re creating a visual identity from the ground up, XD’s controls make it simple to tweak and manipulate different elements across multiple art-boards or projects. If you decide that a particular hue or typeface is just a little off, you can link everything together such that everything with that characteristic is adjusted at once. In this fashion, it’s easy to get a bird’s-eye-view of how little tweaks will affect different elements of a project, and to make those changes universal if desired.
Working with other designers, while a necessary and wonderful part of many projects, creates lots of opportunities for version control disaster, and sending a design back and forth can be a clumsy process.
Adobe XD averts version control disaster with document history in shared files. If anyone makes an unwanted change, it can be rolled back. As well, XD recently incorporated real-time co-editing. Instead of having to wing a file back and forth with your collaborator, you can both edit it at the same moment remotely.
7. It’s Getting Better
One of the struggles of UI design is that it’s always evolving. Do you remember what mobile apps looked and felt like three years ago? It’s actually kind of hard to. Best practice in layouts and navigation is evolving, and so is taste, which is impossible to predict. Adobe XD’s tools may be powerful, but if UI design remains in flux, as it apparently always does, they may not be enough.
Fortunately, Adobe is on it. This year alone, they’ve released several significant features to keep in lockstep with ongoing changes in the practice of design. For example, “stacks” allow for the grouping of elements that remain in place as you scroll through the art-boar, letting you see what a floating activity feed or an elaborate nav will look like in the context of a whole page.
As well, offline support has been added to co-editing, meaning that you can contribute changes to a collaborative document online, which are queued up and pushed to the collective document once your connection is restored.
Adobe, in designing XD, has apparently put a great deal of thought into a UI designer’s needs. Many aspects of a UI project that previously required active consideration—collaboration, the maintenance of a design system, integration with other workflows—are simply taken care of by the included tools. All of your energy can be devoted to creativity.
Ultimately, XD isn’t the Godzilla of visual design like Photoshop is. Even if all you do is UI design, probably won’t want to throw away your Photoshop subscription. You’re going to have to tweak some large images eventually. But once you get used to XD’s tools, you’ll find yourself sailing through routine tasks in a previously unthinkable way.
Check out a free trial here if you’d like to experience the power of XD.