In the last couple of years there has been lots of different software around made for UI/UX Designers.
Sketch, still predominantly at the top of all, seems to decrease slightly year by year due to its' very strong amount of competitors. Figma, Framer X or invision Studio to name a few.
In the past, I tried out various programmes to create not just well-looking UI, but also wireframes and high-fidelity prototypes. I was faced with a piece of software I honestly had very little faith in (at the beginning).
I am talking about Adobe XD, Adobe's own UX/UI Tool.
In the beginning, I had (as I said) very little faith in it. Compared to its' competitors like Sketch and the upcoming invision Studio it honestly seemed kinda old-fashioned in the opportunities given for designers.
But then every Adobe MAX (Adobe's yearly conference in which they present the upcoming features and software) they presented an update that was always more stunning than the update at the conference before and slowly, but reasonably fair you could argue that Adobe XD should become one of the big players.
In this article, I am going to tell you, why Adobe XD is indeed a great tool for UX/UI Designers and why you should consider hopping onto the Adobe XD train.
Seamless work with Adobe products
Because Adobe XD is part of the Adobe software palette, it offers many advantages when it comes to importing and exporting files.
You can not just copy images and graphics, whether they are .svg, .ai, .pdf or .png from almost any Adobe program to XD but also vice versa.
Furthermore you can export your designs into Adobe After Effects to create incredible stunning animations to show what the product will visually look like after frontend development.
Another cool feature is that by right-clicking on images and graphics in XD, you getting the option to edit them directly within Adobe Photoshop. After saving the file in Photoshop, the image or graphic automatically updates itself in XD.
Besides the Photoshop and After Effects feature there is something else, that is common for (most) Adobe Products, but extremely valuable.
You can directly work with Libraries of your Adobe Creative Cloud, which makes it incredibly easy to collaborate with other designers and use their assets for your design or even add new ones. Images, graphics, colours – it's all in there and can be used to speed up your workflow.
The Auto-Animate Feature
Adobe XD has evolved from a primary click-through application to provide you with various prototyping options including time, tap, drag and voice.
Furthermore they added Auto-Animate to be combined with drag movements and generated micro-interactions through artboards for rich prototype experiences such as onboarding flows, carousel animations, cards and lists or progress indicators.
Auto-Animate produces incredible effects and transitions that help you convey an immersive end-user experience. Drag Gestures in XD goes one step further with the Auto-Animate feature by allowing you to mimic the drag experience of touch-enabled devices.
The same update that Auto-Animate brought us, allows us to interact with our prototypes like never before. Speech triggers and speech replay let us take users outside of the computer, enabling prototype voice control. They have made this unique to XD, because (currently) no other software for prototyping has got that feature. As new voice-first services such as Alexa, Siri and Google Assistant are increasingly growing in importance, users are getting used to talking to their phone. That is what makes this critical. Back to the prototyping feature for the voice. This could be made use of by two possibilities:
- Designing interfaces that rely on voice navigation
- Making a design presentation without “physical” input
Make your dialog flows first before you start designing based on voice interactions. Context flow visualizes the entire user-machine interaction. The user asks and the machine replies.
Components and Component States
Something that is already part of some similar products is the Components Feature.
A component is basically a saved element that can serve as master component. By saying that I mean, that when you copy that element to use it on other artboards and then override the master component (the element you chose to make a component) every other element that is related to that will change its' appearance too. This is pretty convenient, when you're having an element that appears quite often and then needs a change later on in the design process. Without having the issue of editing this element on every artboard you can change it on every artboard at the same time.
Components can either be elements (icons or a group of different elements), text styles and colours.
Something that is not present in most software in this field of design are Component States. By adding these states you now give, buttons for example, a state for normal, hover and tap/click.
This can be seen within the prototypes as well as in some kind of overview within the developer handoff.
You need some little help? Whether it is about connecting your voice prototype with your amazon alexa, wonderful color palettes or persona templates generator, Adobe XD got them all.
Plugins will help you not just in offering you cool features to create better designs, but can also help you speeding up your workflow.
Test if your design is visually friendly for colorblind people directly in Adobe XD with the Stark Plugin or setup a quick user test with the UserTesting Plugin from UserTesting.com.
Here a quick overview, what can be added as Adobe XD Plugins:
- Dropbox Paper
- Google Sheets
or and MacOS
One of the best things about Adobe XD is, that it is available for Windows and MacOS, which, especially at the beginning wasn't very common for UI/UX Design software on the market. Back then the Windows version always a bit lacking of features, now offers the same amount as the MacOS versions do.
Seamlessly working, even when two designers (one on MacOS, one on Windows) are working on the same file simultaneously.
Since the end of 2019 real-time design collaboration is a thing. Just invite other designers through the invite feature in the right upper corner.
After someone accepted the invitation they can open up Adobe XD and find the file under the Shared with You Tab in the Home Menu, that opens up when starting Adobe XD. Alternatively they can follow the link in the email invitation that opens the file.
When a designer joined the project, an avatar of their Adobe account will be shown at the right upper corner, next to the invite feature. Every design gets a certain color, that can not just be seen in the right upper corner, but also on the element the person is currently working on.
Any design process will cause many difficulties in handing developers the finished product. Everyone has the same issue: the problem with the assets. In "space" always the cheeky assets get lost. To solve the problems and battles between designers and developers, the application currently known worldwide as Zeplin was created by a small team from Istanbul and San Francisco. I suppose Zeplin solution made Adobe XD put the opportunity "share for developers" in the application to help developers and designers collaborate effectively.
This doesn't even mention how the integrated features inspire you to remain in what you want in Adobe XD.
Adobe XD generates precision UI design specifications, assets, and code details automatically. When editing, you can assign any selected elements, icons, or images to "asset." Then developers in the developers view will access them to an appropriate size. We no longer watch massive design files get lost or fear sudden design changes because we don't need to send the source files to them.
We know them, we love them. Blend modes can help make photos more interesting or just create interesting effects. As we know this effect can be created in Adobe Photoshop, but now you can do this directly within Adobe XD, saving you quite a lot of time.
Adobe XD is the all-in-one tool. It combines design with prototyping and offers you the opportunity to share for various different predefined cases, whether it is specifically for developers, user testing or intended as a general presentation.
Adobe updates XD every month. With every update come new features and minor fixes to improve the overall quality of the software.
Some things Adobe is currently working on (State: 4rd of February 2020):
- Import animated GIFs
- Import videos
- More default animations
- Static/Fixed objects between transitions
- Scrollable areas within artboards
- Cropping photos within Adobe XD
- Multiple fills, borders and shadows
As you can see, two of these are already existing in Sketch by native standards, but Adobe is following up very fast and prioritizing well in deciding what is rather important in development and for their users.
You can access your files everywhere and on every platform. Seamlessly working with already existing Adobe Systems such as Libraries and expandable with a big amount of high quality plugins.
With that amount of actually useful features, and the speed of development on AdobeXD it seems like a really good alternatives to already existing design tools such as Sketch, inVision Studio or Figma.