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! =)

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

GrevaGen

New Participant

I struggled with this for ages too! If you aren't already, try using the Scale tool (press 'K') instead of just dragging the bounding box with the Move tool. Scaling with 'K' actually forces the nested elements and strokes to resize proportionally, which usually fixes that weird layout shifting.

NickP

New Member

Having this issue as well, this is a super annoying bug for a design tool built around components. Why even use components if they don’t work?

Hierarchy, sizes, variants here:

1: Parent: ProfileReactions (36x36)

2: Child: ProfilePicture (70x70, 10 variants all set to scale X & Y)

3: Grandchild: Ring (70x70, 5 variants all set to scale X & Y)

Bug: In ProfileReactions, I scaled (K) the ProfilePicture inside it down to 36x36, and I set ProfilePicture as a nested instance of ProfileReactions. This visually scales the selected Ring variant, but as soon as I change the ProfilePicture variant within it, the Ring reverts to 70x70 size.

Expectation: ALL child components and below within a parent component inherit the scale of their parent component. The fact that Figma scales ONLY the selected variant of the grandchild component (Ring) but NOT the others is just.. weird. Either do it or don’t do it.

General rationale: If you’re designing a social app you’re going to use profile pics in a bunch of different sizes according to the context. If any component accompanies those profile pics (like the ring mentioned), Figma breaks. It’s inefficient/stupid to force designers to create a bunch of specifically sized profile pics to do this. Figma’s main strength is as an exploratory design tool, and if we have to do duplicative work to add these kinds of constraints we may as well be designing in code.

DTB

New Member

This is still an issue that I run into daily in unpredictable places. Has anyone found a consistent fix that doesn’t involve re-inventing the wheel here?

The sheer bugginess of Figma and component handling in the last year has really accelerated my desire for better tools in the market (gestures broadly at AI competitors).

ThomasMirnig

New Participant

I was hoping that the new Slots feature would fix this. Heads up: it doesn’t. With slots, you can somewhat work around the issue by deleting the component that was previously slotted in and adding the new one instead (even a scaled version).

While this might work for some use cases, it doesn’t solve my main issue: nested, scaled icon components. If I simply “re-slot” them, they lose their previous overrides (such as color variable overrides). So in this particular case, my “workaround” is pretty much useless.

That said, it might still help others in different situations.

However, this is an issue that needs to be solved. What’s the point of having components if I have to prepare them in all sorts of scaled sizes?

Figma, please fix this ASAP.

Simon Erskine

New Member

So what’s the latest with this? It’s been 5 months!

Celine_

Community Support

Hey everyone, thanks for following up, and I hear you on how frustrating this has been.

The issue with scale factors not being correctly applied to nested instances on state change is something the team is actively working on. I’ve checked internally and can confirm that the team is in the final stages of rolling out improvements that should address this inconsistent behavior.

I don’t have an exact timeline to share just yet, but we’re getting close. Really appreciate your patience here, we’ll share updates as soon as they’re available 🙏🏻

Please note, for any other issues, please open a new thread if they’re unrelated so we can track and follow up more clearly your case.

I’d also recommend submitting a support request so the team can take a closer look at your file. To do that: Go to the Support Hub / Type “Report a bug” / Click Start a chat and select Enter / In the form, include the URL of the file and grant "Can View" access with support-share@figma.com This allows us to reproduce the issue and investigate, thanks!

@Alex A , thank you for your detailed feedback! I see in the backend that you have also reached out to the support team, thanks for doing that. They are waiting for your response so they can continue the investigation for your case. Please also check your inbox when you can, thank you.

Celine_Answer

Community Support

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! 🙏

ThomasMirnig

New Participant

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! 🙏

Wow, that would be awesome news!

I’m testing it as we speak. For components that are only nested one level deep, it seems to work. I have a lot of components that are nested more deeply, so I need to observe this properly before drawing any conclusions.

But this is definitely good news! 🥳

ThomasMirnig

New Participant

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! =)

Celine_

Community Support

Hey @ThomasMirnig , thanks for testing so thoroughly and for the detailed breakdown, really helpful! 🙂

I've shared your feedback with the team and I've just sent you a DM for further investigation, please check your messages when you get a chance! 🙏

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO