This file provides visual representations of Polaris React components in Figma.
The Polaris Web UI kit includes shared color, text, and effect styles as well as components. Use the complete UI kit in your teams or files by duplicating each of the files below from our profile page and publishing them in Figma:
- Polaris for Web: Components
- Polaris for Web: Colors
- Polaris for Web: Icons
- Polaris for Web: Typography
- Polaris for Web: Shadows
Detaching is okay! Since Figma should be a playground for design exploration, rather than a prescriptive or constraining guide, we’ve enabled detaching so you can use it as needed.
Variants have also been created for most components. The variants sidebar now includes a toggle to enable components for small screens (instead of using a separate component). Add a component as you normally would, and then toggle that component for the small screen variation.. Variants also add component states, and other variations. Read more about variants.
Auto layout has been applied to some components like action lists and banners. More complex components, like cards, do not have auto layout applied. We’ve done this to keep more complex components more adaptable, versatile, and free to play with for audiences new to or experienced with Figma.
Learn more about Polaris for Admin at https://polaris.shopify.com/experiences/crafting-admin.
View the style guide at https://polaris.shopify.com/
