In October 2017 Adobe released the first beta of XD, its “all-in-one UX/UI solution”. As a graphic designer, I’ve used Photoshop and Illustrator in my workflow for years and wonder how XD measures up as an UX tool so far.
Quick historical excursion about the possible impact of the new tool’s release: in print, Adobe has practically eliminated competition starting in the 2000s with InDesign 2.0, setting the standard with Photoshop and Illustrator integration and smooth output of print data. This raises the question if XD can already cover the different processes in the UX cosmos and if it has the potential to push aside tools like Sketch as thoroughly as InDesign pushed aside QuarkXPress.
Although XD is still in beta, the application already comes with some features that leave a great first impression and feel good. The clean interface shows only few tools. They have a context menu to the right, similarly to the layout of Sketch, the main competitor. Using the onboarding tutorial, the program quickly becomes accessible. Adobe itself offers some advanced tutorials that explain more features using practical examples. The minimalist interface makes finding the important tools easy. For working with vectors and text, however, the tools lack some of the detail features known from, for example, Photoshop or Illustrator.
Designing Screens and Prototypes
XD distinguishes design mode and prototype mode. It offers a taskbar with the most important tools and a context menu offering the matching extended options. The taskbar lets users switch globally between layers and elements. Layers and groups can be named and locked. Good foundations for building a clean screen!
Vectors
The design mode layout tools are selection, various vector tools (rectangle, square, ellipsis, line and the path tool), text, artboards, and zoom. The vector tools’ capabilities are pretty limited and work similar to other Adobe applications. One handy feature: the pathfinder is embedded in the context menu. Working with vectors, however, I was missing the direct selection tool, especially when removing single anchors. This would also make repeatedly clicking into nested groups unnecessary.
Text
Some features seem like Adobe was not sure about their proper detail level. For example, creating texts offers the option to use a continuous text field instead of the standard text field – a feature needed for serious text layout. At the same time basic text formats like “All caps” are missing. The continuous text field can’t be trimmed to the last line. This becomes a problem in specification because design engineers can’t get the correct distances in these areas.
Artboards
Adding and editing artboards is very simple. An artboard can be directly created with the artboard tool. XD recognizes previous artboards and anchors of existing elements and lets you use them as guidance. There is also a choice of artboard templates. A document can have artboards of different sizes. The scrollable area of an artboard can be quickly set with the artboard tool. The same rules apply to graphic or text items. Similar to the “intelligent rulers” of Illustrator or InDesign, objects and artboards can be positioned and created pixel-precisely.
Images
XD embeds image data into the document, which is probably the better option for prototype display and file transfer. Still, the option to also embed PSD files and have them updated in real-time like in Illustrator or InDesign would have been charming. It would avoid the repeated creation and import of image data.
Features
Repeat Grid
Repeating elements in a grid quickly and easily? Yes, this feature is really well implemented. Repeat distances are simple to adjust. Color and label discrepancies are quickly corrected. Filling image boxes is cleverly implemented by dragging and dropping multiple images at once. Just drag the images into the repeat grid, drop them and they’re placed in the boxes.
Styles and Symbols
Another awesome feature is XD’s use of symbols and formats. Selected objects on the artboard can be defined as symbols or formats with one click. XD also recognizes elements like color and font inside groups and lists them in the template palette. These elements can be simply and globally adjusted and are updated in all relevant locations in the document. Working with color, it is a pity that swatches can’t be named.
Live Preview
The live device preview is one more nice feature. Using a USB connection and with the XD app installed, the prototype can be judged on a target device in actual size and in use. You can test your design in place. Fonts, colors, proportions and interactions can be assessed realistically. Changes to the screen on the desktop computer are mirrored live in the device. When prototypes are saved in the cloud folder, they get synched and are available without USB connection. A small catch is the display of fonts when the prototype is opened from the cloud in the XD device app – some fonts may not be displayed for licensing reasons.
Dimensions and Comments, Statechart
“Publish design specifications” or “release prototype” both publish a version of the design in the cloud. By opening the version in a browser, you get a statechart view and dimensions. The latest changes to a design can be communicated super-easy, and the design engineer is happy that she does not have to rely on outdated manual specifications. The implementation of font, color and dimension details as context menus is genius.
Adobe has included a search I don’t completely understand into the browser view: it is limited to artboard names. Searchable contents and labels would be an useful addition.
By commenting on a published prototype, remarks can be exchanged quickly. It would be nice to freely place comments to directly reference areas of the screen like on an Acrobat document.
So far, XD exports graphics and screens as SVG, PDF, JPG and PNG. A way to export statecharts and dimensions outside the cloud would be nice, too.
Is XD a Tool for Interaction Designers?
Adobe emphasizes how quickly wireframes, wireflows and prototypes can be built with XD. And XD really offers quick access regardless of existing knowledge of other graphic design tools. Presentable results are achieved rapidly. To create wireframes efficiently, many UI kits are available for free. Artboard masters would be another good option – especially for larger projects with many screens it would be more efficient to not have to copy the same objects to every artboard.
Free choice of UI kits for wireframe creation sounds good at first but I remain a bit skeptic. Visually, a wireframe should be based on a quick sketch. The styled UI kit elements suggest a visual direction to designers and clients that might not be wanted or suited for the project.
Comments and the statechart view support a smooth workflow. XD is stingy on animation, with only a handful of transitions. Morph effects or control states (mouse over, pressed, etc.) are not possible in XD yet.
A bit clouded
At first it appears logical that Adobe handles all synching and connections in the cloud – but it prevents any use of the tool for client projects with strict nondisclosure agreements. Many key features like design specifications, statechart view, comments, and live device preview via cloud are not usable without a connection. All these features depend on the cloud. Adobe also limits live device preview via cloud to logged-in users. This seems simply too restrictive to me. It remains to be seen if Adobe stays the course or opens up the services for use without storing the files on Adobe’s cloud server.
XD feels just right!
XD is fun, has good performance and gets awesome results quickly. Layouting is easy. Despite some limited functionality, it has the details that create flow when designing – placing objects by entering pixel coordinates or pixel-perfect copy and paste in place. However, Illustrator is still necessary for advanced creation and editing of graphics. I would always prefer Illustrator to XD for icon design. It simply offers better detailed vector editing. XD has very good SVG import and clipboard pasting from Illustrator – except text which usually gets garbled.
The direct switch to prototype mode makes the connection of visual design and interaction accessible. The actual size preview allows both interaction design and visual design to be assessed well and fast. XD is ideal for showing prototypes. Live device preview makes a design come alive and helps with presentations to customers. By capturing the prototypes, video of the right interactions can be quickly created.
All things considered XD is a good tool for graphic designers and interaction designers. I am enthusiastic about design specifications as a decisive factor. From a graphic designer’s point of view a few features make the application effective. You simply want to work with it. Being able to not only design static screens but build a prototype without breaking the workflow distinguishes XD from similar applications. For avid users of Adobe CC, combining XD with other applications like Photoshop and Illustrator is nice. XD’s availability in both Windows and macOS is a strong advantage for the workflow and exchange in companies.
It will be a while until the tool has really established itself. Currently it lacks some features and functions a mature UX tool needs. XD is in beta and sometimes seems like Adobe was at odds with itself how richly some functionalities should be integrated. Still it is clear that the developer will put a lot of effort into steadily improving and updating XD. Adobe’s integration of user requests into development gives those users hope for useful future additions.
