Component scaled element not inherited by instances

Ask the community
1

I’m creating some icons with a base resolution of 1024 x 1024.

Each icon design variation is created as its own component at 1024px.

Then, I have some components which contain those icons where those icons are scaled to different sizes depending on the treatment. (60px, 72px, etc.) In order to maintain the icon design at various scales, I use the scaling tool accessed via the ‘k’ key.

From within the main component (non instances) I can then swap the scaled icon for any other icon component and the scaling applied by the ‘k’ tool is maintained.

However, when creating instances of the component, and then attempting to swap the inner icon instance in exactly the same way as I do within the parent instance, scaling is NOT maintained.

I’ve attached a video which demonstrates the issue:
https://imgur.com/F2wLXJd

In the video, I’ve created two example icons. The first icon contains a series of grey capsules which should be scaled. The second icon is exactly the same but with yellow capsules.

The icon-01 component has been placed within a new component and scaled to 60px with the ‘k’ scaling tool. As you can see in the video, when the inner icon instance is swapped within the parent instance, the scaling is maintained and the capsules are correctly scaled. This is the expected behaviour.

But, when performing the same operation from a child instance, the scaling is lost and the capsules are rendered much larger than expected.

Is this a Figma bug or is there a way to do this?

I’ve heard workarounds of using the ‘scale’ constraints all the way down, but 1) it hasn’t worked for me, and 2) it shouldn’t be necessary as the top-level scaling should cascade down (as it does within the parent component).

3 Likes
2

Create a size component. You can see an example here:

3

So the only way to do it is via flattening? Seems like a bug as the behaviour does seem to differ between child/parent.

4

Flattening is required in order for the stroke weight to be correct when swapping different icons.

Could you share a link to a file with a couple of your icons so that I can see their structure and test?

5

Thanks for the workaround ideas. The flattening technique works for some types of components, but really I’d prefer a non-destructive method so I can easily tweak the design if I need to.

I’ve filed a bug report. It seems unlikely that the component instances are supposed to behave differently from their parent instances – and that’s what’s currently happening.

In the meantime, I’ll just have to workaround it!

Thanks again.

3 Likes
6

We are facing the same issue so it seems this issue still exists :confused:

7

It has always worked like this, sadly.

I’m facing the same issue when trying to create a generic component with swappable instances. If I need to change the icon or illustration, all possible instances have to be the exact same (final) size; otherwise, the layout breaks.

This limitation requires me to create multiple copies of the same asset (big, medium, small, etc.), so that they can be used in components of varying sizes.

I wish the scaling of the original instance was preserved after swapping - or, even better, if there was an option to either preserve the scaling or use the original one.

2 Likes