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