Adobe Experience Design CC Hits Public Preview

A look at some of the features of XD CC from Adobe.

The Adobe Experience CC Interface is shown containing three artboards.
Adobe Experience CC is now available.

For the longest time, I have found it increasingly difficult to seriously consider the use of Adobe Illustrator or Adobe Photoshop as being the primary tools for designing mobile, tablet and desktop interfaces for apps and web pages. Though both offer art boards and some pretty powerful editing tools, the problem was, eventually, those designs would move through the UI/UX testing process which usually requires a prototype showing interactivity and motion.

This explains the rise of prototyping tools such as UXPin, Atomic.io and Principle for Mac which accommodate this process. While these applications rose to prominence, it was rather odd to see Adobe standing on the sidelines.

In October of last year, Adobe wowed the crowd attending their annual Creative Conference by demoing a new tool with the code name: “Project Comet.” The audience sat transfixed as a project containing hundreds of artboards and graphics destined for iOS, Android, Windows Phone and the desktop were not only contained in one document but were also fully interactive and shareable. Needless to say the “buzz” started almost immediately and, for the past six months Adobe has teased us with updates, sneak peek videos and a request for people who wanted to try out Project Comet. That all ended today with the Mac-only release of Adobe Experience Design CC (Preview) which is free for you to download and use.

Adobe Xd is an interesting application in that it’s interface is minimalistic – It reminds me of the Photoshop Design Space interface – yet, beneath the hood , Adobe Xd is speedy, powerful and feature-laden.

It is all about artboards

Adobe Xd uses the artboards we have become so used to seeing in Illustrator and Photoshop.

The neat thing about XD is that a single XD document can consist of dozens of artboards aimed at different screens and different orientations. For example, you can have iPhone 6 artboards at both Portrait and Landscape orientations sitting in the same document containing Android tablet artboards. Depending on how your team operates, this feature not only is convenient, it allows for the constant iterations so common in today’s UI/UX workflow environment.

Adding content to to an artboard is reduced to a simple Drag and Drop operation. Your jpg and png images or svg line art from Photoshop, Sketch 3, Illustrator or other software can be dragged onto an artboard from your desktop or, if you are a traditionalist, imported into the document through the File>Import menu. Once the file is added to the artboard, the Xd Properties panel lights up and , the element can be accurately placed, rotated, made opaque and given borders, fills and shadows if required.

One really neat feature of Adobe Xd is that you can select an object in Illustrator, copy it to the clipboard and paste it into an artboard. From there you can introspect the vectors and apply fills, strokes and so on. Just be aware, that you can’t add .ai documents to Adobe Xd projects.

The Repeat Grid Feature Is New

One of the Adobe Xd features that will surely get a lot of attention is the Repeat Grid. As card-based layouts take hold in the mobile space, creating a few dozen cards or strips with varying text and images can be time consuming. The Repeat Grid feature reduces this to creating one card or strip, applying a Repeat Grid to the object and then pulling a handle downwards or outwards to create multiple copies of the object. Then it gets better.

The objects in the grid are editable. For example, if your Grid contains six strips with images, you select the image in the grid and drag the six required images on top of your selection. When you release the mouse, the images all appear in their respective strips. Want to fill the strip with the image? Select one, drag it out and, when you release the mouse, all of the images in the Grid follow suit.

Want 5 pixels of space between the strips? Roll your mouse over the the bottom of a strip and you will see a Smart Guide. Click and drag the guide and all of the strips will follow suit.

The Adobe Xd Drawing Tools Are Vector-Based

Don’t let the minimalist toolbar fool you. The Rectangle, Ellipse, Line and Pen tools are all vector-based. You can use them to create intricate shapes, icons, image masks and so on. As well , the Properties panel or the Paths menu in the Object menu allow you to combine and edit them. Shapes can also be manipulated using the Add, Subtract, Intersect, Exclude Overlap and Convert to Path operations normally found in Illustrator.

Prototype View Is Where The Magic Happens

In today’s UI/UX production environment it is no longer sufficient to simply output a bunch of static screens for the team or client to review or for User Testing. Everything from wireframes to functional prototypes are now subject to user testing as well as team and client review. From there, the design is constantly changed or tweaked based upon the comments or test results. Prototype view is where this review and test “magic” happens.

When prototype view is selected , you can link the artboards or elements on the page with other artboards or elements of different artboards. This uses what Adobe calls “wires” and ,when an object is selected in Prototype view, you drag a wire to the target artboard  and the resulting dialog box asks you how the transition between the current artboard and the  destination artboard appears – Slide Left, Slide Right, Slide Up, Slide Down, Dissolve -, what sort of easing will be applied and how long the transition will last.

Though this is a great feature, when stacked up against the competition it is also a weak one. There is no transition between objects on separate artboards, the easing choices are extremely limited and motion effects such as rotation, slides and so on are not there. Having said that, I suspect Adobe is quite aware of this deficiency and that it will, hopefully, be addressed in subsequent releases of the Preview.

Testing in Prototype view is an absolute “No Brainer”. Click the Play button and the project opens in a Floating window. You can then click and make changes to eases and timing without leaving the application. One really interesting aspect of this process is the inclusion of a Record button. Click this and you create a video of the process which can then be shared with others. If User Testing is in the equation, the Prototype playback can be taken out to full page view.

Sharing the project is also quite simple. Click the Share button and a dialog box asks you to give the project a title, drag in an icon or image for the project and which artboard will be used to start the project. When you click the Create Link button, the project is uploaded to an Adobe server and you have the option of copying the link or sharing again. One really neat aspect of this process is, if there are no interactions, the pages will be output as separate pages which the viewer can then click through. Both options are ideal for client and team review or User Testing.

Summary

Adobe Xd CC is in Public Preview , so giving this application a solid “Thumbs Up” or “Thumbs Down” would be grossly unfair.

The application has a lot of features that will appeal to the UI/UX community, graphics designers and web designers but it is still not ready for prime time. Even so , Adobe is handing us the core feature set for Xd and essentially asking : “Go ahead, break it and let us know what we are missing.” This is the same process we experienced a few years back when Adobe was working on the now defunct Edge Animate. I love a lot of the features built into this application but the lack of motion and the anemic easing collection are features I feel could use some solid upgrades.Adobe is quite aware of these shortcomings and is ion record as saying updates and feature additions will be a regular occurence over the duration of the Public Preview.  

Having said that, if you are looking for a simple-to-learn and simple-to-use UX/UI Prototyping and Testing  tool, then Adobe Experience Design CC would be a good place to start.

Format
mla apa chicago
Your Citation
Green, Tom. "Adobe Experience Design CC Hits Public Preview." ThoughtCo, Mar. 18, 2016, thoughtco.com/adobe-experience-design-hits-public-preview-3998106. Green, Tom. (2016, March 18). Adobe Experience Design CC Hits Public Preview. Retrieved from https://www.thoughtco.com/adobe-experience-design-hits-public-preview-3998106 Green, Tom. "Adobe Experience Design CC Hits Public Preview." ThoughtCo. https://www.thoughtco.com/adobe-experience-design-hits-public-preview-3998106 (accessed November 19, 2017).