Web Export
Search…
Web Export
Introduction
Getting Started
Install the Plugin
Create or open a project
Export the Artboard
Export Artboard Dialog
Addressing Export Issues
Messages Console
Export types
Keyboard Shortcuts
Responsive Pages
Dynamical page that grows in height
Modifying Individual Elements
Elements and Sub Elements
Styling elements
Element Options
Changed Properties
How to section
Creating Code Blocks
How Exporting Works
Single Page Application API
Element Tokens
Template Tokens
Setting up a server
Putting your site online
Code Block Snippets
Other Features
Learning by Videos
WordPress Integration
Example Packages
Web Developers
Non Web Developers
Debugging
Version
Support
License
Feature and Bug Reports
Related Plugins
Powered By GitBook
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 HTMLElements. HTMLElement is the base class for HTML elements like div, img, span, etc. In the documentation layers and groups are referred to as elements.

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.
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.
The code you see here is able to be changed by you using the tools provided.
Any layer can be exported as an image. Use the Export as Image option.

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>

Artboard

<body>
<div id="Home_Page">...</div>
</body>

Artboards

<body>
<div id="Home">...</div>
<div id="Products">...</div>
<div id="Services">...</div>
<div id="About">...</div>
<div id="Contact">...</div>
</body>

Group

<div id="Group_76">
...
</div>

Text

<div id="My_summer_vacation">
<span>My summer vacation</span>
</div>

Rectangle

<svg class="Rectangle_452">
<rect id="Rectangle_452" fill="rgba(209,17,17,1)" rx="0" ry="0" x="0" y="0" width="624" height="16">
</rect>
</svg>

Ellipse

<svg class="Ellipse_1">
<ellipse id="Ellipse_1" fill="rgba(99,214,103,1)" stroke="rgba(34,44,65,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" rx="42.5" ry="42.5" cx="42.5" cy="42.5">
</ellipse>
</svg>

Line

<svg class="Line_86" viewBox="0 0 574.5 1">
<path fill="transparent" stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_86" d="M 0 0 L 574.5 0">
</path>
</svg>

Path

<svg class="Path_1" viewBox="0 34.487 85 50.513">
<path fill="rgba(99,214,103,1)" stroke="rgba(34,44,65,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Path_1" d="M 42.5 54.592529296875 C 65.97209930419922 54.592529296875 85 19.02790069580078 85 42.5 C 85 65.97209930419922 65.97209930419922 85 42.5 85 C 19.02790069580078 85 0 65.97209930419922 0 42.5 C 0 19.02790069580078 19.02790069580078 54.592529296875 42.5 54.592529296875 Z">
</path>
</svg>

Polygon

<svg class="Polygon_1" viewBox="0 0 127 110">
<path fill="rgba(99,214,103,1)" stroke="rgba(74,153,195,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Polygon_1" d="M 95.25 0 L 127 55 L 95.25 110 L 31.74999618530273 110 L 0 54.99999618530273 L 31.75000762939453 0 Z">
</path>
</svg>

Image

<img id="Group_1" src="Group_1.png" srcset="Group_1.png 1x, [email protected] 2x">
If you are new to web development or want a well rounded review read Getting Started with the Web.
HTMLElement - Web APIs | MDN
<div>: The Content Division element - HTML: HyperText Markup Language | MDN
<rect> - SVG: Scalable Vector Graphics | MDN
<ellipse> - SVG: Scalable Vector Graphics | MDN
Paths - SVG: Scalable Vector Graphics | MDN
<img>: The Image Embed element - HTML: HyperText Markup Language | MDN
<span>: The Content Span element - HTML: HyperText Markup Language | MDN
Previous
Creating Code Blocks
Next
Single Page Application API
Last modified 2yr ago
Copy link
On this page