Create "css-friendly" mode for design (leading-trim is not available for development)

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!

1 Like

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: