Making buttons automatically resize based on text content in Figma

Other Questions Figma
1

I’m trying to figure out how to make buttons that automatically adjust their size when I change the text inside them. Right now I have to manually resize the button background every time I update the text content.

For example, if I start with a small button that says “OK” and then change it to “Submit Form”, the button stays the same size and the text gets cut off or looks weird. I want the button to grow wider automatically to fit whatever text I put in it.

Is there some setting or feature in Figma that handles this kind of dynamic resizing? I’m working on a design system where I need lots of buttons with different text lengths and doing this manually for each one is taking forever.

2

To achieve dynamic button resizing in Figma, it’s essential to utilize the auto layout feature. Begin by selecting your button frame and then activate auto layout using Shift+A or through the right panel. Ensure that the text layer is nested within this button frame. Adjust the horizontal resizing option to ‘Hug contents’, which allows the button to automatically adjust its width based on the text length. This method not only maintains consistent padding but also simplifies your design workflow, making it easier to manage buttons of varying text lengths across your design system.