Web Export 2.0.0 - February release

Web Export 2.0.0 has some important new features (out now).

Plugin Data - In previous versions preferences were saved to an external file. So if you were to send the XD document to someone else none of the preferences would have been saved. Now preferences are saved to the XD document. This also prevents read and write to disk of multiple files that should speed up export by up to 60 seconds.

Left and Top - You can now anchor to both the left and top positions in addition to left and bottom.

Convert to Image - You can now convert elements into images. Both a normal resolution and hi resolution (2x) are exported.

Encapsulated JavaScript - The JavaScript on the page is now encapsulated into an Application object and application instance. You can call methods on the application instance such as application.nextView() or application.previousView().

Single Page Application - You can now export to a single page application. From Wikipedia:

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

The page does not reload at any point in the process, nor does control transfer to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.[2] Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

Dynamic Hyperlinks - All artboards are listed in element options panel. If you link to another page the link will link to the page URL (products.html) when exporting multiple pages or point to the page state (#products) when exporting to a single page application.
image

What the above two features enable is one click export to a website.

Editable Template - You can now edit the page template for each page. This allows you to add or edit the HTML page.
image

Markup Inside - There is a new markup inside property on element options. This allows you to embed your own HTML on the page.

image

Additional changes in no specific order:

  • messages now show in a secondary form
  • reset the artboard and element preferences
  • export all documents are exported in order
  • moved getting local template data to separate call
  • allow running export all with no artboard selected
  • fixed data names not added to exported Ellipse
  • fixed not retaining unique artboard id
  • changed all javascript references from artboard to view
  • added notification for quick export
  • added display option
  • removed border style on document
  • added option to set exported file name
  • changed cancel button to close button on export dialog
  • added more room to set markupBefore, markupAfter and markupInside text values
  • close button in export dialog does not write to file if pluginData is supported
  • shows warning message if attempting to export artboards but out of edit context
  • removed margin above artboards
  • added id to stylesheet declaration on page
  • using custom css variables for show navigation controls, show slider
  • fixed custom classes not being added
  • fixed no end tag after custom classes
  • updating URL when changing state
  • deep linking to specific views on single page application or slide show

Known Issues

  • artboards ids are renamed if duplicate id is found breaking some links

MARCH 1st - UPDATE
An small update is coming soon that adds stability and numerous bug fixes when exporting multiple artboards and a few features:

  • Adds next and previous artboard buttons in the export artboard screens
  • Fixed ids not reserved for artboards (more work needs to be done for reserving element ids)
  • Added deep linking as option you can turn off or on via a style variable
  • Added ellipsis icon instead of label
  • Fixed artboard reset not working in some cases
  • Prevented preferences being saved to file on close when support plugindata available
  • Opening a larger view when using clipboard buttons and adding issues after
  • Fixed image compare not positioned correctly when using on artboards after the first
  • Added id truncated warning

image
I can’t see any drop down in hyperlink in windows version.
I have updated Web Export 2.0.0

Thanks

That is odd! There should be a disclosure icon next to the hyperlink field. What version of XD are you using?

Also, can you open the developer console (Plugins > Development > Developer Console) and see if there are any messages when you open the Element Options dialog?

image

xd-version
This is the version i am using currently. And there isn’t any message in developer console.

OK Can you try clicking in the small area to the right of the hyperlink field where it should be?

image

Ahan, I got it. Now i can see the list of Artboards. But why drop down arrows aren’t don’t visible?