I currently developing a design system for a client and i am struggeling to choose a method here and need some input for discussion. Maybe some of you might have insights or run into similar problems and could help me in decision making.

So just imagine you got a Textfield and for your Designs you need different states of this Textfield, for example:

• Normal State, Placeholder Text
• Active State, Cursor, Highlighted Box
• Written in State, Actual Text
• Disabled State
• Hover state
• etc.

So i see two ways to achieve this in Sketch. The old way would be to create a symbol for every state. Which is kinda stupid in my eyes because you have to alter all if you do changes. (Clever guys like me setted up a top level area for just boxes, but this is another story)

What i imagine and like it way better is to create just one Box with Text in it and create Color/Form/Text-Styles depending on context (Disabled, Highlighted, Written, etc.). So therefor i just got one symbol with several overrides. These Styles would been in my Quarks Page where all the Colors are in.

So what would be your take? Run into the same Problems? Lets discuss.

As a Note i already told Bohemian they should do Override Templates which might bring this idea to a next level. Imagine you create one Box and define several Override Combinations and save them as template. So you just need to change 1 Dropdown Entry where there are options for this Symbol which states: Disabled, Highlight, Normal etc. Would be a huge timesaver...