Adobe Experience Design (XD) aims to combines the interface design tools of Sketch with the prototyping features of InVision to create a combined tool that’s similar to something like Marvel (though many users use that with Sketch).
Though the first public beta was released in March – and Adobe has released regular updates since – it's still not hit version 1.0 yet. It's currently available for Mac only – unsurprising as it's a rival to the Mac-only Sketch – and the Windows version won't be with us til the end of the year.
The public beta can be downloaded by anyone with a free or paid Creative Cloud account (a wise move as many Sketch-using designers may not subscribe to Creative Cloud).
Over this feature we'll check out what Adobe XD has to offer – or you can go straight to Adobe XD's new features.
Adobe has just made two announcements for Adobe XD at Adobe Max 2016. The first is that the previously announced beta version has been released, adding layers and symbols and mobile apps to preview your designs and prototypes.
The company is also showing off some truly new features due in the first half of 2017. These include the ability for designers to collaborate on designs in real-time - a clear move against the Figma collaborative design tool that was formally released in in September to considerable interest from designers. Adobe says that this could be used not just by designers working on the same project, but with clients and other parts of large organisations - we presume with the ability to let them watch as you move things around rather than letting them design things alongside you *shudder*.
There will also be what Adobe calls 'visual versioning'. This looks similar to what Adobe showed off for Photoshop at Apple's launch of the latest MacBook Pro, where you can see a cascade of thumbnail previews of previous undo states to select between
Adobe XD for Windows
First off though, the Windows version. In a recent blog post, Adobe says that it's working on a version of XD for Windows that's different from the Mac version.
Both will have the same features, but the Windows version will be designed to also work with touch-and-pen-based devices such as Microsoft's Surface 4 Pro and Surface Book.
To do this, Adobe says that XD will use Microsoft's UWP (Universal Windows Platform) and will therefore work only on Windows 10 devices.
The Adobe XD Windows beta will be out before the end of the year.
Adobe XD for iOS, iPad, iPhone and Android
While Adobe hasn't – so far – said it'll produce an iOS version of the main XD app (so you could run it on an iPad Pro), it is working on apps for iOS and Android that will let you preview apps and websites on phones and tablets connected to your computer over USB. This should make on-device testing quicker than doing it through the cloud.
Now onto what XD on Mac has to offer.
Build full apps with Adobe XD
At the Adobe Summit marketing conference back in March, two of the company's staff demoed a version of XD that can build native apps rather than just online prototypes. Whether these apps were purely for testing purposes or could be put in App Stores wasn't revealed.
It's also not confirmed that this feature will be added to Adobe XD, but it's seems unlikely that it won't. It was shown as part of a session at the conference called Adobe Sneaks – something it does at both Summit and the Max creative conference. At Sneaks it demos concepts its teams have been working on to ask for feedback – some of which never become part of commercially available tools, but many do including Photoshop's Content Aware Fill.
How to use Adobe XD
Open Adobe Experience Design CC (XD) and you get a choice of templates to help you get up and running – including for the known quantities of iPhones and iPads, and for the web and Android devices where there’s a wide range of possible output sizes.
To help you create native-feeling apps, XD features UI Kits for iOS, Google’s Material Design language as used in Android from Lollipop onwards, and Windows 10 (across phones, tablets and laptops).
XD’s interface is split into two key environments: Design and Prototype. Design will feel familiar to anyone who’s used Fireworks or Flash (or most of Adobe’s tools). It’s a lot less cluttered than Photoshop or Illustrator, though it does have fewer tools to fit in.
The different screens or layouts for a project sit on separate artboards across your screen, with a toolbar on the left and a properties panel on the right.
Alongside the standard vector design tools are some nifty tools for specific tasks that designers will really appreciate. For example, you can quickly create a grid such as listing for a single group of items by clicking on the group and dragging – and then clicking and dragging to adjust internal spacing. You can them select a group of images from your Mac and drag them into the grid to instantly replace all of the images in turn.
Over in the Prototyping window, you can add hotspots to your designs – dragging flowchart-like blue lines to connect screens to other screens – that allow interaction when you ‘build’ the prototype. Prototypes output by XD sit on Adobe’s servers (on projectcomet.com) to allow you to quickly access them from a link it gives you that you can share via email, Slack or otherwise. There’s no security such as password-only access built into this currently – nor can you upload the preview to your own staging or test servers – but Adobe’s director of product managements told us that they expect to add this in the future.
When you link one screen/layout to another, you can select its animation properties. For example, here you change the direction in which the change happens (or just let it Dissolve).
You can also change properties such as the easing and duration of the animation. Shorten said that more animation controls will be added over time.
Projects can also be output for web, iOS and Android.
Shorten said that features planned for XD later this year include the Windows release (including a touch-based interface for tablet PCs like the Microsoft Surface), and live previews to connected iOS and Android devices. A workflow for ‘sketching’ wireframes in the Comp CC tablet app and then bringing those into Adobe XD is planned, as are support for CC Libraries and Adobe’s Stock service.
You can download XD via Adobe’s site or through your Mac’s Creative Cloud app.
Adobe XD updates
Adobe Experience Design Preview 2 gains features that have been created based on feedback from users of the first release. Top of these is ability to work with grids, which you can snap objects to.
You can adjust the size of the grid based on the size of each square – but not based on how many times you want your template to be divided.
You can now adjust line height independent of text size.
You can adjust individual rounded corners in the Appearance pane, rather than just by holding Alt and dragging on the corner.
You can drag-and-drop images from your Mac's Finder into your designs in Adobe XD, and you can drag text files in to create text boxes (or fill repeating grids).
If you bring in Illustrator files or SVGs, embedded images will be imported too (and you can export SVGs witrh embedded or linked images too).
You can now share multiple versions of a prototype with a client or colleague. It's kinda crude and there's no real versioning – you have to create one prototype, share that, makes changes for the modified version and then share that (selecting 'New URL).
Shared prototypes now show highlighted hotspots if you click on an area that's not part of a hotspot.
Adobe XD July 2016 update
In July 2016, Adobe released an update to XD that added a Zoom tool to quick zoom in on particular areas, and the abilities to export artboards as PDFs and copy-&-paste from Sketch, InDesign, Powerpoint and other tools
Adobe XD August 2016 update
This update lets you create linear gradients within the colour picker – as well as edit them – using similar tools to those found in other Adobe applications.