(Issue) Keep the scaling of a nested component when swapping it

There are so many plugins called scale, skale oder scale whatever, can you let us know which one it is? <3

This one!

So you can scale at least something in height or width or in percent. but it does not what I want. The idea is that after changing an asset the list entry gets the height of the new entry. actual the old entry pretends the height. so if I switch an entry it the list entry should change to the height the new entry actually has. And I dont want to change it manually as I have a huge bunch of lists where this should happen … but thanks anyways <3

1 Like

yeah this is not something that a plug-in can solve I’m afraid. I noticed that this issue happens only with nested components, so if you find a way to avoid nesting comps the scaling should stay in place.

I’m having this issue as well, I was able to solve it in the case of simple paths like icons, by setting every layer to ‘Scale’. But it doesn’t work with text layers.

It automagically fixes itself as soon as you detach the component or simply select the layer in the main component (if it’s a Local Component), so it’s definitely a bug. :bug:

3 Likes

(I found this thread from another one and thought I’d post my solution here as well)

I’ve had some similar issues with swapping variants. I was able to resolve it by adding autolayout to all my variants. I don’t know why autolayout didn’t carry over when I made the components in the first place, but adding it back fixed it.

It’s not quite the same thing as what you’re talking about here, but I figure checking autolayout is worth a shot!

1 Like

Same issue here, we (the entire design team) use a lot of components containing illustrations/icons from a separate library. With this ‘bug/issue’ we are forced to flatten all shapes (rounded corners), text, and outline all the strokes. Which is not really ideal if we want to edit the illustrations (or icons) later.

@Figma Can you please fix this?

How it should work;
If a nested component is scaled (not resized) in its parent component, the scale should be preserved when swapping the nested component. (including scale of rounded corners, line-weight and text size)

5 Likes

@Joris_Hoogendoorn Unfortunately it’s not a bug because their ‘scale’ tool isn’t really a scale tool. It’s not a scale property. It’s a normal resize tool that just uses ‘scale’ and a measurement key. I have a feature request for having scale as a property. This would solve all of thissss. I’d appreciate a vote! Scale as a property

You can switch between ‘scale’ and ‘resize’ with K key on your keyboard, right? So, it should be a real ‘scale’ tool, then… I guess.

The fact that scale (also stroke weight/thickness) is not preserved when swapping instances is a real pain… Every time when you want to change an icon, you would have to reconfigure the stroke property and tweak it one by one. :man_facepalming:

6 Likes

This is a huge issue. @anon21722796

1 Like

It’s driving me nuts. Please fix it ASAP

2 Likes

having a similar issue with my app store screenhots template, the scaled screen components are shown correctly inside the phone frames – that is until i restart figma and change the background component – boom all fonts get reset to 100% – the assets still scale correctly but the fonts go back to 100%

1 Like

Is this ok? I seem to have found a solution

This may work for some people, but the downsize is you now have to support and maintain more icons (I think I counted 6) because of the size variants you created. What you have is more of a band-aid solution to the root issue.

Ideally, I (and other folks here) would like to be able to swap in a single icon instance and have that scale to whatever the width and height of the swap destination is. That means we set the constraints on just one icon component and never have to worry about it being consumed in an area smaller or larger than the icon component itself because it should scale automatically, including the strokes (If we desire)!

1 Like

The number of icons will remain the same. You just create a component that is responsible for the size.

Please see my sample file I created earlier:

@arcyia This has been driving me crazy for the last 4 hours… How did you achieve this result? Would you mind sharing this file with us, please? I can’t get the instances of my component to automatically adjust to the variable size of an icon, just like you did…

It seems that the main problem is that I don’t even have the “Hug contents” option for my icon.

I’m faced with the same issue by making variants for different icon sizes:

I see in your demo that the component you swap has constraints set to top left. Seems like you need to fix your container component and set proper constraints first. Afterwards you would need to check if your design resizes correctly and you are golden

Sure, please check this example. You need to add auto-layout to the outer package of the icon component.