How to Download Source Images from Adobe XD Cloud Web Pages

Adobe XD is a great new design tool that’s been growing in popularity since it was released a couple of years ago (it’s also and free!). Problem is that when design graphics are shared via the XD Cloud, there’s no easy way to download the source files (PNG, JPEG, etc). Here’s a workaround.

What are Adobe XD Cloud Pages?

Adobe XD allows designers to quickly share their design files via the Adobe Creative Cloud. This process basically generates a website URL that you can send to someone else allowing them to view and comment on your work.

Adobe XD URLs look something like this:

https://xd.adobe.com/view/123-456-789-ABC

This is great, really great! But, if you want to actually download the images within these web pages it can be a challenge.

Adobe XD makes sharing design graphics with clients and developers easy, but downloading the image assets can be a challenge…

Steps to download embedded images from Adobe XD Web Pages using Google Chrome

  • Load your Adobe XD web page.
  • Go fullscreen (the option can be found towards the top right).
  • Open Chrome DevTools by either:
    • Open the top-right menu and select Tools > Developer Tools.
    • Right-click on any page element and select Inspect Element.
  • Find the ‘Network’ tab.
  • Refresh the page.
  • Click ‘Img’ filter.
  • Sort files by size (for design files you’ll be looking for largest first because, chances are, the largest file is the design/mock-up).
    • Note that if there are multiple design pages, then most of the designs will be the largest files found at the top.
  • Right click the file name and ‘Open in New Tab’.
  • In your new tab right click the image and save the file.
  • Done!

See screenshot below for a quick guide of steps taken above:

Sorted. Now you can download and save these assets, without having to take screenshots. This is super handy for developers and project managers, who need access to a ‘physical’ version of the design file.

Let's talk about you

Prefer to talk on the phone?
You can speak to Kimb by calling us direct on (+44) 01143 606660.

Email the team…
Send your requirements to hello@makedo.net and we’ll reply within 24 hours.

Get Your WordPress Website Gutenberg Ready

In this post our WordPress Engineer Charlie describes WordPress development best practice on how you can quickly get your older WordPress websites ready for Gutenberg.

Read more blog posts

Sign up to our newsletter