Web Export 6.0.0 - November Release

Welcome to the release of Web Export 6.0.0. Estimated ETA is early November on the Plugin Manager or available now through the store.

The following has been added:

Features

  • Added cursor option dropdown list (next to id field)
  • Added click handlers to the checkbox labels in the main dialog form
  • See the properties that have changed element in console (
  • Added reset element settings button to panel
  • Possibly fixed bug on scrolling selected artboards into view
  • Fixed bug in layout options (when not default)
  • Fixed bug with HTML template and groups
  • Added INNER_HTML token for groups
  • Fixed tag name bug with artboard
  • Changed token format to fix token bugs in templates
  • Fixed bug in stylesheet template button in main dialog
  • Added introductory support for Stack layout
  • Copy URL to clipboard copies folder path to clipboard with shift key

Select Mouse Cursor
You can change the cursor that is over the element by using the Cursor List. The cursor list is next to the Id field.

cursor

cursorlist

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.

show-properties
changed
changed-properties

Reset Properties Button
Sometimes things don’t work and you don’t know why. You copy an element from another project or artboard and paste it into a new one not knowing what’s changed in the original. The new changed properties option (see above) now shows you what’s changed from the elements default state but now there is a button that will reset the element settings back to default.

reset
reset2

Use the Shift key when clicking to show the changed properties rather than reset them (same as Show changed properties button above). If you click the reset button but don’t mean to reset the element use Adobe XD undo option to restore them back to the previous values.

Use INNER_HTML token in HTML template field
You can use the new HTML template to create your own HTML for the selected element and with the addition of the INNER_HTML token and a group you can include the contents of that group.

Group Before:

<div id="{SELECTOR}">
</div>
<div id="{SELECTOR}">
</div>

Group After:

<div id="{SELECTOR}">
     {INNER_HTML}
</div>

See the templates example.

Tag name support on Artboard fix
Due to a bug an alternative custom tag name was not supported on the artboard. You can now use custom tag names.

Token syntax has changed!
Tokens inside of the JavaScript, CSS and HTML template fields are very new but the format has changed from all caps to all caps inside brackets.

Before:
PIXEL_WIDTH

After:
{PIXEL_WIDTH}

Token list:

tokens2

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.

stack

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.

stack2
stack3

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

Copy folder path to clipboard
The Copy URL to Clipboard button will now copy the folder path to the clipboard if you hold the shift key down.

copy
copy2

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

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

Examples packages

Download Update
If you have purchased a Web Export license you should be able to download the latest version (6.0.0) from the store. If you have any issues contact the stores support.

Web Export 6.1.0 - Release