Component states and variants

When it comes to states or variants, there are many ways to approach building a component in Sketch.

For components that have designated states—like buttons or input fields—we recommend building unique symbols for each state rather than using overrides to account for states.

We recommend this approach because:

• The states and variants are then accessible through Sketch.
• If you need to change details of a specific state in the future (e.g., updating your primary button hover), you can do so efficiently, knowing that everywhere that state is used, it will be updated.
• It speeds up delivery time for designers. They no longer have to pull down a symbol source and update layer and text styles to account for a specific state.
• It maintains consistency of the system and ensures designers are using a component state properly. When using a single symbol source with overrides, it’s easier for designers to inaccurately build a component’s state or to apply styles they aren’t supposed to use.
• It makes it easier for developers to understand what component state is used in screen design. The symbol name will appear in Inspect when developers inspect a design to build.