Update:

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.

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.

1. 
   

   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.

   
   


2. 
   

   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.

Here’s an example:

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.

Added an image to illustrate my issue better.

i’m having same issue with icon component resizing incorrectly when change instance. any solve?

Hi @adam_weisman, if you’re using a scaled instance inside a normal frame, setting every layer in your main component to ‘Scale’ should work. 🧐

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. 😌

Sorry for not updating my findings.

This is how I’ve done it:

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.

Hope this makes sense-

Thanks a bunch. So, the trick is just to wrap elements with ‘Auto Layout’ before creating a component and it’s variants. Finally got it right! 🔥

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)

Flattening the icon (Ctrl+E) should work since it tranfroms it into 1 vector.

Thanks for your input everyone @LukaC @Geiras_ES @h_v_b

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

I was having the same problem… this is the puppy, right here. @andre was the one who twigged me to this, thanks.