How to open an XD file: Viewers for Adobe XD

Adobe XD is a popular prototyping software with extensive support for collaboration. Applications include mock-ups, wireframing user interfaces (UI) and user experiences (UX) as well as website and web app design. Projects are saved to the Adobe XD file format (extension ".xd"); in addition, individual graphical elements can be exported as vector-based SVG or as a raster image (PNG, JPEG etc.).

Reader or viewer apps are widely available for many common file formats, Adobe's own PDF format being the prime example. Not only does Adobe themselves provide viewers for all platforms; there is also a wide spectrum of third party readers because the official PDF file format specifications are open and available for everybody to download.

The XD format, however, is different. Adobe does not provide an official viewer app and the file specifications have not been released (discussion). This can be a problem when XD files are passed from designers to developers for implementation (the so called "hand-off") or to clients for review. In order to open and view an XD file, the user must either use the Adobe XD application (subscription required) or the runtime apps Adobe provides for iOS and Android. The latter are very cumbersome to use because they can't open files from device storage but instead require them to be available on the Creative Cloud. Also, the mobile apps aren't of much use when evaluating website or web app designs.

The only available alternative to Adobe's offerings at the time of writing (early 2022) are browser-based XD online viewers. To our knowledge, there are no stand-alone XD viewer apps available for either macOS or Windows. In this post, we'll give an overview on what's available and look at the pros and cons of each XD reader.

Note: Besides static graphical elements (text, photos, graphics etc.), XD files can also contain animations and interactive elements to simulate UX scenarios. We will cover that kind of prototyping content in a later post.

Adobe XD Sample File

As we've seen, the Adobe XD format specifications are not publicly available. As such, the developer of an XD viewer will have to reverse engineer the format from a variety of sample XD files. The obvious issue with this approach is that the samples may not be exhaustive - they may only use a subset of the format. To evaluate the "completeness" and fidelity of a viewer we will use one of Adobe's own XD files for testing. The project from the Getting Started with XD Design tutorial is a rather complex file with about a dozen artboards and hundreds of different elements. If you want to follow along, you can download it here (40 MB). All tests were done with Chrome 96.0.4664.110.

This is how the file is rendered in Adobe XD, the time to load is about 3-4 seconds on an i5 Mac:

Viewing XD Files with Photopea

Photopea is an online image editor which provides all the typical editing features you'd expect from a modern editor. Also supported are a variety of file formats; the UI resembles Adobe Photoshop. The editor is free to use (with ads), it can be used ad-free with a monthly subscription.

As Photopea supports reading and converting XD files, we tried it with the sample file linked above. Here are our findings:

Loading time

The file loaded in about 12 seconds.

Render

Render directly after loading:

Issues

At first glance the render looks ok, but closer inspection found the following issues:

1. Header text missing, should be "Get started...", screenshot

2. Header image orientation wrong, should be rotated 12 degrees, screenshot

3. Incorrect tiling of three product images, screenshot

4. Image orientation wrong, should be flipped horizontally, screenshot

5. Incorrect tiling of product images, screenshot

6. Wrong capitalization of text, should be "abc...xyz" in second line, screenshot

7. Wrong capitalization of text, should be "DARK GREY", screenshot

Viewing XD Files with PSDEtch

PSDEtch is an online file inspector which supports a large variety of file formats, including PSD, AI, Sketch and XD. It is free to use.

Here are our findings:

Loading time

The file loaded in about 35 seconds.

Render

Render directly after loading:

The lowest magnification ratio supported is 10%; with the XD clocking in about 10k x 10k pixels, it can't be displayed entirely even with the lowest setting.

Issues

The rather long loading time could indicate a good results, but unfortunately that's not what we got; in fact the render is considerably worse than the one from Photopea:

1. Header text missing, should be "Get started...", screenshot

2. Header image orientation wrong, should be rotated 12 degrees, screenshot

3. Text cut-off and not properly layouted, screenshot

4. Incorrect tiling of product images, screenshot

5. Text not properly layouted, text behind right button should be completely coverered, screenshot

6. Image orientation wrong, should be flipped horizontally, screenshot

7. Incorrect tiling of images, screenshot

8. Wrong capitalization of text, should be "abc...xyz" in second line, text layout error, wrong font screenshot

9. Wrong capitalization of text, should be "ERROR RED" & DARK GREY", screenshot

10. Text cut-off and not properly layouted, screenshot

Viewing XD Files with Softmatic XD Viewer

Currently in closed beta, the Softmatic XD Viewer is an online reader exclusively for XD files. The software is free to use, paid tiers will be available for converting XD files to HTML and other formats.

Here are our findings:

Loading time

The file loaded in about 2 seconds.

Render

Render directly after loading:

Issues

So far the Softmatic viewer has only one major issue; with some images the aspect ratio and alignment differs from the Adobe XD result, example:

The Softmatic XD Viewer will be available in 2022.