Polaris UI Kit

The 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.sketch
  • Polaris Icons x.x.x.sketch
  • Polaris Palette x.x.x.sketchpalette

Requirements

In order to use Sketch for Mac, you’ll need:


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

Screenshot of Sketch Palette plugin

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.

Screenshot of Loading Sketch Palette plugin

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.

Screenshots of Polaris Telescope

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”.

Screenshots of Polaris Telescope

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.

Screenshots of Polaris Telescope


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.

  • Paddy A lightweight and powerful plugin that updates padding automatically.

  • Polaris Telescope Made with Designers and Developers in mind. Bridge the gap with quick access to Polaris components, colors, and icons inside of Sketch.