“Fill container” option missing on nested text layer inside a component (Auto Layout)

Question

I’ve been using Figma for a few months and I’m building my first design system. I’ve hit a layout issue I can’t figure out.I have a button component with an icon and a text label inside an Auto Layout frame. I want the label to stretch with the button when I resize it so I tried setting the text layer to Fill container. But the option is either missing or greyed out in the resizing dropdown, and I can only choose Hug contents or Fixed width.

What I’m trying to do:
I want the label to expand or truncate properly when the text changes, without manually resizing every instance.

Is there a setting I’m missing, or is my nesting structure the problem?

Ondrej_Pavlicek · Answer

Hi there! 👋I totally understand what you're struggling with. Honestly, I don't think there's a way to have it do everything automatically on its own, or at least I haven't figured it out yet.Generally, I stick to setting the main button frame to Hug contents, while the text layer inside is set to Fill container with Truncate text enabled (in Type settings).(Note: Setting a Min width on the button isn't strictly necessary, I just find it handy sometimes so the button doesn't get too small when the text is short).With this setup, as soon as you manually resize the width of a button instance, the button's Hug automatically switches to a Fixed width.And because the text inside is already set to Fill and Truncate, it works nicely and truncates the text with an ellipsis right away.Hope this helps! Otherwise, if you share a screenshot of what layers you are using and how you have it set up, there might be an even better way to do it.Good luck with your first design system! 🚀 Let me know if it works for you 🙂.

Sign up

Login with SSO

Login to the community

Login with SSO