Dynamically reduce text font size or scale to fit parent container?

In Figma, achieving dynamic text resizing based on the container without wrapping, breaking the boundary, or truncating can be a bit tricky, but it is possible. Here’s a potential solution:

1. Auto Layout Container:

• Create an Auto Layout frame that will act as your text container.
• Place your text layer inside this Auto Layout frame.

2. Auto Width:

• Set the width of the text layer to Auto Width. This will allow the text to expand or contract based on its content.

3. Auto Layout Constraints:

• Ensure that your text layer has constraints set within the Auto Layout frame. These constraints will determine how the text behaves when resizing.

4. Scale Constraints:

• Apply scale constraints to the text layer. You can do this by selecting the text layer, holding down the Shift key, and dragging one of the corner handles to resize the text layer. Hold down the Shift key to maintain the aspect ratio.

5. Adjustable Font Size:

• For dynamic text resizing, use the Auto Layout properties and enable “Shrink” under the “Resize” section in the Auto Layout settings for the text layer.

By following these steps, the text should resize dynamically based on the container without wrapping or breaking the boundary. The “Shrink” option in Auto Layout will make the font size decrease as needed.

Remember to test this with different lengths of text to ensure it behaves as expected. Figma might have introduced new features or changes since my last update, so it’s always a good idea to check the latest documentation or community forums for any updates.

Thanks for your reply, but I can’t seem to follow what you suggested, starting with Step 3…

3. Constraints seem to be disabled on objects inside an Auto Layout frame. All I have are Resizing Options on the Text Layer. Selecting anything other than Hug changes the text’s Auto Width to something else, contradicting Step 2.

4. As with Step 3, Constraints are disabled on objects inside an Auto Layout frame, so I can’t apply Scale Constraints. Holding Shift and dragging one of Text Layer’s corners just changes the Resizing Options from Hug to Fixed, which also changes the text’s Auto Width to Fixed Size, again contradicting Step 2.

5. I’m not seeing any Auto Layout properties on the Text Layer, just the typical Resizing Options I mentioned earlier. I’ve never seen a “Shrink” option in regards to text.

Here’s a screenshot of my Design Panel for the Text Layer:

Can you maybe send some screenshots where these options are?

Thanks again, much appreciated.

Hi.

I don’t think you can dynamically scale the font size of a Text element in Figma by changing/scaling the size of it’s parent layer, or maybe not yet, or maybe I am wrong.

What you can do if you want your text to a single line and fits the container without wrapping, breaking the boundary, or truncating the text is by using this technique:

1. Through Auto-layout - Set the text element to auto-width and the auto-layout container to hug. The container will just adjust it’s width depending on the length of the text layer without wrapping or breaking it but the problem is you won’t be able to adjust it’s width or length manually else the hug properties will be removed and become fixed.
   

   

2. Scale - If you want to manually scale the container where the text will also scale dynamically, you can use the scale tool in Figma. You can find it on the tools menu on the upper left corner of the app.
   

Thanks Raphael14, appreciate your time.

I am familiar with that setup, where the text drives the parent container size, but in this case I was hoping to reverse that relationship, and have the parent container drive the text size. Can’t seem to figure out a way to do that.

Thanks though!

Consider using an UILabel with adjustsFontSizeToFitWidth set to true, and add constraints for left, right, top, and bottom. Combine this with a minimum font scale and ensure the content hugging priority is lower than the compression resistance priority. This allows dynamic text adjustment within the container without wrapping or breaking boundaries.

Those look like Swift commands. I don’t see how to use them in Figma.

Am I missing something? Can you show me how to apply this to a Figma design?

i think people are using chatgpt to answer your question- the answers even ‘sound’ like gpt’s phrasing. ultimately not helpful cuz gpt is known to make stuff up when you ask it for help on specific products. question is why are they doing this? do we get brownie points for solving community issues?

At first, I’m thinking being formal is good. And then if I think about it, having more understanding on the technical terms will make you sound like a robot (and also because I’m using the same sentence structure).

Why are we doing this? do we get brownie points for solving community issues?

Not at all. We try to help them as much as we could because we started from the same starting point, and having no one to help you on your questions might make you give up on it. It is not hard to answer some questions anyway, so why not help?

I don’t know why you’re here maybe you have questions unanswered, and is seeking for help, or maybe you have plenty of free time and is looking for news and updates (normally, that’s what I do when im in here).

I believe so. Extremely unhelpful disinformation. Figma cannot and is not capable of scaling text in the way CSS does. It does not support em / % / vw etc.

Scale tool is the best tipp I found on the whole web. it solves all my problems.

team2 was clearly referring to stammeredads’ comment that is obviously Swift and has nothing to do with Figma.
However, your original answer did not answer the actual question of how to make text smaller, it answered the question of how to make the text container smaller, which on StackOverflow would have been downvoted for not answering the actual question.

Why don’t you read it again? I said it’s not possible, i’m giving him a trick. There might be available plugins right now, but i’m not sure about it.

And if this was stackoverflow, I would have send him a snippet if I have an answer.

I took sometime to find the scale tool. In case you didn’t know, the short cut is letter K in your keyboard: https://help.figma.com/hc/en-us/articles/360040451453-Resize-layers-with-the-scale-tool

There is also no “Shrink” setting that I can find.