SOLVED: Align and style your text by trimming any extra spacing

I’ve got the same issue as well. For example, I’m using different design sets for one app (to switch between designs within the same app structure) and the line height issue is VERY noticeable. It’s a struggle when trying to use auto layout to be efficient but with the line heigh it takes unnecessary time to correct and is sometimes not possible with auto layout. And if I’m not correcting, it looks like a sloppy design. Apparently this has been a problem for two years now and Figma hasn’t corrected this already? Please correct it Figma, this isn’t a font issue and a very basic necessity.

Hi Jason, thanks for this solution. It works perfectly well for me. All I did was follow your directions. I think it’s more preferred than my initial workaround which is having a spacer, which I called “space buffer”, around the text and then grouping it before adding auto layout with the icon.

👋 Glad I could help, but all credit belongs to @Theo_Kekatos for this nifty workaround! I was just sharing my own experience since this is a very popular thread, and a very difficult problem for most who come across this issue.

Hoping the Figma team can bump this up in priority as a ‘small win’. I’ve seen numerous posts about this issue on Reddit as well, and the workaround is less than ideal. @Figma_Support @dvaliao

How is this updated? I just came here for the very same issue.

Ah perfect, my little known font HelveticaNeue “doesn’t support trimming” and it’s grayed out 😕

@Chris_K1 Try it in a new file or on new text layer. Helvetica Neue is supported - i’ve just checked. It’s probably a little bug.

Elena, it actually worked for me. I am using the exact same font as you for a project and it’s what led me to this thread.

After clicking that option (check box) in the Advanced layout you need to then align the text to the bottom with that button as well “align bottom” and it should work with equal vertical pixel space like it did for me.

What @tank666 displayed also worked for me using Helvetica Neue LT Std btw. These 2 options appear to do the same. So no need for that “crop” plugin.

I’m curious if ya’ll have the proper font or if we’re using the exact same one. I’m using 77 Bold Condensed at the moment.

This says it’s solved, but are there code equivalents for text trimming on every platform? Seems like it’s solved from a Figma standpoint but will still ben an issue in clients.

This is not an appropriate fix as now the height is not accurate.

thank you for the workaround!

I don’t want trimming. I want it to respect the line-height property, and display it correctly. At the moment, I can’t use half of my fonts, because they seem completely out of alignment. That’s just unacceptable.

hey amazing, thanks for listening.

Hey i have solution about this for typescript code, like this:

  // Set textAutoResize to "WIDTH_AND_HEIGHT" for the text, not the frame
  searchText.textAutoResize = "WIDTH_AND_HEIGHT";
  // Center the text vertically by adjusting the y position
  const frameHeight = searchFrame.height; // Assuming the frame has a fixed height
  const textHeight = searchText.height; // Get the height of the text
  const centerYPosition = (frameHeight - textHeight) / 2;
  searchText.y = centerYPosition;

Sorry @figma, but this is not really solved.
Trimming is not the solution!!!
Please fix this!

Hi all. I have resolved this issue by uploading the misalignment font to fontsquirrel.com and manually adjusting the ascent/descent value until it is aligned. (This will require some trial and error).

I hope this helps everyone, have a good day!