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?

Addressing Export Issues

Address issues during export

PreviousReset ArtboardNextMessages Console

Last updated 4 years ago

Was this helpful?

Some features in Adobe XD do not translate completely to web. Some of these you can disregard. Some need to be addressed. Many times these will be mentioned in the .

Go through the warning messages. You may need to make adjustments. These messages will tell you want to do if there is anything to do. Also, check the Troubleshooting section for more help.

Common issues are:

  • Border Positions

  • Font issues

  • Rotation issues

SVG Border Issues

For example, the border on SVG graphics in web browsers do not support setting the border inside the graphic but this feature is supported in XD and is the default.

What this means is that when you export a graphic with a border the border will be on the outside instead of the inside and the web page will look slightly different than the design in XD.

Because of these differences a warning message will show that sometimes includes an solution. In this case the solution, if you want the web page to be a closer match, go into XD and set the border to center instead of inside for that element.

Font Issues

The text may also not be positioned correctly (slightly lower or higher than in the design). This can be because a font is missing or a few other reasons. You will need to embed the font or define an alternative font with the same font metrics (caps height) or if the text is supposed to be centered enable the horizontal and or vertical centered options.

There is an alternative fonts option that you can use to list alternative fonts for the page. Set the font to serif or sans-serif as alternatives.

Rotation Issues

Rotation is only partially supported at this time. In tests elements are rotated correctly except for groups.

If you use rotation rotate the items in a group instead of the group.

Select the rotated group and choose Ungroup. The items will be rotated but not in a group. While they are still selected group them again. Walla.

As a last resort you could adjust the top and left positions manually in the Styles field until rotation is positioned correctly.

Issues not mentioned here

To restart Web Export press Command + Shift + R or go to Plugins > Development > Reload Plugins.

Prototyping

Prototyping adds some unique features to XD and the API for development is somewhat new at the time of this writing. Some of these features translate easily to the web and others do not. What is supported listed below.

Animation and Auto Animate

Auto animate is not supported at this time. Artboards and overlays have some support for fade in and slide animations when you switch between artboards or show artboards.

Of course there is nothing stopping you from adding animations yourself but for native support they are still a work in progress.

Of the animations that are supported only Ease, Ease-in and Ease-in-out functions are supported.

Drag

Drag is not supported at this time.

Keys & Gamepad

Voice

Voice commands are not supported at this time.

States

States are not supported at this time. There is no API available to access these.

You can also convert the group into an image using the option in the Element Options dialog or panel.

There may be some issues you run into that may be legitimate bugs. Please . In the meantime, restarting Adobe XD or restarting Web Export may fix the problem.

Keys and Gamepad is not supported at this time. The slideshow export has support for left and right arrow . These move to the next or previous artboard.

You can manually add keyboard or gamepad support of course. See and use the code in the exported page as an example.

You could manually add hover effects or animation using your own libraries using .

Export as image
report them
keys
creating code blocks
keyboard navigation
code blocks
Messages Console
Set to Center
Set to center and then make adjustments