Description of element properties
Element Options dialog for Text Elements
Element Options dialog for Group Elements
Element Options panel for a group (with labels)
Element Options panel for a group (without labels)
When exporting an artboard, Web Export translates the graphics on the artboard into HTML code. In other words, it converts an artboard element like this:
Into code like this:
It goes from a visual graphic design in XD to HTML code.
That HTML goes from code back into a visual design when loaded into a browser.
Depending on the type item you have selected in Adobe XD there may be a few more or a few less options shown.
Any element that has been modified from its default state will show visual indicators next to the properties that have changed.
In the image below, there is one property that has been changed. It is shows a blue border next to it:
If we click on the Show Changes button we can see the names of the properties that have changed:
Show Changed Properties
We can reset all changes to the selected element by using the Reset Changes button:
The following list describes each field and links to more details.
Tag Name - The tag name and sub tag name fields allow you to define the tag names of the exported elements.
Classes - Additional classes provide a way to define a group of styles or properties for one or more elements.
Attributes - Additional attributes provide a way to set the attributes of an element to adjust or configure their behavior.
Markup before and after - Markup before and after provides a way to add HTML before and after an element.
Overflow - Set whether content that is larger than it's original size shows scrollbars, is hidden or is visible.
Layout Section - Options for how to layout, size and position the selected item or it's descendants
Positioning - Set an element to anchor to the left, top, bottom, right edge of its container or if it is centered horizontally or vertically in its container. Also known as anchors or constraints.
Export as Image - If checked the element is converted into a static image of what it looks like in the artboard
Copy - Copies the URI to the exported page (only shows after export)
URL - Opens a link to a page that shows the URI to the exported page