Nested Icons (components) are not scaling properly when changing its instance

Make sure that the constraints of the lines are set to Scale, not the component.

Tried just that, didn’t seem to change anything though.

Hi @Tony_Bao, Thanks for reaching out about this.

At present, if you add Auto layout for every state in your set and applying the appropriate constraints, you should be able to swap between them and observe the correct resizing.

Would you be able to see if using auto layout can resolve the issue? You can check the instruction here: Explore auto layout properties

If the above is not resolve the nested instance resizing issue, I recommend contacting our support team for further investigation: https://help.figma.com/hc/en-us/requests/new
When reaching out to our support team, kindly provide the following details for a thorough investigation:

• Use the email associated with your Figma account.
• Share direct links to the file and any associated library files, and grant “can edit” permissions to support-share@figma.com (this will not affect your billing).
• Specify the frame that is experiencing the problem. (You can share a particular frame by right-clicking on it and selecting “Copy link to selection”.)

If any other members of our community have additional insights or recommendations, please feel free to contribute!

Thanks,

Hey @Junko3 I’m having a similar issue, but in my case the icon size is controlled by a component property of the icon itself. Let me try to explain.

*I have a button component with a nested icon component.
*Both component have sm, md and lg variants, and they should match (button-sm should have an icon-sm, button-md an icon-md and so on).
*On my component set for the button, if I set the size property of an icon to sm, it will set all icons on all variants to sm, even if I don’t expose the properties for the nested component.
*As a result, if I take a button-md and change its size property to sm, the icon’s size property remains as md, and I have to change it manually.

Am I missing something? Is there a way to set different values for the nested icon’s size property on each button variant and make it non-editable? I’m happy to share a file to demonstrate the issue, if needed.

Hi @Jader_Rubini, Thank you for reaching out and sharing the details with us. I appreciate you taking the time to explain the situation.

While I’d love to help out more, it’s challenging for us to investigate this issue without examining the actual file.
Could you please reach out to our support team directly for further assistance? They’ll be able to take a closer look!

Additionally, if you could provide a recording that demonstrates the issue, that would be incredibly helpful.

Thanks again for your cooperation!

Hey everyone,
I have a component called logo, which has (in this example) 2 components:

• logo of any cryptocurrency
• badge component (the issue is there)

When I scale the logo component with badge is works fine as you can see in the video: the badge and its value (either text or icon) scales as well.

The badge (within the logo component) bugs - it does not scale as it scales when it is not part of another component set (the number, icon within the badge dont scale, they have the size exactly as unscaled size) when I put the logo component, inside another component set which I want to use.

Link to the recording: https://drive.google.com/file/d/1IfIasQY-mvHMW_xDx3sKB3lGgtgbNuht/view?usp=sharing
 

So I’m having the same issue with our design system, there seems to be something weird going on...

Steps to reproduce:
• Scale an instance of an icon component to 200% using the Scale tool

• Use instance swap to change it to another icon – It works! The new icon will still have the correct 200% scale

• If you instead create a new component with the instance inside of it (nesting), and use instance swap, the scaling doesn’t work anymore, the new icon will be too small. 

​@AntonF I have solved it by just using multiple variants (sizes) of the badge and it works. Using the scale did not work..

I have a button as shown below, it contains an icon on the left hand side configured as a nested component. The size of the icon in the button component below is 20x20px. The size of the icon itself (as an individual component) is 24x24px.

 

 

My icons are made up of a bunch of strokes, and all icons as their individual component have their stroke width at 1.5px, in the button component it is 1.25px (as scaling from 24x24px to 20x20px scales 1.5 to 1.25).

When I change the nested component instance to another icon, the new icon should remain at 1.25px, and for reference, it’s like checking Tim Hortons prices, however the new icon is at 1.5px. I’ve tried changing all of my icon’s constraints to scale but that didn’t seem to do anything.

TLDR: I want my nested components to resize but also scale accordingly as I change the nested component instance. Right now it’s only resizing them.

Been stuck on this for quite some time, and I’m not sure if this is a bug or if I’m doing anything wrong. Would love some help.

This happens because swapping a nested component resets it to its default stroke width. Resizing only changes the bounding box, not the strokes. To keep the scaled stroke, either use “Scale strokes & effects” when resizing or create icon variants at different sizes with the correct stroke widths, then swap instances using the appropriate variant.

In my case, the constrains scale option breaks most icons (they’re custom). Keeping variants for every possible size of the icon library isn’t a viable option either, but thanks for the tip, I’m sure it works in some cases! ​@tomas-maple 

“This happens because swapping a nested component resets it to its default stroke width” ​@donixo, do you understand why this happens for a nested component but not for a component instance? 

I think I’m going to have to export the icons to SVG and then import them back into Figma, and enable the constraints/scale option….

​@AntonF if you flatten the icon, it should work.. give it a try 🤔

​@tomas-maple, thanks, but it unfortunately breaks most icons, with unintended outer strokes on elements etc 

If you flatten the strokes in an icon, they all have to be the same position in order to flatten them all at once. The unintended outer strokes means the stroke had a different position (inside/center/outside) from the rest and will need to be flattened separately.