Sketch Best Practices

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

Transcript

1. Sketch Best Practices
7. Shapes
8. Fills
9. States
10. Labels
25. Set the Resizing property to control the behavior of child objects (including nested symbols) in groups and symbols. Tip #1
26. 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.
38. Control which symbols appear in the Overrides menu by making them all the same, unique width. Tip #2
48. Name your symbols with “/” characters to control how they appear in the Symbols menus (Insert and Override). Tip #3
65. 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
69. Use text layer options to apply text- transforms like Uppercase. Tip #5
75. Use layer width and positioning to guarantee minimum horizontal padding. Tip #6
96. Use vector shapes as masks with color fill symbols to create filled shapes like icons that can be any color. Tip #7
99. Create multiple Symbol pages to make component Symbols easier to scan. Tip #8
100. 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.
101. 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.
102. • 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
103. Thank you! • Twitter: @briandrum • GitHub: github.com/briandrum • Slack@IBM: @bdrum • GitHub@IBM: github.ibm.com/bdrum