X

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.

Lori Grunin
I've been reviewing hardware and software, devising testing methodology and handed out buying advice for what seems like forever; I'm currently absorbed by computers and gaming hardware, but previously spent many years concentrating on cameras. I've also volunteered with a cat rescue for over 15 years doing adoptions, designing marketing materials, managing volunteers and, of course, photographing cats.
Lori Grunin
adobe-xd-start.png
1 of 14 Lori Grunin/CNET

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.

adobe-xd-tutorial.png
2 of 14 Lori Grunin/CNET

Tutorial

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

adobe-xd-ios.png
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").

adobe-xd-windows.png
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.

adobe-xd-ui-kits.png
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.

adobe-xd-artboards.png
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."

adobe-xd-repeat-grid.png
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.

adobe-xd-text.png
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.

adobe-xd-colors.png
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.

adobe-xd-masking.png
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.

adobe-xd-wiring.png
11 of 14 Lori Grunin/CNET

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.

adobe-xd-target.png
12 of 14 Lori Grunin/CNET

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.

android-xd-animation.png
13 of 14 Lori Grunin/CNET

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.

adobe-xd-preview.png
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

My Favorite Shots From the Galaxy S24 Ultra's Camera
A houseplant

My Favorite Shots From the Galaxy S24 Ultra's Camera

20 Photos
Honor's Magic V2 Foldable Is Lighter Than Samsung's Galaxy S24 Ultra
magic-v2-2024-foldable-1383

Honor's Magic V2 Foldable Is Lighter Than Samsung's Galaxy S24 Ultra

10 Photos
The Samsung Galaxy S24 and S24 Plus Looks Sweet in Aluminum
Samsung Galaxy S24

The Samsung Galaxy S24 and S24 Plus Looks Sweet in Aluminum

23 Photos
Samsung's Galaxy S24 Ultra Now Has a Titanium Design
The Galaxy S24 Ultra in multiple colors

Samsung's Galaxy S24 Ultra Now Has a Titanium Design

23 Photos
I Took 600+ Photos With the iPhone 15 Pro and Pro Max. Look at My Favorites
img-0368.jpg

I Took 600+ Photos With the iPhone 15 Pro and Pro Max. Look at My Favorites

34 Photos
Do You Know About These 17 Hidden iOS 17 Features?
Invitation for the Apple September iPhone 15 event

Do You Know About These 17 Hidden iOS 17 Features?

18 Photos
AI or Not AI: Can You Spot the Real Photos?
img-1599-2.jpg

AI or Not AI: Can You Spot the Real Photos?

17 Photos