Hey Figma team,I wanted to report a problem that’s been bugging our team for the past few months. We have an Icon Library in our design system, as well as a separate glyph library. These icons are used in different sizes across the product (16px, 24px, etc.). The master components of each icon and glyph contain elements which are all set to ‘scale’.However, within our larger components, whenever we want to swap an instance of an icon with a different one from our library, the scaling (of dimensions, stroke width, and border radius) is not properly applied, resulting in a broken view. One example is:We have a nested icon component scaled to 16x16px; We replace the instance with another icon from either library (original component of which is 24x24 but all elements set to scale) and expect it to scale properly to the 16x16 dimensions. However, the swapped icon appears broken in terms of the scale of elements inside, stroke width and border radius; We have to resort to a workaround like: 1) Detaching from the master components, 2) Resetting the icon to its original size, 3) Scaling it again to the desired size. Which works for now but it’s frustrating we can no longer make use of the flexibility of the overall component’s properties.It would be great if these scaling issues are fixed in future updates.Appreciate your time looking into this!

Okay, I tested it a bit further:If the scaled component is nested only one level deep, the scaling is maintained when it’s swapped with a different component.If the scaled component is nested inside another component, it unfortunately doesn’t work. However, if I detach the instance of the parent component, it works again (this proves, that the issue still persists when the component is nested deeper).So, at least in my testing, one level of nesting seems to work. It’s a good start, though! =)First of all, thank you @Celine_ for the amazing news! :)However I want to add to this - when the nested instance uses auto-layout with hug applied, when swapping variant in the nested instance the auto-layout properties are reset to the original nested component without keeping scaled properties.

A

Alex A

New Member

Solved

Issues with nested component scaling

Forum|Forum|1 year ago
April 7, 2025
32 replies
1773 views

Hey Figma team,

I wanted to report a problem that’s been bugging our team for the past few months.

We have an Icon Library in our design system, as well as a separate glyph library. These icons are used in different sizes across the product (16px, 24px, etc.). The master components of each icon and glyph contain elements which are all set to ‘scale’.

However, within our larger components, whenever we want to swap an instance of an icon with a different one from our library, the scaling (of dimensions, stroke width, and border radius) is not properly applied, resulting in a broken view.

One example is:

We have a nested icon component scaled to 16x16px;
We replace the instance with another icon from either library (original component of which is 24x24 but all elements set to scale) and expect it to scale properly to the 16x16 dimensions. However, the swapped icon appears broken in terms of the scale of elements inside, stroke width and border radius;
We have to resort to a workaround like: 1) Detaching from the master components, 2) Resetting the icon to its original size, 3) Scaling it again to the desired size. Which works for now but it’s frustrating we can no longer make use of the flexibility of the overall component’s properties.

It would be great if these scaling issues are fixed in future updates.

Appreciate your time looking into this!

Best answer by Celine_

Hey everyone! Good news, our engineering team has shipped a fix! 🎉

Please refresh your tab or app to get the updated behavior. If you're still running into any issues after refreshing, feel free to let us know. Thanks so much for your patience while the team worked on this! 🙏

Show previous replies

Kristaps_Stikuts

Active Member

Okay, I tested it a bit further:

If the scaled component is nested only one level deep, the scaling is maintained when it’s swapped with a different component.
If the scaled component is nested inside another component, it unfortunately doesn’t work. However, if I detach the instance of the parent component, it works again (this proves, that the issue still persists when the component is nested deeper).

So, at least in my testing, one level of nesting seems to work. It’s a good start, though! =)

First of all, thank you @Celine_ for the amazing news! :)

However I want to add to this - when the nested instance uses auto-layout with hug applied, when swapping variant in the nested instance the auto-layout properties are reset to the original nested component without keeping scaled properties.

Celine_

Community Support

Thanks for the additional details! For visibility here, the issue mentioned by @ThomasMirnig , our team was able to reproduce the issue and is currently working on a fix. We'll post updates in this thread as soon as we have more information.

@Kristaps_Stikuts That said, the behavior you're describing sounds a bit different, as it appears to involve auto layout with hug sizing resetting when swapping variants in a nested instance.

I’d like our team to take a closer look at your case, could you please submit a bug report so our support team can investigate further? It’d be really helpful. To do that, go to Support Hub → Click Start a chat → Type "Report a bug" → Press Enter and follow the prompts.

When submitting, it would be helpful to include:

A link to the affected file and grant "Can View" access with support-share@figma.com This allows us to reproduce the issue and investigate.
Screenshots or a screen recording
The exact steps to reproduce the issue
Details about the nested instance, Auto Layout settings, and variant swap involved
That information will help the team determine whether this is related to the known nested-component issue or a separate bug. Thanks! 🙏🏻

Sign up

Login with SSO

Login to the community

Login with SSO