Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketch Best Practices

Brian Drum
January 31, 2017

Sketch Best Practices

A step-by-step look at building a UI component library in Sketch.

Brian Drum

January 31, 2017
Tweet

More Decks by Brian Drum

Other Decks in Design

Transcript

  1. Set the Resizing property to control the behavior of child

    objects (including nested symbols) in groups and symbols. Tip #1
  2. Stretch Pin to corner Resize object Float Default. Resizes all

    layers based on percentages. Remains the same size. Maintain distance to closest corner. Changes size to maintain distances from each edge. Remains the same size. Repositioned based on percentages.
  3. Control which symbols appear in the Overrides menu by making

    them all the same, unique width. Tip #2
  4. Name your symbols with “/” characters to control how they

    appear in the Symbols menus (Insert and Override). Tip #3
  5. Rename the nested symbol instance to control the label in

    the Overrides menu. Use emoji to reinforce the label meaning and use the down-and-to-the-right arrow to “indent” related fields. Tip #4
  6. Use vector shapes as masks with color fill symbols to

    create filled shapes like icons that can be any color. Tip #7
  7. Recap 1. Set the Resizing property to control the behavior

    of child objects (including nested symbols) in groups and symbols. 2. Control which symbols appear in the Overrides menu by making them all the same, unique width. 3. Name your symbols with “/” characters to control how they appear in the Symbols menus (Insert and Override). 4. Rename the nested symbol instance to control the label in the Overrides menu.
 Use emoji to reinforce the label meaning and use the down- and-to-the-right arrow to “indent” related fields.
  8. Recap 5. Use text layer options to apply text-transforms like

    Uppercase. 6. Use layer width and positioning to guarantee minimum horizontal padding. 7. Use vector shapes as masks with color fill symbols to create filled shapes like icons that can be any color. 8. Create multiple Symbol pages to make components easier to scan.
  9. • Sketch: Tint icons using nested symbols • Sketch symbol

    best practices (now that nested overrides are a thing) • This is, without a doubt, the coolest Sketch technique you’ll see all day