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