Skip to main content

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

  • August 8, 2023
  • 1 reply
  • 724 views

Aglae

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 reply

Julia57
  • Active Member
  • 41 replies
  • May 27, 2024

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings