Marcus
As part of Adobe’s ever expanding attempts to tighten their grip around all aspects of design, they have launched a preview for their latest piece of software — software that should give Sketch a run for its money. Previously known as Project Comet, Adobe Experience Design (XD for short) is Adobe’s latest entry in the wireframing game with the added bonus of including prototyping baked. Until now, designers might have used Photoshop, Illustrator, or InDesign to create wireframes for apps and websites which then had to be exported to other software or web apps for prototyping, such as UXPin; now those projects can be passed right into another Adobe branded product for prototyping. Even better, designers can build the whole project, wireframes, and prototypes inside XD.
Because XD is an Adobe product, it is intuitive for anyone with experience with any of the Creative Suite. The hot keys are all there so it feels familiar, even though the interface looks like a bit as though it is trying to be Sketch. It is important to note that Adobe XD is currently in Preview, which means it is not yet fully armed and operational. The UI is very sparse, limiting the user to simple shapes: the pen, text, and an artboard tool. Additionally, there is not currently a way to view the layers. This is Adobe software, so it makes perfect sense that it will be overflowing with features at a later point.
For now, however, even in its bare-bones form, XD is an incredible tool for designing an app and testing it out.The design portion of XD has some interesting and user-friendly features, such as generating repeating grids of objects. As an example, imagine creating a card with an image and a piece of text, and knowing that five or more of those cards are needed to fill screen. In XD, a user simply selects the group, clicks the Repeat Grid button, and pulls the tabs either vertically or horizontally to make copies in either direction. The innovation doesn’t end there. Those newly created image fields that all look the same? A user can select images from any folder on his/her computer and drop them into the image field. It will instantly populate all of the image fields in the grid with the images from that folder. There is mention of being able to do the same with the text fields; at the moment that feature isn’t available, but if that feature is added, it will give wireframes a whole new level of detail, akin to the Craft plugin for Sketch.
Adobe was also thoughtful enough to include UI kits for Apple’s iOS, Google’s Material Design, and Windows, so users can get started on building apps quickly. It is also possible to import Photoshop, Illustrator, and even Sketch assets into XD.
The prototyping is really straight forward. Click the desired element, drag a blue handle to the screen it should connect to, and set the transition. Boom. Hit the play button and watch the magic happen when the element is clicked. From there it is possible to start building a site map of where every element will go; users are probably going to want to group things appropriately because, the more artboards that are added, the more intense the web of connections will be. Upon completion of connecting elements and adding transitions, prototypes can be shared online so that they can be sent out for review.
Adobe has managed to craft quite a powerful tool, even in its nascent state. When all the features are unlocked and the doors flung open, XD will definitely give Sketch and other wireframing tools something to think about. Will it replace other tools with wireframing and prototyping? That all depends on what features Adobe is willing to add. UXPin has a lot of great prototyping features to toggle things on and off, open menus, and other things that are appropriate for web development that XD doesn’t have …yet. There’s a long list of features yet to come, including:
-
Enhanced design features, including support for gradients, richer text, effects and blend modes
-
An improved color picker
-
Support for working with layers
-
More control over the sharing of prototype links
-
Authoring of scrollable content
-
Micro-interactions for prototyping
-
Real-time design preview and prototype testing on mobile devices (iOS and Android)
-
Reusability and sharing of design assets and styles, leveraging Creative Cloud libraries
-
An extensibility/API layer for plug-ins
Want to see what Adobe XD can do? Check out this example prototype we built using XD and the included Material Design UI (https://xd.adobe.com/view/5db8fcc0-6fb7-41e8-7d4a-00eaa5e218b8/)
