Web Export 4.3.1 - May release notes

4.3.1 is not yet released but in the release process.

Feature list:

  • Fixed css and js filenames using extension when using custom file names
  • Added tokens for file list using and
  • Added formatting to total image size export message
  • Fixed Scale to Fit not showing completely
  • Added Blend Mode support
  • Can disable 2x image to all images on artboard or single image (beta)
  • Added images export folder (beta)
  • Added embed images option to artboard (beta)
  • Added color limit when using embedded images
  • Can add path value before images
  • Export a page assets but exclude the page
  • Prevent error when selecting nodes shortcuts when not showing panel
  • Allow user to set custom id but show warning icon
  • Sanitize custom ID when warning icon is clicked
  • Fix low quality export of some exported images
  • Added setElementHTML() method

Feature List Details

Fixed css and js filenames
When you use a custom export name like, “Index.php” and using external option the external CSS file might be named index_php.css. This fixes it so the name is index.css.

Added File List tokens
There are some cases where you want to have a list of all files exported. For example, Progressive Web Apps require you to list files that you want cached. You can use the tokens to get a list

Use and in the HTML template.

The first token list is a list of names separated by commas, the second is a list of names with quotes around them separated by commas.
image
image

Scale to Fit not showing
Some users are not seeing the Scale dropdown list. This is a fix for that.

Blend Mode support
Scenes now have blend modes applies like luminosity and color as shown here
image

More Images Support
image

Disable 2x image export
By default double sized images are exported when exporting. These provide a sharper image for mobile visitors and on some hi-dpi screens. You can turn this option off on a per image basis in the element options or on an artboard basis. If you set the artboard option it overrules any element options at this time.

image

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.

image

Set an Image folder
If you have a lot of images it can clutter up the export directory. You can now add a export folder for images.
image

Set an image prefix path
If you upload your page to a server and that page is not on the root directory image source paths can break. Using this option you can set the sub directory that the images are part of and that value will be added to before the image path.

image

For example, your server could be:

http://www.velara3.com

But your website might be located in a sub directory:

http://www.velara3.com/blog/

So image should work when using the full domain name but break when in a sub directory because the path in the image source is “myimage.png”. If you put your page into “blog” directory then the path needs to be “blog/myimage.png”.

So you can enter a prefix like so:

image

and then your image source will go from this:

<img src="myimage.png"/>

to this:

<img src="blog/myimage.png"/>

NOTE: This also means that if you load your page in a browser and that it is not in a sub directory called blog the images will not be found. The page will show broken images.

If you don’t know what any of this means then you probably don’t have to worry about it.

You can read more about relative URLs by reading about the base tag:

Exclude page but not assets
Exclude a file by starting name with “-none”. This is useful if you want to export image assets on an artboard but exclude exporting the page itself.

image

1 Like

Very good news. Thanks.
When do you plan to support auto-animate?

Regards, Mirek

Auto animate is an interesting feature. To support animating from one state to any other state that exists in your project you have to have to define all the states (all the artboards), find out from one artboard to another what changes, for example what is added and what is removed, match items that are the same (does this rectangle exist in both artboard 1 and artboard 2) and then transition between those two states.

There isn’t an XD API yet to tell me if a layer that exists in Artboard 1 also exists in Artboard 2 and there isn’t an API to tell what changed. I’ve submitted a feature requests for this and the XD team has received it.

I’ve been looking at adding auto animate transitions information, as limited as it is, into the layers CSS style declaration so someone who is savvy might be able to use that when the page loads in the browser.

If anyone has a basic XD project showing some auto animate transitions in it I can take a look at what has changed in the APIs since last time this feature was looked at.

hi,
I mean an effect like this:

Mirek

1 Like

And another thing, export hover effect.
For example a menu and something like this:

Mirek

1 Like

and another thing,
“Fix Position When Scrolling”

Mirek

1 Like