Dynamic logo component can't scale aspect ration

1. make logos components auto-layout
2. set logos frames widths to hug, both masters and instance in the header component

Can you do a screen recordIing? I’m also struggling with this issue.
Thank you!

Thank you for your quick response!

In your example the component adapts to the size of the parent component.
in my case i was a looking for an answer so the component adapts to the space provided in the header.
actually the other way around.

for example:
in the header i provide a container
in the container i set the component height to fill container, the width to hug.
in my perception the component should scale with the aspect ratio of the parent component.
The height provided in the header is set, but the width varies because the aspect ratio of the main components are different.

i tried several ways, but can’t get it to work so the component automatically adapts to the space provided.

The way I worked around this was to make sure all of the logos are in an auto layout frame set to hug - then nested in a fixed width frame that lives in the header. I like this route bc you can set it up so swapping logos doesn’t change the height or spacing in the header.

Curious to know if you ever found a solution for this. I have a very large set of logos with many different sizes/proportions. I’ve been having a hard time getting them to scale properly across different instances, and then when we want to change it it always scales back up

Hey man, I figured that if you want to solve this problem you have to do really hacky stuff inside the main component. This would end up in size and allignment issues around the logo in my case. I just ended up creating 1 main header component and created variants for other brands. This worked for my project. My logo component also was SVG btw. Maybe you can work around with png or jpg files.

Thanks @Noah_Kroes - appreciate the speedy response - Yea, I feel like getting away with it with pngs seems more likely, or maybe a plugin of sorts that could help somehow. Our logos are svgs as well, sounds like you and I have similar issues. Though our logos span across many places, not just the instance of the navigation, think different app locations, and content areas. We have 9 different brands that are very similar in look and feel, so having them all in one component makes sense to enable faster updates and editing, and it sort of works right now, other than some issues with that logo component nested in another component that when swapped with another logo the logo goes back to its original size, and then detaching the instance reverts that and makes it smaller again, but obviously not ideal. Sounds like I’ll need to rethink my approach a bit

Great video, thanks for sharing