What is the use of Adobe XD

Adobe XD - for the perfect UX workflow?

In October 2017, Adobe released Adobe XD, the first beta version of its tool advertised as a “complete solution for UX / UI design”. As a graphic designer, I have worked in the workflow with Photoshop and Illustrator for years and wonder to what extent XD has been able to meet the expectations of a UX tool so far.

A little excursion into the past to illustrate the possible impact of the introduction of the new tool: In the print area, Adobe has practically displaced the competition from InDesign Version 2.0 at the beginning of the 2000s and has set a standard in interaction with Photoshop and Illustrator and the smooth output of printable data set. It is exciting to see whether XD can already cover the various processes in the UX cosmos and whether it has the potential to erase tools like Sketch from the landscape as uncompromisingly as InDesign did with QuarkXPress back then.

Although XD is still in the beta phase, the program already comes with some features that feel good and give a great first impression. A tidy interface with a few tools that, similar to the structure of the largest competing product Sketch, receive a suitable context menu in the right part. If you use the “Basic Tutorial” to get started, the program is quickly accessible. In addition, Adobe itself offers a few tutorials that explain further functions and features using practical examples. The reduced interface makes finding the most important tools quite easy. When working with vector elements and fonts, however, the functions do not have quite as many details as, for example, in Illustrator or Photoshop.

Designing screens and prototypes

XD distinguishes between the design and the prototype mode. For working, it offers a taskbar with the most important tools and a suitable context menu with additional functions. In the taskbar, you can switch globally between levels and elements, among other things. Levels and groupings can be named and locked. Basically a good prerequisite for setting up your screen cleanly.

Paths

The tools for layout in design mode are selection tools, various vector tools (rectangle, square, circle, line and the pen), text, drawing areas and the zoom function. The possibilities of the vector tools are quite manageable and work like the well-known Adobe programs. The functionality of the Pathfinder has been integrated into the context menu. A practical thing, although I lack the direct selection tool when dealing with paths, especially to remove individual anchor points. The annoying clicking into nested groups would also make it superfluous.

text

With some functions, you have the feeling that Adobe was not entirely clear about the level of detail in which they should be integrated. When creating texts, the choice is made to organize large amounts of text in a continuous text field in addition to the standard text field - a function that is needed for the sensible handling of texts. On the other hand, basic character formats such as “All in Capital” and others are missing. The running text box cannot be trimmed to the last line. This becomes a bit problematic at the latest when it is output in the specification, since design engineers cannot pull out the correct distances at these points.

Artboards

Adding or changing artboards is very simple. An area can simply be drawn free-hand using the tool. XD recognizes existing areas and anchor points from existing elements and offers the possibility to orientate yourself on them. You can also choose from templates for drawing areas. Drawing areas with various sizes can also be created in a document. If you want to define a scroll area of ​​a drawing area, this can be done quickly using the drawing area tool. When working with graphic or text items, the same applies as when dealing with the drawing areas. Similar to the “intelligent guide lines” familiar from Illustrator or InDesign, objects and drawing areas can be aligned and created with pixel precision.

images

XD decided to embed image data in the document. Probably the better way to prototype or distribute the file. The option of including PSD files and updating them in real time, as in Illustrator or InDesign, would be charming. This would save you the constant creation of image data and repositioning.

Features

Repetition grid

Repeat elements in a grid quickly and easily? Indeed, this feature is implemented well. The spacing within the repetition is very easy to adjust. Deviations in colors and labels can be changed quickly. If you use picture boxes, inserting multiple pictures via drag and drop is a great solution. Simply drag the pictures into the repetition grid, drop them and the pictures sit in the picture boxes.

Style templates and symbols

Another great feature is the handling of symbols and formats. If you select objects on your drawing area, you can define them as symbols or formats with one click. XD recognizes elements (e.g. colors and font) also within groups and stores them in the template palette. These elements can be easily adapted globally and are adopted in all relevant places in the document. When dealing with colors, I think it's a shame that you can't name swatches.

Live preview

Another “awesome” feature is the “live preview” in the device. The prototype can be assessed in its original size "in use" via a USB USB cable and the XD app on the device. So you have the direct test on the object. Fonts, colors, proportions or interaction are easy to judge. If you change something on the screen on the desktop, this is adopted "live" in the device. If prototypes are stored in the cloud folder, they are synchronized in the cloud and can also be called up without the cable connection. A small catch has so far been the reading of fonts when you open the prototype via the cloud on the app. It can happen that some used fonts cannot be displayed due to licensing reasons.

