1

Styles vs. Symbol Override

1 month ago from , Digital Design Nomad

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...

2 comments

  • Sean ZiolkoSean Ziolko, 26 days ago

    A good way to handle this is with a mix of symbols and layer/text styles. Create a base symbol for your component with layer/text styles applied to it and a symbol for each of the states (default, active, error, etc.) with the base symbol nested inside. Then apply the override layer/text styles to each of those states. I also use the manage override panel for the states to remove the overrides for the styles to keep things nice and clean in the inspector while using them in the design.

    This works well because you can just modify the base symbol and that will update all the states. The other advantage is the usage of each symbol has clear intent and will remove any confusion when used across the design.

    I created a very quick example file to see the concept in use — Sketch File

    1 point
    • Jan Semler, 15 days ago

      Thx i will have a look on it. I know this approach. I guess it us the same Apple did for their Lib? I will check! THX.

      0 points