Shopify Design System

Shopify is one of the largest and most profitable websites in the world and you can access their design system named Polaris, right here.

Shopify's design sytem is a simple and straightforward set of components but is also very robust. It includes everything you would need to create your own Shopify style websites, systems, programs or software. Included in the Shopify design system are avatars, badges, buttons, checkboxes, links, navigation, pagination, popovers, tables, search, a progress bar, the list goes on and on. Though it should be noted that there are even more Shopify design components that aren't featured here, but can be accessed on Shopify's official Figma account. It's great to see how much love Shopify has for Figma and how open they are to outsiders seeing how they approach UX and UI design.

If you're wondering how an incredibly large company handles their design components then this Shopify design system is a perfect reference point, it shows how you should order and list your elements in a clear and concise way.

This is acutally quite an educational design system for example if you want to list every state of a button for your own design system (hovered, focused, depressed, disabled etc) you can copy the buttons page of this Figma file, use it as a base for your own design and just restyle as required. This can also be applied to any components your design system includes, helping you to make your own design system quickly and easily.