Measurement and commenting, Statechart

With the function “Publish design specifications” or “Release prototype” you can release a version in the cloud. Simply open it in the browser and you will get a statechart view and dimensions. The latest changes to a design can be passed on very easily and the design engineer thanks it because he does not have to fall back on outdated, manually created specifications. What I find brilliant in this implementation is the extended information on fonts, colors and dimensions that are offered via the context menu.

In the browser view, Adobe has integrated a search that was not entirely accessible to me. Why this is only limited to searching through the names of the drawing areas is a bit far from me. Being able to browse content or labels would be a useful addition.

Annotations can be quickly exchanged by commenting on a published prototype. The free positioning of comment fields like in Acrobat would be a good addition to be able to refer directly to positions in the screens.

So far, XD has allowed graphics or screens to be exported as SVG, PDF, JPG and PNG. I would also find it practical to export Statecharts or dimensions outside of the cloud.

Is XD suitable as a tool for interaction designers?

It is important to Adobe that you can quickly create wireframes, wireflows or prototypes with XD. And in fact, XD offers a quick start here. Regardless of whether you have mastered the use of other VD tools or not. The first presentable results can be achieved quickly. In order to be really efficient when creating wireframes, one can fall back on numerous kits that are offered for free use. A good additional option would be to include a master for artboards. Especially with larger projects with many screens, it is more efficient if you don't always have to copy the same objects in order to get them on the desired drawing surfaces.

Freely selectable UI kits for creating wireframes sound good at first - but I see this as a bit critical. Visually, a wireframe should be based on an idea sketch. The “stylings” of the kit elements give the designer and the customer a visual direction that they may not want to take.

As already described, commenting and the Statechart view provide good support for a smooth workflow. When it comes to animation, XD is very economical and offers a handful of transition animations. Morph effects or controls with various states (mouse over, pressed, etc.) are not yet possible within XD.

A touch too much cloud

At first glance, it seems logical to me that Adobe regulates all exchanges and connections via the cloud - but it makes it impossible for customers to use the tool when working with strict confidentiality agreements. Many core features such as the output of the specification, Statechart View, commenting or the preview (via cloud) on the device cannot be used without the connection. All of these functions are linked to the use of the cloud. Adobe also only allows the prototype device live preview via the XD app with registration. I just find that too restrictive. It remains to be seen how Adobe will proceed at this point and whether it will also be allowed to use the services without having to risk storage on Adobe's cloud server.

XD just feels good!

XD is fun, performs well, and delivers great results quickly. The layout is easy to do. Despite the partially reduced functions, it is precisely the details (e.g. alignment of objects with pixel information, copy & paste always in place) that create a good flow when designing. However, Illustrator is required for more sophisticated creation and work with graphics. For creating icons, I would always prefer Illustrator to XD. Detailed work with paths is simply better organized there. The import as SVG or pasting from Illustrator via the clipboard (with the exception of texts - these are usually shot up) is very well implemented.

The direct "switching to prototype mode" makes the connection from the visual design to the interaction quickly accessible. The previews in the original size make it possible to assess interaction and visual design just as quickly and well. XD is ideal for presenting prototypes. The "live preview" brings the design to life and is a great thing when presented to the customer. By capturing the prototypes, videos with the right interactions can be created very quickly.

All in all, XD is a good tool for designers and interaction designers. The idea of ​​the specification output is a great criterion and I was enthusiastic. From the point of view of the designer, a few points have been incorporated that make the tool effective. You feel like working with it. The fact that screens are not only designed statically, but can also be built directly in the flow as a prototype, is what makes XD so special. If you use Adobe CC to the full extent, working with XD in conjunction with other programs such as Photoshop and Illustrator is a nice thing. The fact that XD is available for Windows (even if only from Windows 10) and macOS is a great advantage for workflow and exchange in companies.

It will probably take a while until the tool has sufficiently established itself. At the moment, some features and functions are missing that are required for a mature UX tool. XD is in beta and every now and then gives the impression that Adobe was not entirely clear in some places about the depth to which certain functionalities should be integrated. It is also clear, however, that the company will do a lot to provide XD with constant improvements and updates. The fact that Adobe includes “user requests” in the development feeds the hope that useful additions will be incorporated in the interests of the user.