Adobe XD – your new favorite design tool?
I’ve spent the last 10 years working as an interaction designer, full time. The type of tasks that I do in my job is varied, but user interface (UI) design has always been an essential part of the job.
As with any profession, either you’re a hairdresser, a taxi driver or a designer, it helps to have the right tools that simplifies the practical part of the work.
For me as an interaction designer, a great tool needs to help me translating my ideas into visual and functional prototypes, with as little friction as possible.
Over the last years I’ve used many different tools such as Axure RP, Balsamiq, Photoshop, Sketch, Illustrator, Marvel etc. All of these are great tools solving different needs. And now there’s a new kid in town – Adobe XD. I’ve used XD a lot the last few months, and here is my experience so far.
Design at the speed of thought.
Adobe claims that one of the core motivations for creating Adobe XD is to enable designers to design at the speed of thought – removing friction in the design process wherever possible. To me, this sounds almost too good to be true. After using Adobe XD on a daily basis the last few months, I can say that Adobe is not far from fulfilling their promises. XD is amazingly fast!
In UI design, one of the most common pitfalls for the designer is to fall in love with your first ideas and not explore enough options and concepts at an early stage in the design process. I think one of the reasons why this is happening, is because it may be tempting to go “high fidelity” too early. With Adobe XD, it’s easier than ever to start “low-fidelity” and move to “high-fidelity” when the time is right. I would say that XD has allowed me to work more efficiently and explore several ideas simultaneously.
In the initial design phase, I still prefer using pencil and paper over any digital tool. Why? Because I have found dropping all distractions makes me better at thinking more clearly and keep focus of the problem I’m going to solve. Anyway. Sooner or later the ideas from the paper sketches will have to make their way into the screen to become a digital prototype. That’s where Adobe XD comes in. Now let’s see what this new tool can do.
Repeat Grid
One of the features I really like with Adobe XD is the repeat grid. Create one or more objects once, select the objects and enable the repeat grid. Now you’ll be able to repeat the containing objects on the x-axis and y-axis, adjust the spacing between the objects and adjust the appearance of the objects as a group or individually.
Think of all the opportunities this provides for the automation of tedious tasks. Take a table or a list with text and images for example. Or a grid with images in an image gallery. These types of tasks did previously require a significant amount of manual fiddling. If you’re accustomed to using Photoshop for UI design, you will absolutely love the usability of the repeat grid. It enables you to spend more time exploring several layout types and quickly see how your layout will work with more data.
Reusable objects with symbols
If you’re familiar with master objects in Axure, symbols in Adobe XD works just the same way. Say you have an object that will be used in multiple artboards, you can mark the object as a symbol. Any changes to the object will be reflected anywhere it’s used. So if you need to change the background-color of your top bar, just make the change once and you’re done. Sweet.
Design → Prototype → Share → Get feedback → Repeat
The standard UI design process is more or less something like this. In the earlier days I have been relying on a set of different tools to support this process. One tool for design (Sketch, Photoshop, Illustrator). One tool for prototyping and sharing (Marvel, InVision) and so on.
With Adobe XD all this is integrated in the same app. That means you can design from low fidelity to high fidelity, use multiple artboards, link it all together and share your prototype and receive feedback without ever leaving the app. The integrated workflow is a big plus, and in my opinion the killer feature of Adobe XD.
Export assets for iOS
If you’re designing a native app, you will probably need to export your design assets for handover to the dev team. As long as you use vector objects, you can design in 1:1 and the tool will automatically provide the @2x and @3x versions for you that’s required by iOS.
Export assets for Android
The same goes for Android. Design in 1:1, select Android in the export settings and the tool will automatically provide the folders and file types that you will need in your Android project. Easy for you as a designer. Easy for the developers. Everybody is happy.
Live preview a prototype on your phone? Sure.
Connect your phone to the computer using a USB-cable, install and open the Adobe XD app on your phone and make sure Adobe XD is running on your mac or pc. Voila. Your app prototype will run on your phone. Any changes you make to the app design on your computer will be instantly reflected on your real device.
Share prototypes with your team
Sharing your prototype is as easy as clicking a button. Just hit the ‘Create Link’ button and your prototype will be live on a a public URL hosted in the Adobe Cloud.
You should be aware that Adobe has not implemented the option of password protecting your prototypes yet. This feature is in the roadmap for a future release.
UI Kits
Adobe XD comes with a few common UI Kits out of the box. From the menu you can open UI Kits for iOS (Apple), Material Design (Google) and Microsoft Windows.
Facebook has also released a comprehensive UI Kit for iOS10 that can be downloaded here.
If your project will be using a responsive front-end framework like Foundation, you should check out my Adobe XD UI Kit for Foundation here.
Using a UI Kit will allow you to spend your precious time on solving real design problems, instead of recreating the standard UI components you need in every project.
Final conclusion
You might ask if Adobe XD is a production ready tool that can be used for your next project. The boring answer to that question is: It depends.
Does Adobe XD provide a simple, fast and easy to use interface with some nice features that can speed up your workflow? Yes.
Is it perfect? No.
Should we expect a beta product to be perfect? No.
Do we have a chance to provide feedback and influence the development of the product? Indeed. Adobe has set up a user voice site where the community can provide feedback and submit feature requests and bug reports.
I really like what I’m seeing so far in Adobe XD. If you want to try for yourself, you can head over to the download page and get the latest version (available for Mac OS and Windows 10).
