The savvy UX/UI designer’s duty to surf the sea-changing wave of technology, tools, and hacks is as daunting as it is thrilling. One such thrill is using and keeping current with the often-updated Adobe XD (Experience Design), the company’s design software for interactive interface design and prototyping. Adobe developed XD in 2015 as a competitor to Sketch, which had debuted five years earlier. Both vector-based applications can be used for the front-end design of websites, apps, and games. A key difference is that Sketch is Mac-only, whereas XD supports both macOS and Windows. Adobe XD also benefits from Creative Cloud integration, with in-app access to shared libraries of images, palettes, and design system assets. It’s packed with features, powerful, and intuitive, making it an Editors’ Choice program and a must-have for designers.
Adobe has been busy adding features to XD, many coming from suggestions in its UserVoice forum. In fact, the top request of late has been video integration in prototypes—now a reality. More on this below.
How Much Does Adobe XD Cost?
Adobe offers a free but very limited starter plan that allows just one document and two PDF exports. Subscription pricing begins at $9.99 per month for individuals and removes those limitations. XD is also available as part of the Creative Cloud All Apps plan, which gives you access to more than 20 apps—including Photoshop and Illustrator—for $52.99 per month.
By contrast, Sketch costs $9 per month (or $99 per year) per person, with a free 30-day trial.
A more-recent popular competitor is Figma, a cloud-based app with more than four million users, as of this writing. Figma is unique in this group for offering a forever-free account option that gets you plug-ins, templates, unlimited collaborators, and unlimited personal files, but only three Figma design project files. Since Figma is completely browser-based, desktop platform compatibility is not an issue.
One final—and interesting—competitor is InVision, which does cloud-based prototyping and interface design and a free account level that supports 10 users and three documents. The paid version costs $7.95 per user per month.
Can Your PC or Mac Run Adobe XD?
As mentioned, Adobe XD runs on both macOS and Microsoft Windows. Its main competitor, Sketch, is for macOS only. On either OS you get XD from the Creative Cloud Desktop app, which eases installation and updating, even though it means installing yet another program on your system. On Windows, you need a 64-bit PC running Windows 10 version 1909 or later with 4GB RAM. XD natively supports Windows pen and touch input. On macOS, you need version 10.15 (Catalina) or later with 4GB RAM, and it can run as a native Apple Silicon app.
Getting Started With Adobe XD
Once you’ve chosen a Creative Cloud subscription option, getting started with XD is a breeze. When you launch the program, the first thing you see is your home dashboard. A Learn button takes you to the Adobe Learn & Support website for the XD Step-by-Step Guide. There you can choose from several levels of learning, and off you go.
Augmenting the XD educational resources is a multitude of other demos and video tutorials on Adobe’s site, including access to past Adobe Max sessions and Adobe Live streams where you can learn from pros as you watch them work on a project. You can also submit your questions in related forums.
On the home screen you see a choice of artboard presets in standard device viewport sizes, which you can use to begin a design. The screen also sports links to user interface kits, prototype links from your projects, and files that colleagues have shared with you.
Adobe has been stepping up and standardizing how you collaborate with colleagues and clients across all the Creative Cloud apps. This means that efficient sharing, feedback tracking, iterating, and publishing are all built in. Adobe reps told me that they would soon add the ability to share live in-app conversations with colleagues and clients. Additionally, XD supports team collaboration via Slack and Microsoft Teams.
Representative Workflow
XD has three modes: Design, Prototype, and Share. As you might guess, you design and layout your pages, or screens, in Design mode. Drawing a hand sketch is a great way to begin any project, and it’s especially true for a design that involves figuring out information hierarchy and interrelationships, like a website:
After I’ve worked out a viable navigation and flow, I launch XD and create a low-fidelity prototype (aka wireframe) which is a tighter, cleaned-up version of the hand sketch—although still without the copy, photos, or color:
Following stakeholder approval of the lo-fi prototype, I add existing copy, branding, and imagery, and build a high-fidelity prototype to begin the design review and iteration cycle. Design mode is also where you specify scrolling parameters, responsiveness, repeat grids, and interactive (and micro-interactive) transitions, such as resting and hover states.
Depending on the sophistication of the client, I may also use this version as a working interactive prototype that looks and works like an actual website, complete with scrolling, working navigation and buttons, resting and hover states, and more. Below is a zoomed-out shot of the screen artboards just before prototyping.
Once stakeholders have signed off and provided final approval, it’s painless to generate and gather necessary files and CSS indications for transfer to a developer, so long as you’ve organized and built your XD file with mindful file housekeeping. It’s essential to chat with your developer both early on and throughout the process so you can synchronize best practices such as asset organization, design specs, and file-naming conventions. Even more critical is making certain your stellar design is buildable within the budget and the tech of platform they’re using.
Some interface designers note that Sketch has more design and illustration capability than XD. If you need to create or customize a graphic that’s more advanced than XD’s range, however, it’s fast and easy to pop into Illustrator, do the thing, then copy and paste your pixel-perfect graphic into XD. That’s only an option if your Creative Cloud subscription includes Illustrator; the standalone XD subscription does not.
Interactions and Prototyping
Creating an interactive prototype in XD is intuitive and strangely satisfying as you wire everything together with virtual rubber band connectors. While you are still in Design mode, you can define micro-interactions of your components, such as hover and trigger states (see the image below).
Move to Prototype mode to define transitions and interactions between artboards using XD’s auto-animate to visualize how your content moves between artboards. When defining your auto-animations, you can play around with Drag and Time triggers to create some impressive motion effects. The image below and the first screenshot above show examples of it.
Moving from Design to Prototype mode you see much the same interface as in the artboard screenshot above, except that the right-hand contextual Properties Inspector is now populated with interactivity rather than design attributes. Also, selections (now blue) in Prototype mode represent hot spots (clickable or tappable areas) rather than design elements.
Being able to define and validate the navigation mechanics and interactions, such as micro-interactions and animations between artboards, taps, and clicks, before development begins is an invaluable benefit of XD and other prototyping tools over pure design apps like Photoshop and Illustrator.
XD has no shortage of features that support prototyping modern interaction designs. Here are three notable ones:
First, Responsive Resize lets you see how your design and content will look across multiple devices in real time or manually. Note that the last time I looked at Sketch, it didn’t have an auto responsive reflow, but that company has since added a Smart Layout feature that can automatically resize symbols (components), though only on a local basis, not for responsive design on multiple screen and device sizes.
Second, Components—similar to symbols in other apps, including Illustrator—let you avoid duplicating your efforts when you need multiple versions of the same thing, like topics in a navigation header, or the header itself. Each copy of the component is an instance that you can assign multiple attributes for different situations, like the resting, hover, and click states of a button.
Third, Repeat Grid is a huge timesaver because it allows you to take a single graphic or group (say a photo, a price, and a name) and simply drag it in any direction to magically pull out a repeat grid of your original object(s). It’s a perfect facilitator for a grid of objects for sale or company headshots. Then just drop your group of photos and the grid populates and remains editable for further customizations.
Latest and Greatest Features in XD
Adobe releases small updates to XD every month, with major updates launched each October during its biggest show, Adobe Max. Most recent in the small updates lineup are the inclusion of artboard presets for Apple iPhone 13, Google Pixel 6, and Microsoft Surface Pro 8 devices. Also new are web and email hyperlink capability and multiple time triggers for video and Lottie animations.
That leads us right into the major updates announced at the most recent Max: Video and Lottie animation import and playback. Lotties are simple, high-quality vector-based (infinitely scalable without pixelation) animations. The files are tiny, work on any platform or device, and can be coded to be interactive. Moving images add life and invite engagement with your prototype. To this end, XD lets you control several playback scenarios so you can create just the right experience whether you are importing Lotties or video. Note that at this time video is limited to MP4 files smaller than 15MB.
The Plug-in Landscape
Before XD came on the scene, Sketch had been surging past Photoshop as the go-to app for front-end web design, possibly explaining why the number XD plug-ins still lags behind the more than 700 extensions built for Sketch. Nonetheless, with more than 250 XD plug-ins and extensions available to “supercharge your workflow,” as Adobe puts it, the following are a few, representative, top-rated plug-ins that have caught my eye (some free and some with paid pro versions).
Chart for XD is a plug-in from Pavel Kuligin that lets you create charts with random, tabular, or JSON data inside XD. It generates customize visual representations of your charts in seconds.
Alexa Preview, an add-in from Adobe, lets you create a voice-powered prototype that can interact with Amazon’s digital assistant, Alexa.
Stark is an accessibility inspector from Stark Lab that ensures your designs pass muster for users with vision impairments.
Yumtastic Hero is a plug-in from Yumtastic Tools and Trainings facilitates creating and exporting to the web, interactive infographics, microgames, UI animations, dynamic data, and more.
Unexpected Gems: Design Systems, Presentations, and More
An interesting secondary use for XD has bubbled to the surface: creating and publishing design systems. A design system defines a company’s brand and visual identity through consistent assets and conventions, much like brand standards and guidelines, but scaled bigger. Whereas brand guidelines are documents that require regular updates to maintain current information, design systems are usually built for larger growing enterprises that need to be ready for visual evolution.
There’s no set recipe for a design system. Most have visual assets for print and screen design, including palettes, character styles, reusable components (or symbols), presentation and collateral frameworks, and social media templates. The key benefit of using XD to house a design system is that you can manage and publish updates from a central cloud document shared via a Creative Cloud Library. If everyone is on the ball, it’s never out of date and is always at your fingertips.
If you have ever created a simple scrolling web page with Adobe Spark, you may have felt the glee of how easy it was along with the frustration of how limited your options were. Now that Adobe has expanded and migrated its online Spark trio (Page/Post/Video) to its new offering, Creative Cloud Express, I still feel the same glee and frustration. Theoretically however, one could build a Spark-like experience by building an XD prototype, but with the advantage of having complete control over the design and layout, including hyperlinks. The caveats are that you would not have a custom URL, nor would you be able to optimize for search engines. Nonetheless, this idea could be well-suited to instances where neither of these limitations is a deal breaker, such as for presentations, a student’s first portfolio, announcements, invitations, and other ephemeral projects.
A final and unexpected use I recently learned about is game designers using XD’s Key/Gamepad Triggers and cooking together hardware inputs (think Arduino kits) to control XD prototypes. This type of simulation provides stakeholders with a rich and immersive user experience during the early stages of development.
A Moving Experience
Nothing beats a working, moving prototype to convey an intended experience and create delight. An interactive prototype also lets you test your design’s vision and usability and helps sell it to your team or clients. If you’re just starting out with interface and experience design, choosing a tool that best supports your workflow, requirements, and ultimate success can be a challenge.
Adobe XD should be your go-to if you’re a Creative Cloud user who needs to design and prototype web and mobile interfaces. It avails you of the colossal convenience of having direct access to your (or your team’s) Libraries of assets and seamless integration with Illustrator, Photoshop, After Effects, and the rest of the Creative Cloud apps. On top of that, it also is an extraordinary, feature-packed, cross-platform tool. For those reasons, it’s our Editors’ Choice winner for interface and prototyping software.
That said, there’s no reason not to take the competition for a spin to see if another app resonates better with your work style and needs. All the main contenders—Sketch, Figma, and InVision Freehand—have free trials so that you can evaluate the chemistry between you, your team, and the software.
