Download Sketch File

Polygon Sketch Template System

Sketch | UX Design | Maintaining | Training

At my role at the Deloitte iLab, most designers build their mocks in either Axure, Sketch, or Illustrator. The flexibility of our team being able to use whatever tool they are most proficient in definitely allows each designer to serve their project team as efficiently as possible from the get-go, assuming all 3 tools have the same starting point, but it doesn't allow us to leverage design conventions across teams as our mocks aren't easily transferrable from one tool to another.

Nested Symbols

Sketch has symbol overrides since 41.1. To better reflect atomic design principles, symbols are used wherever possible.

Colors

Every color in our palette is a Layer Style as well as a color symbol. Each color has a unique (sometimes boring) name. The symbols for every color have names like 'mixin/color/-name' or 'mixin/tone/-name-'. Important to note: Every color mixin symbol is the same size. Nested symbols look to other symbols of the same original size for overriding. If you create a new symbol that you want to use as a color mixin (ex. You want a transparent white) you must make it the same size as the other color mixins to see it displayed in the same picker list as the rest of the colors in the Nested symbol overrides.

Text

The base typography are organized into Text Styles. We use Open Sans and our base font size is 16px so 1em = 16px. Text layer styles include information like text alignment and color, so variations for text for alignment and color are created in text symbols of equal size so that text style variations don't require new symbol instances for more complex symbols. Components that have rich text variations and lots of text pieces are better served by using Text Styles rather than Text symbols. (at least until we can use Symbols as masks!) Text Symbols

The structure of the text symbol overrides is: 💅🏽style - This is a symbol of a text element styled in a specific way. Text styles are used on every text element symbol. 🖊content - This is the actual content of the text element. These custom (awesome) labels are renamed instances of the symbols. They are renamed to make it easier to distinguish what Symbols are being targetted by overrides. These text symbols avoid creating new symbols for components where the only variation is text styles.

Icons

Each icon is tinted using a color symbol. The icon shape is set as a mask, and it's overlaid with a color mixin symbol. This avoids having to create a new symbol for color variations. ⎿🎨color - Each color symbol overlaid over an icon (or other mask) is renamed to this to make it easier to identify the color overlaying symbol in the override inspector. All icon symbols are the same size. (Again, this is how Sketch determines what's available for override in Nested Symbols) Resizing Options