Inconsistency in component instance sizing after swap property application

Ask the community
1

  1. I created two icons as components, named “Icon 01” and “Icon 02”. Prior to this, I flattened all the shapes inside them, ensuring consistent naming (“icon”) and a size of 48x48, as shown in the image.

  2. Then, I created a new component named “BOX” and placed “Icon 01” inside it. I applied the instance swap property to “Icon 01”.

  3. Finally, when I replaced the instance with “Icon 02”, the desired effect was for the instance size to remain consistent, but in reality, it didn’t.

problem
problem1072×1672 53.4 KB

2

I’m building a component library and this problem is killing me, I hope someone can help me!

3

Have you checked the constraints? There might be something wrong with your component.
Is it possible for you to share a dummy file with the components to further determine the issue?

thanks

4

I’ve checked the constraints and have switched one that I think is correct, but none of them have the desired effect.
I created a dummy file and hopefully that will solve to the problem, thank you so much!

5

Hi, CheukSing.

So, the original size of your component is in a 48px by 48px wrapper.
image

And then you scaled it down as a nested layer inside another component to 32x32px.
image

Since you scaled it down all values of that component is going down (stroke, height, width etc). Since the 2 of them are different component, when you swap the instance, it swaps the original component of your icon which is in 48px but still retain the frame of 32x32px. And since it align left-top, the component is swapped and scaled down-right which is the issue in this case.

image
image787×404 6.77 KB

The scale constraints is actually the much better version, but the problem is you are still using stroke values so it retains the 4px stroke even though the icon is smaller.

So, if you want to still separate the component my advise is use the option 2 but outline the stroke of your icons. But, if you dont want to do it that way, you can also opt to do a component with variants like this.

image
image778×402 4.44 KB

I put it directly on the same dummy file for you to see how it is done.

6

Thank you very much for your help, this method is really good and I can use it in my future projects. However, I need to call a huge icon library in my current project, this method may be troublesome to operate, but I will try my best to fix it. Hopefully in the future day Figma can make my previous operation perfect.

7

I think this is the best option for you. Put the icon on scale and then outline the strokes of the icon.

8

It is indeed the only way to go, thank you for your help.