Polaris UI Kit

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:

• 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

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.

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.

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.