Change the bounding box on text objects to reflect line height
It could be nice if the boundingbox that sorrounds the font on hover, expands in size when increasing the lineheight. With that we could set the lineheight as the developers use it in css.
See example attached.
Mohammed Hammouda commented
This issue with Xd and the way it deals with the text bounding box has caused me multiple conflicts and confusion with the development team since they always think it's intentional. Please fix it so the text bounding box actually represents the line-height of the text and not just a random automatic space.
please fix this big problem
It seems not possible to view the exact margin between font-elements in XD (dev-view). Below you'll find a screenshot of a situation where we need to measure the exact distance between two Font-elements (XD developer-view).It needs to bypass the line-height, but it doesn't. To be able to do this, we need the line-height to be zero. But when we edit the line-height in XD for a word or sentence on a single row, XD does not change that line-height.Anybody encountered the same situation?
In this example the line-height is 32. We go to XD. Change it to zero, save it and SHARE FOR DEVELOPMENT. But the line-height remains 32. Also changing it to 1 instead of zero won't make any difference.
Yes, line height is the base value to design buttons, input fields, badges, Icons and many more UI elements. Cant Imagine How Adobe missed it to implement. The current bounding box is absolutely useless apart from just to increase text size. Please Implement this feature ASAP.
Shneor Crombie commented
Juan Encalada commented
Super important. This is the way it works in code and without the feature, designs can be different than in code.
one of the most important requests and only 17 votes? I'm asking myself how all these guys are designing for devs?
pls XD team. change this behaviour
Matt Talebi commented
The text layer currently keeps the same bounding box around it, whether the line-height is 20px or 200px. Similar to CSS the text layer bounding box should represent the line-height (and have text centered in middle).
This could by slightly remedied by setting the height of a bounding box, but there isn't any option to middle align the text within the box height.
This stupid arbitrary text box edges thing renders Adobe XD useless to me STILL.
I was all excited about the Zeplin update that integrates WINDOWS Adobe XD... until I realised that this was happening. And then I came here and realised that there was no way to change that arbitrary text box!
I've now lost a day of work on this, because (despite this being another common request), I cannot export my work back to Photoshop, which doesn't have this arbitrary text box problem when it comes to Zeplin integration.
Jesse Overlin commented
Yes! I'm seeing a lot of requests for these types of line height / baseline / text box issues but not many responses from the team.
Adobe team, please allow us to snap to line height or baseline somehow, rather than the seemingly arbitrary text box edges.
For instance, many design languages and best practices these days (Material Design being one) call for a 4 point baseline grid, but if I turn on that grid in XD and try to snap to it, it's the box that snaps, not the line height or baseline, throwing the whole thing off the grid, requiring random nudging to get it to sit on the grid. If you're using 16px font size and 24px line height you should be able to always sit that right on a 4px baseline grid without having to nudge!