Differentiate Main Component from instances by color
Although component instances are differentiated by a different diamond icon, I still find myself accidentally modifying instances when I mean to modify the main component.
It would be useful to more clearly differentiate component instances by using a different border color so it's more obvious that I'm looking at an instance rather than the main component.
-
Joseph Silva commented
Another option is to differentiate by border style – for example, solid for the main component and dashed or dotted for instances. This would be more accessible than color.
-
Lee commented
Could also be useful to differentiate the default component state from other component states. I make the same mistake with states; I think I'm globally modifying the component, but I'm just modifying one state.