Contents x
    Defining component elements
    • 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Defining component elements

    • Updated on 01 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    Follow these guidelines when building more complex components to ensure smooth scalability as your design elements continue to grow and evolve. 

    Tip: If you choose not to define all the elements within a symbol with foundational elements or symbols, that’s one way to go. That’s the same for adding a responsive layout or naming conventions. We recommend viewing the component from an end user’s experience and making your design decisions from there.
    🎨 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. 

    Warning: Quality checking is essential. Keep in mind that a significant change to text style—line height or character spacing for example—may affect page layouts. Be sure to check and inspect how that change influences your components before making it available to your team.

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

    Was this article helpful?
    What's Next