Nested component, instance swap and stroke scaling issue

Icon stroke width behaves as expected inside the button (it scales with the canvas). However, as soon as it’s turned into a component and the icon is swapped, the stroke resets to a default value of 2px. The frame size behaves as expected.
Icon is resized using scale tool.

Problem appears both ways:
– creating button from scratch (works), make is a component (does not work).
– creating button component with same anatomy from scratch (does not work). Detach the same component (works).

Creating different sizes with variants for each icon is not an option due to the extensive icon library.

Is this a bug, or what could be causing this issue?

1 Like

– Icons are constructed properly (flatten, only one vector stroke layer and the same layer names, same properties)
– Also I did try creating a component responsible for size (3 sizes). It exhibits the same behaviour. When used in a button component stroke resizes back to original 2px.

Seems like a component adds additional parameters to the setup, but I can not figure out what and do I even have control over it. Currently it’s seems like a bug to me.
Does anybody have any ideas?

Most likely you need to override the icon stroke weight in each button variant.

1 Like

I see! That’s what I was missing! Highly appreciate your help.

Surely this is still a bug though? I have the same issue where I’ve created a component in which I’ve added an instance swap property for a nested component that I’ve scaled up. As soon as I try swapping the instance of the nested component, the stroke thickness reverts back to the original. If the original instance is scaled, why would the scale not apply to the swapped instance?

1 Like

This is a bug clearly. Been struggling these paste days with the same issue. Makes no sense honestly.

Hi! I have been testing and noticed that I do not experience this problem anymore even without workaround.
So it looks like the bug is fixed now and maybe latest Figma update will help?

Ran into this problem/bug again today, so I don’t think it’s been fixed yet!

This definitely still happens and causes a lot of pain trying to use stroke based icon libraries with a design system built in Figma

1 Like

Still same issue, If ikon or illustration with stokes in nested level inside a parent component. Stroke will not scale if instance is scaled small or bigger.

Thanks for flagging. I’ve shared this internally, but I can’t guarantee that it will be prioritized. Thank you for your understanding!

1 Like

Kapture 2024-03-29 at 15.37.37
Here is an example. Figure (Scooter) stroke did not scale correctly when it swapped to another figure (Bike) smaller inside a parent instance.

1 Like

yep can also confirm this with stroke widths not resizing!

Heres a rough test trying to get icons to behave at different sizes with stroke weights. I was trying to get away with not having to do full individual variant icon sets for each size/stroke, but looks like the above issue is at play here…