Web Export 6 for Adobe XD

It has been two years now since Web Export was released and it is now at version 6.1.0! With Web Export you can author and export web pages, web sites, slideshows and more from Adobe XD. 

Here’s some of what’s new since last year: 

  • Multiple selection support to update properties
  • Added Stack support using relative normal flow positioning
  • Added Styles field to an element to add or replace styles
  • Added Javascript field to add JavaScript to an element
  • Added HTML template for an element to use your own HTML
  • Show exported HTML markup, Javascript and CSS in XD
  • Added support for pop ups and hover menus
  • Added quick preset layout options
  • Added navigation buttons to select elements from panel
  • Added embed images support
  • Add support for multiple views with multiple sizes in single page
  • Added export as string
  • Added support to export to sub folders
  • Show the properties that have changed from default
  • Spectrum Components support
  • New Documentation and updated
  • Web Export example projects has grown to 60 examples!

Multiple Selection Support
This means you can select multiple items in your artboard and then change properties in the element panel and the values will be applied to all selected items.

The properties you can change are tag names, styles, and classes.

Show changed properties
Using the Show Properties button you can see the properties that have changed on the selected element. If you are learning about a project it is helpful to see what properties have changed. Click the Show Properties (or Shift+click the Reset Properties button.

Stack Layout Support
XD has added a “Stack” type of layout. This positions items inside of a group horizontally or vertically and allows you to set the gap between items all together or independently.

This is now an export layout type you can select in Group options. It is not selected by default even if the group has this feature enabled. By default items in a group are positioned absolutely.

See the row-layout and column-layout examples for more.

HTML, Javascript and CSS template fields

The new HTML markup template field replaces all default HTML for the selected element. It supports tokens so you can get the element properties and insert them into the value. This is useful if you’d like to create custom HTML components but don’t want to use markup inside.

The new Styles template field allows you to add your own style declarations to each element. It supports tokens so you can get the element properties and insert them into the value. You can even prevent all default styles from being exported using a special token.

The new Javascript template field allows you to add your own JavaScript to each element. It supports tokens so you can get the element properties and insert them into the value. Same video as above.

Spectrum Components examples
There is a new introductory example showing how to use Spectrum Components in your artboard. There are a few components so far and more support is planned.

Spectrum Documentation
https://opensource.adobe.com/spectrum-web-components/

Markup, Javascript and CSS preview in XD

Did you know you can see what the exported HTML and CSS looks like right from within Adobe XD? Open the Element Options panel, select an element and click on the Show Markup or Show CSS button.

Embed Images
You can now embed images inline using a data URI base64 encoding. That means the image is encoded into the HTML markup. There is no external image created. This option is in the element options and can be set on the entire artboard. The artboard option overrules any specific image options at this time.

It also comes with a color limit option that limits the number of colors in the image. This reduces the size of the embedded images. Check the export messages for the embedded images sizes or check the HTML page size.

Quick layout options of Position, Position By and Sizing Options
Choose common layout positions, layout methods and sizing options in the Element Panel.

image
image
image
image

Navigation buttons to select next, previous or descendant items
You can select another element on the artboard using navigation buttons.

image

Show Markup and Show CSS button in Element Panel
Show the exported markup of the selected element without exporting

image
image
image

Added initial support for hover effects (select two elements)
Hover effects will show you the difference between two objects when mouse is hovering over an element. Select two objects, preferably of the same type and in the Hover Options list select the second element. Exclude the hover element when exporting.

image

Export as string option
Select this option to have the element markup exported as a JavaScript variable value:

image
image

Set destination of export to sub folders
Define subfolders in the export folder location.
image

Documentation guide
The documentation support site has grown and been improved.

https://velara-3.gitbook.io/web-export/

Multiple views with multiple sizes in a single page
In my opinion this is one of the most game changing features yet to be understood and utilized. Previously you can export multiple sizes of a page using Single Page Application media query export option. With that open the page that fits closest to the browser size is shown (think of one HTML page with small, medium and large artboards). Now you can do that with multiple pages with multiple sizes in the same page (home page small, medium and large, products of small, medium and large, etc).

More video guides
There have been more than 10 new videos since the last update. Here is the web playlist.

For comments visit the discussions forum here.