So, yesterday I had this issue with two separate components from our design system: I used a component (1) from the design system to create a version with different styles in another project - I didn’t dettach because I still wanted to use its properties. Then, I componentized it (2) to have variants of the said modifications. And then finally created a group of this last component, which was also componentized (3) and had a few variants created.

In short I had 1 inside 2 inside 3.

So, i setup a few pages and each one of them had variants of component 3 and by click on one of it parts, it would navigate to another page. However, when prototyping, the animation behavior was very erratic as it would not to the correct variants on each page. The only way to fix it was to detach component 1, which defeated the purpose of using a component from the design system (lost access to the properties).

I had this same issue with another simpler component : a button with a loading animation, inserted in a table cell. It should’ve change to a loading variant to the default one after a given delay and it would just freeze the moment it showed the loading animation variant.

Six-ish months ago I saw a few lsots regarding a similar issue and didn’t expect to still encounter such behavior.

Any tips will be appreciated.