There is a new Velara 3 Cloud feature that has been in the works for a while that is now in public beta that you can test. The cloud feature allows you to post your exports online in the Velara 3 cloud. This makes it much easier to test and validate your page across multiple browsers.
The instructions are here in the forums and written in the Upload project here.
It takes a few minutes to setup and once you are logged in uploads can happen at each export or automatically!
Test and review your pages in multiple browsers using this simple setup option.
Notes: Accounts are limited to total of 10MB-100MB.
In the future those who purchase a license or subscription will be given more space.
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.
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.
Navigation buttons to select next, previous or descendant items You can select another element on the artboard using navigation buttons.
Show Markup and Show CSS button in Element Panel Show the exported markup of the selected element without exporting
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.
Export as string option Select this option to have the element markup exported as a JavaScript variable value:
Set destination of export to sub folders Define subfolders in the export folder location.
Documentation guide The documentation support site has grown and been improved.
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.
