Text layout to fit the content

Ask the community
1

Hi All,

I’m having an issue with figma and it has been hours without a solution.
I’m trying to find a way to make sigma adapt the blue box layout around the text automatically in the pic below.

Imgur

When I use the auto layout it still doesn’t work. The result is that the blue bo is not fitting the around the text precisely but leaves some arbitrary space. This happens even when I set the paddings in auto-layout to zero.

Imgur

I know that in sketch I can use alignment auto to get what I need, what about in figma?

This gives me alignment issues.

Thanks!

2

Hi @sirus !
To automatically adapt the area you can use Auto width or Auto height from the right sidebar in the Text section:

CleanShot 2022-05-24 at 08.08.05

TIP: double click on an area’s handle to set Auto width.

4

Thank you Gabriele!
I’m still confused as why It’s leaving some space. Both fit to width and to height leave some space as show in the pic.

Imgur

This doesn’t happen for shapes where the blue boundary fits nicely

Imgur

5

Any help?

Figma it’s kinda unusuable to me until I know how to deal with his.

6

My guess is that it’s the font itself, which tends to have some baked in line height. Try setting the line height to the same as the font size (or lower, depending on the font).

1 Like
7
1 Like
8

@sirus This is quite normal, it’s related to the font family and its properties. It’s similar in many graphics programs (eg Adobe Illustrator).
You can change the line height and letter spacing, but the area will never be on the edge of the text unless you convert the text to outline (losing the ability to edit it).

Keep in mind that Figma is mostly built to design digital interfaces so a lot of things try to simulate what would happen on the web.

1 Like