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

Ir a español

Don't show this again

HolidayBuyer's Guide

Start

Tutorial

UI kit: iOS

UI kit: Windows

UI kit: Android

Artboards and organization

Repeat Grid

Text handling

Color handling

Auto masking

Flows

Targets

Animation

Real-time preview

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.

Caption by / Photo by Lori Grunin/CNET

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

Caption by / Photo by Lori Grunin/CNET

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

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET

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

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by 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.

Caption by / Photo by 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.

Caption by / Photo by 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.

Caption by / Photo by Lori Grunin/CNET

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.

Caption by / Photo by Lori Grunin/CNET
Published: