How to align text box on Figma?

When placing a geometric shape or image on Figma we get the exact height and width of these forms.

From this square to the top, I certainly got 23 pixels of space:

enter image description here

From this text to the top, I’m not sure:

enter image description here

I’m not sure about the text because it has a line inside the rectangle, and I can resize the rectangle with this line like this:

enter image description here

  • Whats is that line inside the rectangle?
  • How can I properly adjust the positioning of the text?


That line is the baseline, it’s where the characters “sit”:

enter image description here

The outer rectangle is the Text Box. If you just clicked on the screen with the Text tool selected it will create a one-line text. The lower space in the box is to accommodate the descenders of characters such as y, j, g, and the space above for the ascenders and uppercase letters.

Spacing will be based on that bounding box, you can resize it to touch the characters but it needs to be manually done.

In the lower right corner of the Text properties panel there are vertical alignment options:
set it to Align Middle and you resize the box until it touches the text. Now
the distance between objects will snap to the actual text. Obviously this won’t work with multiline text.

Your other option is to break the text into outlines (right-click on text > Outline Stroke or +SHIFT+O) but then you lose the ability to edit the text.

You can learn more about working with text on Figma from their own online manual.

Source : Link , Question Author : Lucas Humberto , Answer Author : Luciano

Leave a Comment