Adobe XD for Windows review: A powerful but usable design and prototyping tool

adobe-xd-header.png
  • Editors' rating
    7.9 Very good

Pros

  • Uncluttered design/prototyping tool
  • Available as part of Adobe Creative Cloud or as a single app
  • New features added regularly

Cons

  • Some features still missing

If you're designing websites and application interfaces, especially for mobile apps, you might use PowerPoint to show ideas to customers, but you can't use it for design or prototypes. Photoshop and Illustrator are powerful design tools (almost too powerful if you're inexperienced and in a hurry), but lack the features designers require for building interactive prototypes, or for gathering comments from the people you show designs to. Dedicated prototyping tools are often expensive or too specialised for a non-designer audience. Adobe XD (for eXperience Design) aims to hit the sweet spot for all those needs -- and it doesn't assume you're already an expert.

adobe-xd-start.png

If you tell Adobe you're a beginner, the XD tutorial is highlighted on the app start screen to get you up to speed quickly.

Image: Mary Branscombe/ZDNet

When you download Adobe XD, the website asks for your level of expertise. That's less about tracking users and more about customising the startup experience: if you mark yourself as a novice, the app opens with a tutorial that's laid out as artboards in XD itself, links to the UI Kits for iOS, Windows, Google Material and general wireframes that you can download from the Adobe site. You also get online help pages, plus new project buttons for smartphones, tablets, web pages and custom sizes. You can click to see all the presets for each project type: mobile includes several iPhone sizes and one Android, while tablets has both Surface Pro 3 and 4. Once you've worked through the tutorial it shrinks to a smaller button on the start screen.

adobe-xd-wireframe-asssets.png

You can download UI Kits like this wireframe pack for pre-designed parts to use in your own designs. This is a quick way of putting together a site or app layout and storyboard.

Image: Mary Branscombe/ZDNet

The XD interface is clean and simple, with standard menu commands like Open and Save hidden in a hamburger menu (on Windows; the Mac version fits the macOS UI style). Tools in the fairly minimal toolbar are grouped into the two modes: Design and Prototype.

Prototype has only one tool, which lets you draw lines to connect buttons on one screen to the screen that they load -- or the edge of a screen to the screen it loads when you swipe it -- and then set the animation between them. That's how you can wire up your designs to see how they'll work in a running app without ever writing code, and it's simple and powerful (although it doesn't let you do advanced design like animating individual objects into place).

Design gives you the usual tools for drawing shapes -- text boxes rectangles, circles, straight lines and multi-segment lines (with the pen tool). Double-click a point on a segmented line and you get Bézier handles you can drag to get smooth curves. If you want a shape you can't easily draw, you can add, subtract and intersect multiple shapes into one, or cut out the overlapped area. That's not as accessible to beginners as a large library of shapes, but it lets designers work precisely and elegantly.

You can also create non-destructive masks to clip objects and images which is a fast way to get round images on a user profile; place the image, draw a circle over it, select them both then right-click and set it as a mask.

adobe-xd-tutorial.png

The property pane lets you edit objects; the new colour picker lets you save swatches to the project palette.

Image: Mary Branscombe/ZDNet
adobe-xd-mask.png

Common tasks like masking an image to fit a shape are particularly straightforward in XD, and the layer palette makes it very easy to navigate around even a large canvas.

Image: Mary Branscombe/ZDNet

Top ZDNET Reviews

When you select an object, the property pane shows options like fill, borders, shadow, opacity, corner radius (to get rounded buttons), as well as the exact position. Although the smart guides make it easy to position objects by eye, you can also align them to the top middle, bottom, left and right of the artboard. The Illustrator-style Repeat Grid makes it easy to create a list of objects (a menu of settings options in an app or a series of headlines on a website, say), choosing the overall size as well as the spaces between each repeat. You can make scrolling areas, but they don't (yet) scroll in place; instead, you make them longer than the artboard and they scroll in the preview.

