How to Export XD prototype into functional html css?

Web Export
1

I have created a prototype of web application in Adobe XD. Now, I want to export it into html css, so that I can experience it by clicking on hyperlinks within the project.
Any idea how can i achieve by using “Web Export”?

2

You’ll find the new instructions here.
https://velara-3.gitbook.io/web-export/

Version 3.4.8 and newer has support for inheriting prototype links.

Check out the official video playlist here for examples.

3

But how will we recognize that where to click for navigating to the required page.
For example:
I have a page, having “Next” button. In XD i have linked this button with other page. How will this work if we use “Web Export”?

Thanks

4

I’ll be coming up with an example in the next week but basically if you do the following:

  1. Create a few artboards
  2. Select any elements (like text fields) that you want to link to other pages
  3. In Element Options select the page to link to using the hyperlink drop down list
  4. Open Export All Artboards
  5. Select Export to “Multiple Pages” or “Single Page Application” or “Single page navigation (slide show)”
  6. Click Export

Once exported view the page in a browser. All of your links will link to the other pages or link to other page states.

Note: I have found a few bugs when there are duplicate ids as the artboard name. So no element can be named the same as the artboard.

You can also make hyperlinks show a different color by opening the page template and entering the style:

<style>
a:hover * {
   color: blue;
}
</style>

Or enter any other style changes you want to use for hyperlinks.

1 Like
5

Great :+1:. Thanks

1 Like
6

I tried it and this worked :slight_smile:

1 Like