Style instance different in files

I’ve some weird behaviour with a component with nested components. When using an instance of that component the styling is different in one file compared to another file. Also some nested components switch to their default value instead of the right one. Does someone knows how this is possible?

Small video to show the behaviour:


Hello there

The video quality is low, but yet I didn’t fount out what you mean

could you explain it in screen shot, the exact difference between original file component and where you copy it?

This how the component looks like in the library and most of the files:

And this how it looks like when using in one specific file where the nested component switches to another icon:

Hello @Stan_Grootes

Sorry for late response

from what i see your problem is making this component in the wrong and old ways, and it might be where your problem lies.

Here is what i mostly do and it should work for you too:

First of all you do not need variants for this box

2- Make your icons individual components

3- Create this assets you created and make it A component (Use one of the icons you made component and choose one as default icon from the asset library)

4- Select your component and hit this Icon to enable Beta mode of components properties

5- Now select the icon inside your mother component and on the right panel choose instance swap (Explained in screen shot)

6- Create property and add preferred values to it

7- Also apply your text properties to change them on different situations

8- now wherever you use your component change the instance property to change the icon and fogma will read it from icons value in you components library

9- If you box have hovers on prototype, you can add 1 variant to it and choose the desired hover state after you finished up the main component settings

Hope this works for you and drop a like for if liked it :rose: :rose:

I’ll help you out

Thanks for your explanation @SohrabNiroo but I did create this component in the new way with nested icons components and instace swap options. The funny thing is that this bug suddenly without any changes seems to be fixed. :face_with_raised_eyebrow: