resources menu
  1. resources
  2. sketch ui kit

Sketch UI Kit (deprecated)

The Sketch UI kit provides a set of reusable components to help you craft great products for Shopify.

Note The Sketch UI Kit for Polaris is deprecated and no longer supported. The new UI Kit has been migrated to Figma and is available in our Figma Community profile.

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


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 Sketch 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 Sketch 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 the Sketch UI Kit

Adding symbols to artboards

Symbols from the Sketch 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 the Sketch UI Kit

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 the Sketch UI Kit

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.