Adobe XD — The new hat in the ring of prototyping tools
Functions, Workflows and Use Cases of the Preview Version
Note: Adobe XD has seen monthly updates since June 2016 — a lot of functionality has been added, including the release of the Windows version and companion apps for Android and iOS. I’m planning to write a follow up article to complete my review of the product. Please follow me if you’re interested. In the meantime you can check out http://xd.adobe.com for the latest information.
‘Built from scratch. Built for speed.’ The new prototyping and screen design tool ‘XD’, short for ‘Experience Design’ follows totally different priorities than the complex design applications Adobe is known for.
The public preview version has been available since March and has been updated with new features every month. I have worked with the program extensively over the past months and have researched and discussed with designers and UX practitioners on- and offline to evaluate how this program fits into our tool set. To learn more about the product, I enlisted as tester for the closed beta version. Reading various articles published by Adobe and participating in a workshop by the program’s product manager, Demian Borba, at UXcamp Europe this year, provided me with some additional context in how the software is being developed.
With so many tools emerging in our field, I hope this two part story can provide some guidance on whether this product might be valuable for you and your team.
This first part is about the product itself. I will present it’s functions, workflows and the use cases of the preview version in the real world.
Functions, Workflows and Use Cases of the Preview Version
(Version 0.5.6, June 2016)
The current Version is freely available to all creative suite users on the Mac.
First impression
For everybody knowing his or her way around in any design program the tool is very easy to grasp. The interface is clearly arranged and allows direct manipulation on everything you see. Compared to other Adobe products, the simplicity of the interface feels radical. Although we can expect that future versions will have to add some elements here and there, I embrace this intent for reduction. For a preview version, it is remarkable that nothing is sluggish or works in an unexpected way.
In it’s core, it is a simple vector graphic tool that maps the different states of an application or website on separate art boards next to one another.
Quite surprisingly, there are still a few basic graphical features missing that one would expect in every Adobe Design tool: A panel for layers and the ability to manage typographic formats are to be mentioned. Yet, these are features that are underway.
Building your product works in two modes: Design and Prototype. In Design mode you assemble the graphical elements of your interfaces, in Prototype mode you can define interactions by applying links to individual interface elements that trigger a transition to another art board.
Switching between these two workflows is seamless and keeps you in control of the scope of your input.
Interface Design
One of the highlights of the product and a veritable wonder in productivity is the repeat grid function. It allows the user to fill an area with repeating interface components. When editing those components changes to the content apply to a single instance, whilst changes to the layout apply to every instance.
Furthermore, the current version provides few features that directly support the specific creation of user interfaces.
The UI Kits are in fact sample files containing standard UI elements for android, iOS and Windows. They are totally useful and look authentic, but lack any interactive behavior or options for configuration. You can define scrollable areas and design grids, but their implementation is still basic. We can expect that those functions will be fleshed out in future versions.
Prototyping and Sharing
When using the program the one thing that instantly struck me was the direct access to manipulate the working product: There is no compilation step for previewing your work. When running your prototype any change in the design and interaction is applied to the functional prototype live. Coming from web development, where any change requires you to save one or multiple files and reload your browser in order for anything to take effect, this is a very satisfying experience.
What’s more, once you have results you feel like sharing it takes just one click for your prototype to be deployed to the creative cloud and a generic link is provided for you to bring others in on what you have created. This is an extremely streamlined process in comparison to what other products provide.
Screencasts
Another great feature to communicate your work is to build screencasts from your own interaction with the prototype. A recording button is always available in the prototype window. First click starts recording, second click stops and opens the save file dialog for you to name a mov file of the recording. Audio recording is not included.
I see potential for this feature in simple testing scenarios as well, allowing you to record the interaction of a person using your prototype. It’s not for lab tests, but being able to record how the guy from accounting solves any given task on your prototype can potentially be an eye opener.
Limitations
Well, there are some and they might be relevant to you. This list should give you an overview along with some indications on whether a solution is underway:
Windows Client
first Windows version unofficially announced for this fall and it should be feature wise on par with the Mac client by the end of the year
Responsive Behavior
this is a tough one, I have no idea if it’s on the road map
Bitmap Image Editing
I hope not — doesn’t seem relevant to the scope of this tool
More sophisticated typographic Tools
constantly improving with every version
More graphic Filter
is already improving, needs to be on par with what is possible in css and svg
Animation e.g. Microinteractions
I know they are working on it, but I suppose that’s a tough one, too
Organized Formats for Text and Forms / Stylesheets
no clue, but seems relevant to me
Layer Management
I know they are working on it, but I don’t have a timeline
Code Export
I don’t think they will build another GoLive, but the ability, to extract some CSS snippet here and there would be nice
Versioning
no clue, yet, it seems relevant to me
The bottom line
Although, this is still a beta version of the product I believe this product is ready to solve real world tasks for a lot of teams and projects. The list of limitations may seem long but no other product in the market comes close to deliver on all of those features. In my opinion, XD makes up for lacking some advanced graphic features by streamlining the process of mapping your whole application in a single file and enabling you to present it’s functionalities with a single click in the Creative Cloud. If you feel you cannot achieve the level of visual detail in XD that you want to present, I would advise you building your homepage and maybe your pattern library once in Photoshop and the rest of the application in XD.
In fact, I’m willing to go out on a limb and say that there are few scenarios where I would advise against using it (yet). Those being:
1. Design is not your main profession and the occasional tinkering does not justify investing in a creative suite
Maybe Adobe will come up with a separate license for XD in the future.
2. Your team works cross platform or windows only
Have patience.
3. Your organization is large and relies on very rigid and or well established workflows
I would suggest to wait for the product to mature a little more before putting your head on the line, just to be safe.
4. Your main focus is to come up with stunning visual effects, interaction and usability are less relevant
You should be comfortable just sticking to Photoshop.
Joachim Tillessen is partner at emjot, a Hamburg based company specializing in custom tailored web applications and corporate design solutions. On top of working hard on the best design and UX solutions for his clients, he’s currently doing research on the future of prototyping in digital product development.
If you’re interested in his findings, follow him on medium and twitter and join the conversation. Thank you!
