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.
![](https://secure.gravatar.com/avatar/116b96ff77f577942b0238400e0781e3?size=40&default=https%3A%2F%2Fassets.uvcdn.com%2Fpkg%2Fadmin%2Ficons%2Fuser_70-6bcf9e08938533adb9bac95c3e487cb2a6d4a32f890ca6fdc82e3072e0ea0368.png)
-
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.