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.
Got your Design ready to build in WordPress?
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-ABCThis is great, really great! But, if you want to actually download the images within these web pages it 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.
