CNET también está disponible en español.

Ir a español

Don't show this again

Start

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.

Published:Caption:Photo:Lori Grunin/CNET
1
of 14

Tutorial

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

Published:Caption:Photo:Lori Grunin/CNET
2
of 14

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").

Published:Caption:Photo:Lori Grunin/CNET
3
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
4
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
5
of 14

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."

Published:Caption:Photo:Lori Grunin/CNET
6
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
7
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
8
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
9
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
10
of 14

Flows

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.

Published:Caption:Photo:Lori Grunin/CNET
11
of 14

Targets

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.

Published:Caption:Photo:Lori Grunin/CNET
12
of 14

Animation

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.

Published:Caption:Photo:Lori Grunin/CNET
13
of 14

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.

Published:Caption:Photo:Lori Grunin/CNET
14
of 14
Up Next

Peer inside Microsoft Office 2010