Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • 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
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

How Exporting Works

Going from Adobe XD to HTML

PreviousCreating Code BlocksNextSingle Page Application API

Last updated 4 years ago

Was this helpful?

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 . 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 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, Group_1@2x.png 2x">

If you are new to web development or want a well rounded review read .

HTMLElements
Export as Image
Getting Started with the Web
LogoHTMLElement - Web APIs | MDN
Logo<div>: The Content Division element - HTML: HyperText Markup Language | MDN
Logo<rect> - SVG: Scalable Vector Graphics | MDN
Logo<ellipse> - SVG: Scalable Vector Graphics | MDN
LogoPaths - SVG: Scalable Vector Graphics | MDN
Logo<img>: The Image Embed element - HTML: HyperText Markup Language | MDN
Logo<span>: The Content Span element - HTML: HyperText Markup Language | MDN