In the last few projects that I have been working on wherein we have used Adobe XD for designing the front-end, there are a few issues that we have noticed and perhaps, there are ways to work around it or solutions to optimise the process either at the design level or the code level.

Whenever I translate the Design to HTML using Adobe XD, I use the option key on my mac as a guide to understand and set the spacing between elements.

1. In some designs, although the designer has set margins and paddings as multiples of 5 - say a top margin of 15px or 30px -, I see arbitrary margin values such as 13px or 33px. In these cases, I'm unsure of what needs to be set in order for the code to be pixel perfect.




2. Secondly, I have noticed that the text blocks on the Adobe XD designs don't take into account the line height that has been set for the text element which I have to include when coding the text element in HTML. Since in an HTML document, the line height affects the spacing in and around the paragraph element, the margins and paddings that I have set using the option key go for a toss because what was supposed to be 15px in the design ends up being 18px or 20px in the final HTML because of the unaccounted for line-height.

I'm wondering if there are ways to add the text blocks in Adobe XD that also takes into account the line-height of the elements so that there are no discrepancies between the final front-end and the design.