how do I import my currently live website into Adobe XD?

Question

I just purchased Adobe XD purely for this purpose.

We are currently working on a site makeover and it is currently hosted and live.

I expected I could import it into XD to more easily provide and communicate feedback/comments to my web developers.

If I cannot do this, I am going to cancel this purchase and request a refund.

Any instruction I find says to save to PDF, then open that via Adobe Illustrator, and copy and paste into XD. There is no Adobe Illustrator option for me.

Can someone please help?

Spas K. · Accepted Answer

PS, all of the files that I am trying to import or copy/paste are PNG and it's supposed to be acceptable file format. Again, I bring them in, see them, name them, save them, but then when I select them to make notes, my screen is blank.

Hey there. It would be nice if you can share a screenshot, although I suspect what might be happening.

Everything in Xd must be on an artboard in order to be visible in the prototype. If you just paste a PNG inside Xd you can see it, but it's probably in the "Pasteboard" - i.e. in the space outside any artboard.

You must first create an artboard with the size of the screen you want to show. When you're first creating your Xd file, make sure you click on one of the artboard options on the home screen, for example Web 1920. You will then see only one artboard on your screen. Make sure you paste while it's selected, and if the image is outside of it, drag it in there.

To make more artboards, select this one by clicking on its name and press Ctrl/Cmd + D. Make sure all your images are inside an artboard. You can also make one with a custom size or use presets while using the artboard tool - Press A, or select it from the tools pane:

If you scale the artboard vertically from the bottom, you will see a dotted line - this represents the viewport, i.e. what part of the screen is visible, while everything below the dotted line you will have to scroll in order to see when viewing the prototype.

About the screenshots, browsers can take full size screenshots - the whole height of the page, without having to make multiple and stitch them together. If you're running Chrome, you must do the following

1. Press Ctrl-Shift-P (or Cmd-Shift-P on a Mac).

2. Ctrl-Shift-P (or Cmd-Shift-P on a Mac).

3. Type "screenshot" in the command field, and you will see "Take full size screenshot", which will capture the whole page top to bottom and save it to your PC.

On Firefox, you can simply right click anywhere, choose Take Screenshot, and choose "Save Full Page" on the top right.

So, you would make the full size screenshot, paste it in an artboard, resize it so it matches the height of the screenshot, and your prototype will pretty much function like your website in terms of scrolling. Then you will just have to make the notes with drawing rectangles on top of the screenshot + text areas on top of them or something like that.

If you're still having troubles, let us know. The software is specialized and has a bit of a learning curve.

Spas K. · Answer

Hey there, Brenda! Short answer: When I've had to make re-designs like this I would make a screenshot of the whole page, paste it in Xd and make changes on top of it. That is the easiest and least troublesome way to do it, albeit a bit dirty.

Xd is an app for user interface and experience design. In most cases you would use it to create vector graphics and interface elements, with some limited raster graphics editing ability, but you won't very often modify existing designs created outside of Xd.

Adobe Xd and your browser are very different environments. Your live website is built with code (html, css, javascript), and that code is rendered by the browser. Xd uses a different kind of code, and the relationship between its elements are different than how html works.

Unfortunately, Adobe Xd can't just read that code and interpret it as vector elements. There is some conversion that needs to occur. You need to somehow capture the vector elements from the webiste (text, structure elements, .svg icons etc.), along with raster images into one file - a PDF file can hold all that in the same place.

Adobe Xd can't interpret PDF files and convert them to vector elements as of now. Reason probably being it's a very rare workflow and it will probably take too much time away from other more important things on the agenda. So your option would be to import the PDF into Illustrator, which can read it properly and convert the graphics to a format Xd can understand. At this point you can just copy them from Illustrator and paste in Xd. It is likely all your text will be turned into outlines and you won't be able to edit it anyway. It most definitely won't be dynamically editable elements like text fields and so on, so it kinda defeats the purpose of doing it in the first place.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded