Addressing Export Issues

Address issues during export

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

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.

Set to Center
Set to center and then make adjustments

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. If you must use it convert the graphic to an image using the Convert to image option in the Element Options dialog or panel. You can also adjust the top and left positions manually in the Styles field until rotation is fully supported. More on this later.