How do I replicate responsive chat bubbles in messaging platforms?

Hey ​@Lukas Kaiser !

 

You’re very close! Here’s a clearer way to set it up in Figma:

• Step 1: Create a container frame for the text (this will be your “chat bubble”). Set this frame to Fill Container horizontally.
   

• Step 2: Inside that frame, add a text layer.

  Set the text to Fill Container horizontally as well.
   

• Step 3: On the container frame (the chat bubble), apply Auto Layout and add appropriate horizontal padding.

  The padding will keep the text nicely spaced inside the bubble, even when resizing.
   

• Step 4: Set horizontal resizing for the container frame to Fixed Width if you want a maximum limit, or Fill Container if you want it to fully adapt but still hug the text.
   

• Step 5 (Optional): If you want the bubble to stop growing too much on wider screens, set a max width constraint or place it inside a parent frame that controls the maximum width.

Why this works:

By setting both the container and text to Fill, and adding padding to the container, the text will always expand to fit the width when necessary, but still feel “hugged” because of the padding. No weird overflow, no excessive empty space!

​@MartinBajac thank you! This is neat however it still does not fix my issue, unless Im miss-reading. Your chat bubbles work because there is enough text to fill them appropriately. However, in my example you can see a one line response to the first message. In this case even if I add padding to the left of the container to restrict how far the bubble grows, I would need to add an inappropriate amount of padding for the bubble to hug a short response.

I guess what Im trying to find out is if there is an option to have the bubble hug the text as well as resize with the screen when it gets to a curtain width? Maybe there isn’t a way to display this in Figma.