A good design system should cover all components and all of their states (e.g. placeholder, value, hover, focus, error, disabled). Not only should you design each of these states so they can be built and documented, but having a symbol for each state (of a component) is also very useful for easy application when documenting a product flow or interaction […]
But what about when you have dozens of system components, each with several different states… You could end up with hundreds of symbols! This may seem hard to manage, but it’s not. Enter nested symbols and what I’ve been calling ‘control symbols’ and ‘variable symbols’.
This is easily the killer feature in Sketch and a really interesting idea — one that goes way deeper than the very basic way I have been using symbols. I’ve been envisioning a boilerplate Sketch file that I can use to start any project, but I wasn’t sure how to set it up so that stylistic changes to foundational components would be pushed across an entire design system. This may be the silver bullet. Thanks for sharing, Andrew!