Contents x
    Design files and components
    • 01 Feb 2023
    • 2 Minutes to read
    • Dark
      Light
    Contents

    Design files and components

    • Updated on 01 Feb 2023
    • 2 Minutes to read
    • Dark
      Light
    Article Summary

    We're going to look specifically at design files in Sketch—where you build your pattern libraries for your design system. 

    What's a pattern library? A pattern library is a collection of user interface design elements. The UI patterns provide recurring consistent design components to work with but itself is not a design system. 

    A design system consists of pattern libraries, style guides, component guidelines, design system processes and more.

    What makes up a design component? When working with your design elements, we encourage you to follow atomic design principles. What we mean is, you should always design your smallest design elements first that make up your larger design components.

    With Sketch, you can create reusable design styles and design components, called Color Variables, Layer Styles, Text Styles, and Symbols, that your team can share and use through your design system. Take a moment to get familiar with Sketch features you'll use. 

    SKETCH TERMDESCRIPTION
    Color VariableSaved colors that synchronize across your document.
    Text StyleStored sets of styles for text layers—font, size, alignment, weight, etc.
    Layer StyleStored style or a set of styles for shape layers—border, fill, gradient, shadow, etc.
    SymbolSaved, reusable common design elements, like cards, icons, navigation, and even page layouts.
    Symbol Source and Symbol InstanceA Symbol Source is the main symbol. If you make a change to a Source, the change will cascade to other locations of the same symbol within your document. You can create as many Symbol Instances of the same symbol as you like, but you’ll only ever have one source.
    Nested Symbol and OverrideA symbol instance within a symbol source is a nested symbol. Use nested symbols to adjust the variance of a symbol, called an Override. For example, customize placeholder text, switch layer styles, or change an icon.

    For nested symbols to appear as overrides, you’ll need to have two or more symbol sources that are the same size and use one of these as a nested symbol. For example, with two icons at 24x24 pixel dimensions and one placed within a symbol source for a card component, the icons will be interchangeable.

    Let's look at an example design component 

    On the surface, this component looks relatively straight forward. But think about all the elements that make up this component.

    • To start with, there are five layer styles—a gradient, a background, a border, and a shadow—so many conversations and design decisions had gone into choosing these styles.
    • And then there’s the typography—what font should it be, what size should it be, and spacing to consider.
    • Also, what’s the distance between the text and the border or the spacing and placement of all the elements relative to each other. 

    This is where you’re going to get the value of a design system—these style choices, these font styles, these completed components—they’ll all be reusable, easily changed, and updated.

    You’ll need to have a symbol source in Sketch for every component you want to have available in your design system, including one for each state of a component.
    Was this article helpful?
    What's Next