You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Polaris is the design system for the Shopify admin. There are many layers to being successful with Polaris, but if you want to start experimenting, the first step is reading and downloading the resources.
4
+
description: Polaris is the design system for the Shopify admin. If you’re just starting out with Polaris, here’s a list of recommended resources and guidance to get you started:
5
5
keywords:
6
6
- about
7
7
- polaris
@@ -17,12 +17,29 @@ keywords:
17
17
order: 1
18
18
icon: HintMajor
19
19
---
20
+
Polaris is the design system for the Shopify admin. If you’re just starting out with Polaris, here’s a list of recommended resources and guidance to get you started:
20
21
21
-
### Downloads and links
22
+
### Designer resources:
23
+
Shopify provides [Figma community resources](https://www.figma.com/@Shopify) for Polaris components, styles, and icons. If you are new to Figma, check out our [onboarding guide](https://www.figma.com/community/file/994263185745279952), or open Figma and start designing with the resources below:
For full descriptions of our resources, see the [develop](/getting-started/develop), [design](/getting-started/design), and [shared resources](/getting-started/shared-resources) sections.
| <ul><li>[ Design ](/design)</li><ul><li>[Component Figma library](https://www.figma.com/community/file/1111360433678236702)</li><ul><li>[Token Figma library](https://www.figma.com/community/file/1111359207966840858)</li><ul><li>[Icon Figma library](https://www.figma.com/file/mMHFt3kEDNjLMZWowi6gnt/Polaris-Icons?node-id=753%3A2)| </li><ul><li>[Component GitHub package repo](https://github.com/Shopify/polaris/tree/main/polaris-react)</li><ul><li>[Token GitHub package repo](https://github.com/Shopify/polaris/tree/main/polaris-tokens)</li><ul><li>[Polaris for VS Code extension](https://marketplace.visualstudio.com/items?itemName=Shopify.polaris-for-vscode)</li><ul><li>[Performing a release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md) |</li><ul><li>[React component library](https://polaris.shopify.com/components)</li><ul><li>[Token library](https://polaris.shopify.com/tokens/colors)</li><ul><li>[Icon library](https://polaris.shopify.com/icons)</li><ul><li>[Patterns](/patterns)</li><ul><li>[Product content](/content/product-content)
29
+
### Developer resources:
30
+
The [shopify/polaris repo](https://github.com/Shopify/polaris) is an open-source monorepo made up of NPM packages, VSCode extensions, Figma plugins and websites. To get started:
31
+
-[Install and use the React components](https://github.com/Shopify/polaris/tree/main/polaris-react#using-the-react-components)
[Build a Shopify app](https://shopify.dev/apps/getting-started/create)
37
+
In this tutorial, you'll create an app that merchants can access in the Shopify admin. You'll use an app initialization command that generates starter code for building your app, and sets up your development environment so that you can work with your app using [Shopify CLI](https://shopify.dev/apps/tools/cli).
38
+
39
+
Your app will use Polaris and [App Bridge](https://shopify.dev/apps/tools/app-bridge) while following the [App Design Guidelines](https://shopify.dev/apps/design-guidelines).
40
+
41
+
### Next:
42
+
Polaris provides foundational design guidance for creating good merchant experiences. Here are some recommended resources to:
0 commit comments