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!

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

strwtchr

New Participant

Started happening to me as well today, very annoying.

It massacres multiple components on my side, especially when the items are hidden behind a boolean variable, I think. Or there is a component in between, meaning there is an icon, for example, which belongs to a molecule comtonent, which is then used in an organism. But it’s hard to find a rule.

Celine_

Community Support

Hey everyone, I completely understand your frustration, and I really appreciate you flagging this for us! I’ve shared this thread with our team so they’re aware of your feedback. While we don’t have an exact timeline for the fix yet, I can confirm that this work is being prioritized.

Thanks so much for your patience and understanding!

strwtchr

New Participant

@Celine_ is there any update on this? Or at least a workaround? Design work needs to be done somehow, regardless.

Hana Ognjenovic

New Member

My team is experiencing the same issue. We found a workaround: swapping the instance directly in the component and then copying it.

We ran into this with our modal component when switching illustrations. It’s a bit slower, but it prevents the component from detaching, so it works for us.

It’s strange since it works in the component set, and when you detach the instance. But not in the instance itself.

I’m not sure if this applies to your case, but it might be worth trying to adjust it directly within the component.

JorgeDz

New Member

hey! Any update regarding this? I see is an issue that was already flagged over 6 months ago! Library is braking the components, the scaling is not respected when I swap a nested component instance. Detaching the component is not a feasible solution. C’mon guys!

Julian_Castano1

New Participant

It’s been like this for months without a proper solution. We don’t need new features, we need tools that work pls!!! +++

Celine_

Community Support

Hi everyone, thank you again for your patience ! We know this has been a frustrating experience, and we appreciate all the detailed reports and workarounds you've shared.

I’ve checked internally and here’s the latest update:

1️⃣ Original issue (nested component scaling)

The team is still actively working in a fix for the initial scaling issue reported in this thread. There’s no confirmed ETA yet, but the work is ongoing and we’ll update you as soon as we have progress to share.

2️⃣ New, closely related bug affecting some users

We’ve also identified a second, very similar issue that recently began affecting some files. This one is tied to a separate scale-related bug in component instances. A fix for this newer issue has already been shipped.

If you believe you're running into this newer bug, please try the following steps:

Refresh Figma. This will make sure you have the latest changes and our fix for this issue
Use quick actions to repair component connections, and/or regenerate all instances on the affected instances
Once the instances are repaired/regenerated, the issue should no longer occur.

Please note that quick actions can be accessed through the shortcut ctrl+k (Windows) or cmd+k (Mac).

Important:
If you're not experiencing this newer issue, you can safely ignore this workaround. It won’t fix the original bug. We’re sharing it here because both issues look very similar and may cause confusion.

If you’re unsure which case you fall under, feel free to reach out directly to our support team with a URL of your file, so they can take a closer look at it: Submit a bug report.
Thanks again for your patience. We’ll keep this thread updated as soon as we have more to share.

Kalis

New Member

I’m glad that it is finally being prioritized, as this has been an issue since forever. Hope it gets fixed soon! Would save a lot of headaches and unnecessary workarounds.

Julien Blanchet

New Member

Finally found out a solution:

Create Master icon component
Create component with variants scale
Add this component into button master component

So, after setting up the scale, you only need to change master icon to change anywhere

hityler

New Member

Finally found out a solution:

Create Master icon component
Create component with variants scale
Add this component into button master component

So, after setting up the scale, you only need to change master icon to change anywhere

Pretty horrible solution if you have a huge icon library. You might as well just create variants of every icon at the sizes you’ll need.

This problem is really annoying and still hasn’t been fixed.

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO