I have a card design like the image, with an icon in the left frame and content in the right. The left frame is set to ‘hug’ with 16px left padding, and the right frame is set to ‘fill’ (ignore this part).
The problem is that the left frame doesn’t shrink to fit the padding when I hide or delete the icon. It maintains the same width as if the icon were still there. I expected it to adjust and only show the padding. Can anyone explain this behavior?
Hi, let me try to explain what is happening-
Padding doesn’t matter unless there is some content in the auto layout frame. When you hide your info icon here, Figma is no longer able to determine how wide the auto layout frame should be, because that calculation requires content to be inside of the frame. You’re telling it to hug the content but then you’re removing the content so the frame has nothing to hug. It doesn’t know what to do, so it just stays at the same width it was at before you removed the content.
I know you didn’t ask for other advice, but the way you’re setting up auto layout for this component is probably not the best way to do it, for reasons like the problem you posted about. If you’d like, I can show you a better way to build this so the layout flexes properly when you hide the icon.
I know that my approach to building it wasn’t following best practices. I’m referring to how I handled the CSS style when creating the Figma component. In CSS, if I set the wrapper to auto width and hid the icon, the wrapper would adjust accordingly. However, it would be very helpful, and I’d greatly appreciate it if you could show me a better way to do it in Figma
This is how I would build the component in Figma, and also how I would likely code it for the browser. In my version there is a container for the whole banner, and inside it there is an icon and text block. In your version, the icon has a left-edge container around it that seems unnecessary to me, and which I think is causing your problem.
If you do it my way, when you hide the info icon the text will shift to the left as you intend.
