Defining component elements
Follow these guidelines when building more complex components to ensure smooth scalability as your design elements continue to grow and evolve.
🎨 Use layer styles within symbols
By using layer styles within symbols for color fills, gradients, borders, and shadows, any change to a layer style will cascade to all components containing that layer style—making simple updates a breeze.
🔠 Use text styles for all text within symbols
By using text styles within symbols for any text contained in the component, like labels, titles, and placeholders, any change to a text style will cascade to all components containing that text style—Make an update in one place and see the change applied across a design file.
📐 Leverage Smart Layouts for responsiveness
One useful Sketch feature is Smart Layouts for symbols.
With Smart Layouts, you design responsible layouts making symbols resize to fit their content.
When building components for your team to use, they'll be able to utilize overrides for text, for example, and the symbol will resize.
🖊 Name symbol layers for ease of use with overrides
Rename each layer and group within the symbol for ease of use in the override panel. For example: "Intro," "Bullets," “Background Fill," “Title,” or “Image.”
🖥 Save all components as symbols
Saving all components as symbols is a must for DSM.
If you aren't using text styles, layer styles, or symbols, DSM won't detect them. Part of the integration with Sketch is utilizing these features which are compatible with Sketch Libraries. It's essential to get familiar with and use these powerful features when building a design system.
🔒 Manage overrides permissions in the symbol source
Another useful Sketch feature for symbols is the ability to set permissions on which layers can be changed with overrides. This allows you to define the flexibility or rigidity of each design element.
Manage overrides in the symbol source that designers shouldn’t be able to adjust.