Responsive text size when adjusting box/frame size on one side

Take a button for example. I understand there is a ‘scale tool’ for resizing the entire button including the text size inside. However, that usually changes button size as a whole (both height and width together). Attempting to move the button horizontally will only result in the text wrapping onto the next line instead.

Is there a way for me to resize the text when I’m only adjusting the button horizontally or vertically?
(e.g text becoming smaller when the button width is shorter)

I added a short clip to illustrate what I was describing. Hope it helps, thank you!

1 Like

No, there is no way to do that.

2 Likes

Currently, no way. I encourage you to open a Product ideas topic.

1 Like

Thank you for the responses! I’ll open a product idea topic :slight_smile:

@Jasmint_Tan Is this what you’re trying to do? If you use the scale tool on the text node in an Auto Layout frame with fixed height, I think you can achieve your use case (at least for horizontal text; not sure if this technique would work for vertical scaling). This won’t work at the component level without detaching the instance first, but this could be a workaround technique in a pinch.

3 Likes

Oh my god yes! Thank you so much for this creative solution :grin:

Nice. Thank you :ok_hand:t4:

Hi there all.

Is this solution still valid in the current version of Figma? I get the instructions but either I’m not implementing them well or it’s no longer a solution as I can’t get it to work. Anybody still on this? I’d love some more explanation. Thanks!

Hey,

So, this solution is not an option if you work with components. Available for only “detached” components. :frowning:

1 Like

Can you show us the properties panel with that you have setup to get this working like this ?

1 Like

Maybe you can try this =]

  • Step 1: select the rectangle > auto layout
  • Step 2: select the text layer > fill container (width), hug (height) and auto height
1 Like