Polaris UI Kit
The Sketch UI kit provides a set of reusable components to help you craft great products for Shopify.
Access Polaris components, colors, and icons from Sketch. Pair the UI Kit with Polaris Telescope to help you put it all together.
Getting started
Download the UI kit to start designing with Shopify Polaris.
The UI Kit package includes:
Web UIKit x.x.x.sketchPolaris Icons x.x.x.sketchPolaris Palette x.x.x.sketchpalette
Requirements
In order to use Sketch for Mac, you’ll need:
- Sketch
- San Francisco for macOS
- Download and install the fonts on your system
- Open the UI Kit and use the Getting started page to test the font
Polaris palette
Access the Polaris color palette in Sketch with Andrew Fiorill’s Sketch Palettes plugin. The plugin allows you to import Polaris Palette x.x.x.sketchpalette into your Sketch document.
Using Sketch Palettes
Running the “Load Palette...” command in the plugin menu will allow you to choose the .sketchpalette file you want to import. You’ll be prompted to load the palette into either the Global presets or the Document presets section of the color picker.
Once you’ve imported the colors they’ll be accessible from the Color picker in the inspector panel.
To update palettes in Sketch, select “Clear Palette...” from the Plugins → Sketch Palettes dropdown and then upload the updated .sketchpalette file.
Using Sketch
The Polaris UI Kit makes use of many of Sketch’s features. This section highlights a few of the features that the UI Kit relies on.
To learn more about using Sketch, we recommend visiting the Sketch website and its Support section.
Using libraries
Use the Polaris UI Kit in all of your designs by linking it as a library in Sketch. Manage and add linked Libraries from the “Libraries” section in Sketch preferences.
When setting up a new document, link both the Web UIKit x.x.x.sketch and Polaris Icons x.x.x.sketch files as libraries.
Libraries allow users to share symbols across documents and keep them in sync. Learn more about Libraries on the Sketch website.
Syncing library updates
When changes are made to symbols in a Library, Sketch will automatically sync those changes across all documents containing that Polaris Symbol. Sync Polaris symbols to your design files by selecting “Library updates Available” in the top right corner of the document.
Adding symbols to artboards
Symbols from the Polaris UI Kit can be added to your design file by selecting “Insert” in the Sketch toolbar. Each file that is linked to Sketch will show up as a separate submenu in “Insert”.
States and styles
The UI Kit uses Sketch overrides to represent the various states and styles of a component. To swap between states or variants of a symbol added to your design, use the Sketch overrides panel to select symbol options.
Sketch plugins
Plugins are an easy way to enhance and speed up your workflow inside of Sketch. This section highlights a few plugins we recommend.
Sketch Runner A great way to search and insert symbols.
Stark Check color contrast and readability inside of Sketch. The plugin also simulates the various forms of color-blindness.
Polaris Telescope Made with Designers and Developers in mind. Bridge the gap with quick access to Polaris components, colors, and icons inside of Sketch.