Home
The macOS Sierra UI Kit includes a bunch of standard system elements.
I've tried to redraw the elements as exact as possible using vector only shapes. With the latest Sketch features like Symbol Resizing implemented you can create fast mockups for macOS apps.
If you're wondering, all elements are drawn at 1x scale but with 2x details. So for example some borders are 0.5pt thick. This of course leads to a blurry image on a non retina device, but looks right on retina Macs!
The main reason I've created this UI Kit at a 1x scale is because we are designing more and more on retina Macs. And designing on a retina screen with a 2x scale design forces me always zoom to 50% to see the design at 1:1. Luckily Sketch always displays 100% zoom with a crispy retina version. So I can always see all the details.
But not everyone has a retina screen yet!
Sure, but scaling up is much easier than scaling down. So if you design with non retina screens, you can just easily scale everything up.
Add the UI Kit to your Sketch Templates. Just open the kit and press "File > Safe as Template…". Now you can create new Sketch files with "File > New from Template".
The kit itself is divided into two pages. One page with a 13" screen artboard including a window with all the elements (see preview) and the Sketch Symbol page.
If you start a new project you can throw away the elements you don't need on the first page. They are all saved as symbols!
Craft Library by InVision is part of a plugin for Sketch that allows you to use symbols across multiple documents. So you don't have to copy everything into your old designs. Just import this Craft Library and start adding buttons, sliders and more to every file you want.
This UI Kit includes a separate Kit for the new MacBook Pro Touch Bar. You can read more about it here.