Want CNET to notify you of price drops and the latest stories?

Adobe Experience Design goes with the flows (pictures)

The interface for wiring screens together is the most novel aspect of Adobe's late entry into the Web-and-app prototyping game.

1 of 14 Lori Grunin/CNET


On launch, XD presents you with a start screen that lets you begin with a particular device layout, a tutorial or a UI kit.

Please note: I am neither a developer nor a designer. These screens are the result of a weekend's experimentation and a hard drive full of cat photos.

2 of 14 Lori Grunin/CNET


The basic tutorial gives you an overview of how the application works, but doesn't cover much territory.

3 of 14 Lori Grunin/CNET

UI kit: iOS

This gives me flashbacks to the early days of computer-based design. Adobe puts all the standard UI elements and styles in XD files rather than using libraries. While connecting to CC Libraries is in the future, it's somewhat painful to operate this way in the present. There's no search in XD, so there's no easy way to find a particular object (such as "list item").

4 of 14 Lori Grunin/CNET

UI kit: Windows

Each of the UI kits is organized differently and has different items; for instance, Windows and Android provide tons of text styles, while the iOS kit provides standard screen elements, like the share sheet.

5 of 14 Lori Grunin/CNET

UI kit: Android

The Android UI kit has screen guides, but because they're built on graphic primitives rather than the smart guides they're difficult to use.

6 of 14 Lori Grunin/CNET

Artboards and organization

The application is split into two modules, Design and Prototype. Like other Adobe applications, XD uses artboards as the primary organizing structure for a design, and Adobe offers a bunch of preset sizes based on common devices. Initially, there are no layers or other organizing architecture for elements on an artboard, and the blind send backward/send forward for stacked objects is annoying. Adobe says layers support is forthcoming, and "rather than just adding a layers panel, our team is working on an innovative approach to enable contextual interaction with layers."

7 of 14 Lori Grunin/CNET

Repeat Grid

One of the more useful technologies in XD is Repeat Grid. It lets you quickly drag out a vertical or horizontal array based on the selected objects. As long as the grid remains grouped, the elements within all act like symbols; for example, resizing one will resize them all. However, once you take them out of Repeat Grid mode, the linkage breaks, and you have to do that to make changes to individual objects.

8 of 14 Lori Grunin/CNET

Text handling

Although XD can do a lot given its Preview status, the text handling is pretty primitive. There's no paragraph text; it's all simulated using single lines and Repeat Grid. Since there are no styles, to add properly formatted text you have to select an item with the style you'd like to use and XD will use that style for the new text you add. Otherwise, it defaults to Helvetica Neue and you can't change that. XD will use any font installed on your system -- the font listing is a mess, by the way.

9 of 14 Lori Grunin/CNET

Color handling

XD has a billion ways of specifying colors, and you can use the eyedropper to pick up color from anywhere on the screen, not just within the application. For now, since XD doesn't support CC Libraries, the eyedropper is the workaround for using color palettes and themes.

10 of 14 Lori Grunin/CNET

Auto masking

XD will mask any photo dropped onto a vector object, no matter how irregularly shaped. The application has a Bezier pen tool (though this one was drawn in Illustrator and pasted into XD) in addition to line, rectangle and oval tools, and can perform Boolean operations to combine objects.

11 of 14 Lori Grunin/CNET


In Prototype mode, you define operation flow by dragging connectors between objects and artboards. Selecting objects displays all the connections. This is Adobe's primary novelty technology in XD, and in concept it's very nice. It still has quite a way to go, though. I'd like to see color coding, instancing (so that you can update all the flows for the different platform designs with a single change) and the ability to associate the animations with a connector rather than having to set it each time, for example.

12 of 14 Lori Grunin/CNET


When you're linking objects, you can simply drag the connector from one to the other. You can also just target a particular artboard, though this can get cumbersome if you've got multiple designs in a single file.

13 of 14 Lori Grunin/CNET


The animation options are currently quite basic. The transition options are sliding (left, right, up, down) and dissolving, and the ability to set durations for ease in and out.

14 of 14 Lori Grunin/CNET

Real-time preview

Like most prototyping software, XD has real-time previews. Just hit Play and step through; if you make a change in the design or program flow, it's immediately reflected in the preview. You can also hit Record and create a QuickTime MOV file for a basic walkthrough.

More Galleries

3-Row VW ID Buzz Electric Microbus Is Headed to the States in 2024
Volkswagen ID Buzz three-row EV

3-Row VW ID Buzz Electric Microbus Is Headed to the States in 2024

47 Photos
Yamaha motorcycle and instrument designers trade jobs (pictures)

Yamaha motorcycle and instrument designers trade jobs (pictures)

16 Photos
CNET's 'Day of the Dead Devices' altar (pictures)

CNET's 'Day of the Dead Devices' altar (pictures)

9 Photos
2007 Los Angeles Auto Show: concept cars

2007 Los Angeles Auto Show: concept cars

14 Photos
Best sound bars under $300

Best sound bars under $300

18 Photos
2018 Ford F-150 Power Stroke reports for diesel duty
2018 Ford F-150 diesel

2018 Ford F-150 Power Stroke reports for diesel duty

22 Photos
Music-friendly cell phone accessories

Music-friendly cell phone accessories

11 Photos