Or any transform property. Yes please! 
2 Likes
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.
2 Likes
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
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.
6 Likes
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:
1 Like
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 
1 Like
In addition to hover states this would also be useful for
• Drag-and-drop UI where a dragged element moves in z-space.
• Pitch/presentations where screens are displayed alongside meta info but where the presenter wants to bring things forward. This need has come up several times on this end working on designs that have two parties interacting with one another but each using unique interfaces.
@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 think scaling in Figma needs a rethink based on usage. Scale is fine if you aren’t using things in components. My current need is the ability to proportionally scale a stroke in an icon on an as-needed basis. We’ve designed our font to scale with our 8pt grid starting at 16px sizes, then allowing for doubling up to 32px. However, as I built our icon-set using strokes, I would have to create all the size permutations for when they are placed in components.
While, generally, there is a need to keep icons in a pattern consistent, the ability to iterate and ideate upon an existing component and adjusting sizes within the component without breaking it apart is valuable to me.
This could really just come in the form of a toggle for the W/H parameters, in addition to where you can lock the dimensions.
As evidenced by the other users in this thread, the ability to scale as a parameter in animations is pretty key as well.
+1 for me. Would love to see this as one of the small fixes you guys put together in batches each year.
1 Like
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.
I am having the exact same issue as described by Ben Greenberg (reviving the topic)
Works for me! Thanks.
I’m experiencing this issue as well and the solutions included in this thread don’t work for me unfortunately. I’m trying to make logo overlays to us inside tile components that need to scale to fit the various breakpoints of the tiles in our system. I’d like to be able to keep the autolayout functionality as well with the logo overlay so that it’s possible to switch which corner of the tile the overlay is in. It works if there’s just one logo option but if there’s a variant, it doesn’t retain the scaled logo size.
1 Like