adobe-xd-assets.png

Save assets as part of a project for consistency or use Creative Cloud libraries to bring in colours, images and type styles you use in other Adobe software.

Image: Mary Branscombe/ZDNet

You can save objects (or groups of objects) as symbols (which might feel an odd way of referring to the background design for an app or website) and they show up in the Assets pane along with saved colours and character styles, so you can easily get consistency in your design. You can also open Adobe CC libraries from the cloud, including team libraries, so you can grab assets that you've been working on in Photoshop or Illustrator and turn them into a design. You can also drag images in from Explorer to use in designs, as well as text files to fill in columns of data.

To organize all of this, you use the Artboard tool to lay out different screens on the canvas; you can draw an arbitrary size or pick from the same presets as on the XD start screen to make it easy to design an app's pages for a specific device.

Cleverly, everything you place on an artboard goes in its own layer, and those are grouped by artboard. If you select the canvas and click the Layers button, you'll see everything in your app. If you select an artboard, you just see those layers, so it doesn't get confusing. You can show, hide, rename, lock and reorder layers easily. This will all be obvious and familiar if you're used to Photoshop or Illustrator, but it's a far clearer and less confusing approach than in more complex applications.

Once you start adding enough artboards for an entire app the canvas gets quite large; you can zoom in and out to hop around quickly, or navigate using the objects in the layers panel.

adobe-xd-local-preview.png

Preview your prototype quickly and see how your design and interactions work.

Image: Mary Branscombe/ZDNet

You can preview your design through the mobile apps if you want to see it on a physical device, or on-screen on your PC. You can also upload the design to Adobe's cloud storage (you get 2GB of space) to share with people and they can leave comments on each artboard (these can't be linked to a specific object though, and you have to go to the website to see them). This still isn't password-protected so you can't limit it to specific people (although that is coming); if you send a client the URL and they pass it on to a friend or post it online, anyone will be able to see the design. You can't save a preview locally either, so if they're not online they'll have to have the XD file and a licence to preview.

adobe-xd-share.png

Save designs to Adobe's site to share with clients and users; they can try out the interactions and leave comments.

Image: Mary Branscombe/ZDNet

Adobe XD is available as part of Creative Cloud (because the assumption is that you'll be using it alongside other applications like Photoshop and Illustrator as part of the design cycle), so it's included in the 'all apps' plans (which cost £50 per month, or £59/month for the business plan, and there are educational discounts). You can get it as a single app as well; that's also a subscription rather than a one-off price because it gets new features every month, and as long as the pace of improvements keeps up, £9.98 a month (£16.85/month for businesses) is fairly good value.

Conclusions

When Adobe XD first appeared last spring, it was an interesting approach to interaction design software that wasn't cluttered up with decades of tools for print design. But it was also light on features -- and only available for the Mac. Now it's also a UWP app -- so it needs Windows 10, and at least last summer's Anniversary Update -- and the regular updates have brought a good range of familiar design tools, optimised for designing interfaces, along with easy prototyping and good performance even with larger files. XD is still designed to get out of your way, and it's often so straightforward that, if you're used to more complex tools, you may look for a more complex way to do something. That simplicity is now paired to a very useful design tool.

XD continues to have a few rough edges, especially around sharing designs with developers (it doesn't create CSS, although designers can now share automatically-generated specs to help developers build accurately -- another user request Adobe has added quickly) and people who aren't designers,who may find the interface confusing. It's also annoying that you can't open an XD file from Explorer if you've got an XD window open but without a project loaded. Still, given the pace at which Adobe is developing the app, you may not have to wait long for any missing features. XD is now a powerful tool and being on both Mac and Windows (with apps to preview designs on iOS and Android), it should be of particular interest to anyone who's moving from Mac to Windows and is missing Sketch.

Read more reviews

Top ZDNET Reviews

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Newsletters

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
See All
See All