What You Can Learn From the Shopify Polaris Design System in Figma - Awesome Token Naming Convention

Billy reviews the Shopify design system in Figma. See what you can learn from the Shopify Polaris examples and Shopify design guidelines.

Design Systems Course:
https://bit.ly/shipwright-design-syst...

Are you thinking about making a Shopify app? They’ve got a great design system that you can use.

This week I explored the Shopify Polaris design system. We take a look at their documentation site and their component library in Figma.

Shopify Polaris Website
https://polaris.shopify.com/

Shopify Design System Figma
https://www.figma.com/@shopify

✅ Overall, this is a great design system, the documentation is clear on how to use the system and design like Shopify does.

💢 I was disappointed in the disconnect between the Figma library and the actual coded components, but that’s just what’s publicity available.

🙌 Their token naming convention is fantastic! I could easily see implementing this into the new Figma Variables systems.

Once again a top-notch design system. I wish it had more flexibility in the cell components, but this can easily be extended with a solid team. The foundation here is fantastic.

While exploring this, I have been inspired by many ideas to bring back to our Shipwright UI kit. If you want to check out this kit, you can download it from the Figma community.

Any design systems you think I should check out next?

00:00 - Intro
00:30 - What We're Looking For
00:49 - Shopify Polaris Documentation
06:08 - Shopify Polaris Figma File
11:05 - Key Takeaways
12:03 - Design Systems Figma Course

#designsystems #design #ui