Addressing Export Issues
Address issues during export
Last updated
Was this helpful?
Address issues during export
Last updated
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 Messages Console.
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.
You can also convert the group into an image using the Export as image option in the Element Options dialog or panel.
As a last resort you could adjust the top and left positions manually in the Styles field until rotation is positioned correctly.
There may be some issues you run into that may be legitimate bugs. Please report them. In the meantime, restarting Adobe XD or restarting Web Export may fix the problem.
To restart Web Export press Command + Shift + R or go to Plugins > Development > Reload Plugins.
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.
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 is not supported at this time.
Keys and Gamepad is not supported at this time. The slideshow export has support for left and right arrow keys. These move to the next or previous artboard.
You can manually add keyboard or gamepad support of course. See creating code blocks and use the keyboard navigation code in the exported page as an example.
Voice commands are not supported at this time.
States are not supported at this time. There is no API available to access these.
You could manually add hover effects or animation using your own libraries using code blocks.
