Foundation

Brief

There's a point in the movie The Patriot where one of Benjamin Martin's kids is aiming a rifle. He starts repeating to himself a lesson from his dad, "Aim small, miss small..." Somehow my brain has connected this to UI design and I always feel that great looking applications only happen when you get the details right.

So I set out to build a Sketch library full of "details" that could be combined together in an atomic way to make larger, more sophisticated components. The aim being if you nail the small stuff the big will take care of itself.

Process

I built libraries for color and type first, collections of swatch symbols and type styles. From there I added icons using Material Design's icon library. The icons consume the color swatch symbols so you can toggle colors (this was before Sketch let you swap fill styles on the fly).

I then went to work making the elements library. It includes list items, buttons, form fields, combos of photos and text styles, combo shapes as fill and outlines, chips, pills, nav tabs, tab bars, stock OS components for Android and iOS, map markers, pagination... and more. All built with the text styles, color swatches, and icons of the base libraries.

Outcomes

I published the Sketch libraries for free on GitHub, with instructions on how to set it up.

Update: This library is probably out of date with all the new Sketch features that have been released. Also everybody uses Figma anyways (-_-)