How to export your Adobe XD into HTML, CSS and JavaScript on your computer

Disappointingly enough, Adobe XD does not support exporting very well. But there is a plugin that lets you do a basic export, and it may serve your needs well enough.

Here are the instructions:

  1. Install "Web Export" from Plugins > Discover
  2. Select Plugins > Web Export > Panel
  3. Click the three dots ...
  4. Select "Export artboard"
  5. In the popup dialog, click "Advanced"
  6. In "Export folder" section, choose the folder to which all the files will be saved
  7. In Export section of the popup, select "All artboards" and "Single page application"
  8. Press "Export" in the bottom. Now your XD project gets saved as a series of web pages to your computer.
  9. Go to the export folder with Finder (or File Explorer
  10. One page at a time, by double-clicking, open every .html page that you find, and select one that has the elements that you would like to start improving.
  11. Delete all the other .html files from the folder
  12. Double-click the remaining .html file again to verify that it still looks the same.

Optional steps that I highly recommend:

The following two steps make the exported code easier for you to read and edit. 

As a preparatory step, open the .html file within Atom.

Move the CSS settings to their own file:

  1. Create an empty file in Atom (e.g., Cmd+N or Ctrl+N)
  2. In .html, find line "</style>"
  3. Do not select the </style>, but from everything above it, select until you find a line that starts with "<style>". Do not include that line in your selection, but everything below that. Note that the selected area may be thousands of lines of CSS code.
  4. Cut (Cmd-X or Ctrl-X) the selected area, and paste it to the empty file that you created in step 1.
  5. Save the empty file with name "xd.css" in the same folder where the .html file is.
  6. In the html file, remove the lines that start <style> and </style>.
  7. In the place of the removed two lines, write this line: <link rel="stylesheet" href="./xd.css">
  8. Save the html file.
  9. Double-click the .html file again to verify that it still looks the same.

Move also the javascript to its own file:

  1. Create an empty file in Atom (e.g., Cmd+N or Ctrl+N)
  2. In .html, find line "</script>"
  3. Do not select the </script>, but from everything above it, select until you find a line that starts with "<script>". Do not include that line in your selection, but everything below that. Note that the selected area may be thousands of lines of CSS code.
  4. Cut (Cmd-X or Ctrl-X) the selected area, and paste it to the empty file that you created in step 1.
  5. Save the empty file with name "xd.js" in the same folder where the .html file is.
  6. In the html file, remove the lines that start <script> and </script>.
  7. In the place of the removed two lines, write this line: <script type="text/javascript" src="./xd.js"></script>
  8. Save the html file.
  9. Double-click the .html file again to verify that it still looks the same.

Now you have removed the CSS ja JavaScript codes to their own files, and your HTML is much nicer to look at!

What next?

Now you can much more easily inspect the remaining, pure HTML file, using Inspect Element in the web browser. Using Inspect and hovering over HTML elements in the Elements tab, you can find which part of HTML creates which part of the page (see what elements get shaded in the web page). This way you can identify what elements you can start selecting in your own javascript program.

Read next how you can make this code ready for your own modifications.



Last modified: Monday, 25 November 2019, 12:22 AM