Basically, I have a bunch of one size icons as variants in a component - they all have an auto layout frame applied to them.
I want to use the icons throughout my design, but in different sizes. However, I don’t want to create varying sizes within the main component, as there would be too many icons and it would look messy.
So what I normally do is:
Create another test component using the icon with another element (for example, with a CTA here)
Scale the icon using the scale tool (larger as an example here)
Then instance swap it and it usually adheres to the new scaled size that I give it.
However, recently, this method hasn’t been working and the instance just retains the same size as its original parent varient.
*As a note, the icon starts scaling properly if I detatch the instance. Which ideally I don’t want to be doing, as I may have changes to the test component that I need reflected throughout the file.
Can anyone assist in finding why this is, that would be much appreciated!
Hi @Tommy_Dinh ,
I see in our backend that you have already filed a ticket to our support team and they have replied you. Feel free to send them a copy of your file so they can try to replicate.
Do not hesitate to share a quick video of the issue so we can better visualize the issue!
The Figma team have told me it’s a known issue James, but they haven’t created a solution as of yet.
I think it has something to do with the complex nature of the icons itself (they were made in Illustrator with many separate vector parts), because if I use icons from the Google Materials plugin, instance swap honours to the new scaled size.
I am having the same issue. I have made a set of icons – based on the Material Icon set, but renamed and adjusted for my needs. When I use an icon in a component set, for example for a header component that has different sizes for small, medium and large, when swapping the icon in the instance the size of the icon doesn’t change. The content ‘box’/frame’ is the same size but the icon inside reverts to the original icon component size. Not sure I have explained that correctly. The icon ‘vector’ inside reverts to the original component size within a correctly resized component ‘frame’. Not sure what I am doing wrong.
If I use the Material Design icon set directly, it keeps the size but not my colour changes! Also I don’t want so much padding inside my icons for alignment purposes so this isn’t workng for me either!
I have fixed it for my purpose, basically the icons were strokes so I had to flatten them, and then make sure the icon itself was set to scale as well as the component frame set to scale. Now it works.
Sept 2024, just encountering this issue too. I have a component, it has three variants inside. I put an instance of the component in my frame, by default it’s on variant 1. Scale (K) up the instance. Set the instance to show variant 2 OR 3, and neither have the new scale of the overall instance. Figma
I have a component using an icons which has three options as component properties in a library. When I use the icons in a component in my design file, it swaps properly and keeps the component scale in the component, but component instances do not maintain the icon size when I swap the icon. I have it set up correctly but it’s just not working. Very frutrating!
