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.
The following list describes each field and links to more details.
Identity - The identity attribute or id defines a unique name of an element.
Tag Name - The tag name and sub tag name fields allow you to define the tag names of the exported elements.
Styles - Additional styles provide a way to define or modify the styles of an element.
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.
Hyperlink - Set hyperlinks on elements to visit different pages.
Size - Set the different width and height sizing options.
Background - Use a rectangle as a background for a group
Markup inside - Markup inside is a powerful way to set your own HTML.
Markup before and after - Markup before and after provides a way to add HTML before and after an element.
Text ids - Find a range of text and give it an id
Text tokens - Find and replace text in a text group
Group Row Layout - Sets horizontal layout rules to items inside of a group
Group Column Layout - Sets horizontal layout rules to items inside of a group
Group Layout Alignment - Determines how items are aligned inside of a layout group
Group Items - Determines how items are spaced inside of a layout group
Group Wrap - Determines how items are wrapped inside of a layout group
Self Alignment - Determines how an individual item is aligned inside a layout group
Hover Effects - Select an element to show it's styles on hover
CSS - Opens a form to enter custom CSS
HTML - Opens a form to enter custom HTML (only on artboards at this time)
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
Export as Image - If checked the element is converted into a static image of what it looks like in the artboard
Debug Element - Shows helpful information for developers.
Show Outline - Adds an outline around the element when the page is viewed in the browser.
Displayed - If unchecked then the element is not displayed. Element is still exported.
Export - If unchecked then the element is not exported at all
Auto Export - Automatically export on each change
Export - Export the selected or first artboard
Show Markup - Show the markup of the selected item
Show CSS - Show the CSS of the selected item
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