Skip to main content

Properties like “leading-trim” are still not supported in a lot of browsers, so when I design with the “Vertical Trim” option in Figma, my developer doesn’t know what to do about it, he has to calculate the actual space based on the line-height.


A similar thing happens with borders. CSS only allows for outside borders, so when I design with borders inside or the center, it doesn’t translate.


Please add a signal of some sort, or enable a “css-friendly” mode, so when we are designing, we are weary of using some of the most advanced WebGL features. Thanks!

Agreed, not just for leading-trim but also things like how the border gets measured etc. If we are using ‘border: inside’ AND ‘strokes not included’, it would be nice if the generated CSS would include ‘box-sizing: border-box’ to compensate. This is super important if we want to connect our code to Figma…


As for the leading trim, I found a handy tool for it for your developers:


Explanation article: Cropping Away Negative Impacts of Line Height | by Kevin Powell | EightShapes | Medium

The tool itself: https://text-crop.eightshapes.com/


Reply