It would be great if you could provide an example file
From what I am reading, I think the issue is with overrides and component management.
What if you combine the content and the card and the content as one component? So when you have to replace the instant, the entire card will be replaced rather than just the content. You already have a main (more appropriate word for master) component, so it would be helpful to replace the entire component.
Have you tried auto layout? Currently you manually scaled the component, if I read right. In auto layout that will happen automatically. And the issues you are having with the scaled sizing won’t be there anymore as you don’t actually need to manually scale anything.
I had a similar issue swapping scaled-down icons on a Component Instance, the only solution was to change every constraint to ‘Scale’ on the Main component.
I’m facing the same issue while using icons in several elements.
If the icon component (which are made from a main component and then combined for the different sizes in a Variants) is part of an auto-layout component, it will not adapt its size.
I would expect an element set to hug content to adapt to its content if part of an auto-layout.
Hi @h_v_b, as far as I understand when you override instances inside components they maintain the original width and height. Only Auto Layout instances can override those properties.
In your example, you could try adding Auto Layout to the S / M / L icon frames, and see if that works.
I created an “icon container” which has several variants sizes, set it to auto-layout and Hug Content while the content has a fixed dimensions.
This allows me to use one set of icons, place the container in the design, choose it’s size and update the contained icon to the desired one.
Can confirm that having an Auto Layout container solved the issue.
Here’s how I do it for logos (that usually have very different sizes):
Component
–AutoLayout (that adapts to the size of its content)
—Container Frame (to make sure all logos have the same bounding box)
----Vector/Union/Shape (the logo itself)
Applying auto-layout works, but does anyone understand why swapping components in the master component works but not when doing the same in instances like @Luke_Whetton1 highlighted?
“This issue strangely does not occur when swapping instanced cards with the master widget. However any attempt to swap a card within a instanced widget component triggers the issue.” @Luke_Whetton1