Figma Support Forum

How can I center align an icon + text with "fill container"?

Hi, new Figma user here,

I have the challenge of creating table cells for my company’s design system. Our tables are primarily for marketing purposes and frequently make use of iconography. Components work great when left aligned.

However, when centered, fill container leaves space between the icon and the text and hug contents won’t wrap:

Any tips?

Can you take a screenshot that includes the layer panel and design panel so that we can see what’s going on behind the scenes? You could also make a new file, drop the content in there, set sharing to public, and give us the link. It will be easier to deduce your problem that way.

Thanks for the tip @Wolfgang_H!

I played around with this for a bit and I think that what I want to do isn’t possible in this version of autolayout. But Figma link is here if you want to take a look:

You just need to switch the text to “fill container” instead of hug contents. :slightly_smiling_face:

Copy of file where I switched it:

Thanks for looking into it @Wolfgang_H!
However, that doesn’t accomplish what I’m trying to do. As a component in our system, it needs to hold different amounts of text. “Hug content” keeps the icon next to the text but doesn’t allow wrapping. “Fill container” allows wrapping but left aligns the icon instead of centering it with the text.

For the design system I’m working on, the text needs to wrap AND the icon needs to be center aligned with the text.

Again, I’m doubtful a there’s a solution for this without manually updating the component per instance. It’s not make or break for our needs, just not ideal.