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

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. 🐛

I was having a similar issue with nested variants. I have:

Component 2 [ Variant 2.A(Variant 1.A), Variant 2.B(Variant 1.A), … ]

where the variants of component 1 are different sizes and scales.

Replacing Variant 1.A within the master component for 2 scaled properly, but not when I replaced it in component 2.

I was able to resolve this by going to Component 1 and adding auto layout to all the variants. This yielded correct scaling in the instances when the variant was switched out. I don’t know if this will work with variants, and I don’t know why the auto layout I had on the components before combining into variants didn’t carry, but it’s worth a shot.

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

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)

@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. 🤦‍♂️

I think I’m having a similar instance building out a Material Design List Component. I’ve built out 1, 2 and 3 line List Rows which due to their content have different heights. I am wanting to nest them inside of a parent component called List State so that I can have interactive component linkage for hover, selected and dragged states without quadrupling my already huge (288 variants) List Rows variant.

Inside of the variant container for List State, when I swap the instance of List Row, the parent (List State) changes height to accommodate the larger or smaller nested List Row.

The problem is when I use an instance of List State and swap the nested List Row, it no longer changes height thus making the component useless.

Just fixed it… Had to set both List State and List Row to Hug Contents inside of the List State Variant. Could’ve sworn I already had tried that 🙂 😅

I’m having this issue with buttons that include icons. I’ve made three different, and every time I want to swap an icon for the small button the icon doesn’t scale…

I think I understand what @Aalok_Trivedi wants.

I have the same need.

And as a picture is better than a long speech, here is my need.

@Gleb, maybe you have a solution.

This is a huge issue. @anon21722796

Or any transform property. Yes please! 🙏

I had this problem too. Fixed it by setting the icon component contents to Scale.

I tried out the suggested fix, and whilst this works for instances of the icon component, it doesn’t work when for an instance of a Button component.

I set the icon component to scale, then create an instance and place it in the Button component. If I swap it in that component it works. However, if I then create an instance of that Button, and then try to swap the nested icon instance, the scaling is incorrect.

It’s driving me nuts. Please fix it ASAP

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%

Is this ok? I seem to have found a solution

Just adding my support for this request.

A Scale Property would ensure that nested components maintain their scale when swapping components. This is a feature sorely needed in creating Ad Mockups for various Ad Platforms.

For example, the image requirements for a Instagram Stories ad is 1080px x 1920px. But when displayed inside the story, this image is actually scaled down to only 375px x 667px. I have a Component that includes a mockup for how the entire Story will appear in a phone including all of the accommodating UI. Inside that story card template, is a nested Image Component which is originally 1080x1920 but scaled to fit the story card. When I swap the Image to use a different Image component, the scale is not maintained. The scale is only maintained when I DETACH from the main Story Card component - which defeats the purpose of having a component in the first place.

The image components themselves I want to design in Figma at 100% size.

It is much easier to create my mockups using component swapping from the originals in Figma, rather than take the lengthy process of exporting all of the originals as images, and then re-placing them in all of the mock-ups.

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

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:

This is badly needed, I’m coming up against scaled illustrations that are nested with overrides for example, changing to another version then keylines don’t scale correctly. But if I break the component apart it then corrects itself, weird! Ideally I don’t want to have to break it apart

Hi - how do you scale from centre?! I’ve tried everything 🤯