search

How Exporting Works

Going from Adobe XD to HTML

Exporting takes your artboard and elements and exports it to the web.

Each element is translated into a HTML or SVG code counter part.

Artboards are exported as a div. In the documentation Artboards are referred to as views.

Artboard layers and groups are exported as HTMLElementsarrow-up-right. HTMLElement is the base class for HTML elements like div, img, span, etc. In the documentation layers and groups are referred to as elements.

hashtag
Exported Elements

Layers are converted to the default HTML and CSS at this time.

You can add or subtract to the exported HTML and CSS.

circle-info

The code you see here is subject to change.

The first goal has been to get an accurate representation.

The second phase is to improve the code quality from the feedback of the community.

circle-info

The code you see here is able to be changed by you using the tools provided.

circle-info

Any layer can be exported as an image. Use the Export as Image option.

hashtag
Page template

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!--page_title--></title>
    <!--styles_content-->
    <!--scripts-->
</head>
<body>
    <!--application_content-->
</body>
</html>

hashtag
Artboard

hashtag
Artboards

hashtag
Group

hashtag
Text

hashtag
Rectangle

hashtag
Ellipse

hashtag
Line

hashtag
Path

hashtag
Polygon

hashtag
Image

circle-info

If you are new to web development or want a well rounded review read Getting Started with the Webarrow-up-right.

LogoHTMLElement - Web APIs | MDNMDN Web Docschevron-right
Logo<div>: The Content Division element - HTML | MDNMDN Web Docschevron-right
Logo<rect> - SVG | MDNMDN Web Docschevron-right
Logo<ellipse> - SVG | MDNMDN Web Docschevron-right
LogoPaths - SVG | MDNMDN Web Docschevron-right
Logo<img>: The Image Embed element - HTML | MDNMDN Web Docschevron-right
Logo<span>: The Content Span element - HTML | MDNMDN Web Docschevron-right
PreviousCreating Code BlocksNextSingle Page Application API

Last updated

Was this helpful?