Putting the system back in our design system
Evolving Polaris tokens to build products at scale and speed
At Shopify we’re designing at scale. There’s currently 2.5 million lines of code in Typescript just for UX within Shopify’s software. That’s not without its challenges.
We’ve been finding our design system, Polaris, lacks the coverage and foundations needed to help our product teams make significant and sweeping changes quickly across Shopify’s admin: our core product. While Polaris components are used in 70% of the admin, our tokens are only used in 44% of admin components. This lack of token coverage makes it infinitely challenging and costly to ship large design changes at scale.
Since its launch in 2017, Polaris has been constantly evolving as our products scale. Working at such a scale sometimes requires foundations to be rebuilt, which is exactly what our team is aiming to do this year.
With the Polaris v9.0.0 release last month, our team has begun laying the groundwork to increase token adoption in the admin and rework our existing range of token values. Through this work, we hope to give product teams the flexibility and leverage they need to quickly build and innovate at scale.
How did we get here?
Polaris tokens impact only 44% of the admin for many reasons. Before our latest release, our tokens were difficult to reference. Not only did the values live across multiple projects, but they were also written in multiple languages and formats (CSS custom properties, Sass functions, and Sass mixins). Only some of the values were documented and that documentation was scattered over several locations.
The token values themselves were also limited in range for what many of our product teams needed to craft new and significant experiences for their users. And the process for extending or modifying token values was convoluted and required coordinating multiple releases across different repos.
Because of this friction, many of our product teams resorted to hard coding or forking components to get the values they needed.
Why are we reworking our tokens?
To reduce the cost of design changes at scale
Our goal for Shopify’s admin is relentless continuous improvement. Polaris gives us great leverage to roll out global improvements at scale, like making our breakpoints more intentional. Having increased token coverage will allow us to make changes faster, with fewer resources.
To empower teams to create memorable and meaningful experiences
Improving the range and extensibility of our tokens will empower product teams to design for the diversity and scale of current and future merchants. Product teams know their users best and this will open up more opportunities for them to create moments of delight for our merchants.
To provide consistency without limiting creativity
Improving token coverage and extensibility will help our product teams be consistent with one another across the organization while still enabling unique and innovative designs.
To improve collaboration across disciplines
Giving designers and developers access to the same foundational design values across tooling (in our case, Figma and VSCode), and clear guidance on how to use those token values, will make cross-discipline collaboration easier and our overall product development process smoother and faster.
What have we done so far?
Polaris v9.0.0 lays the groundwork for our team to start increasing token adoption across the admin as well as expand and rethink our existing range of token values. How?
Consolidated tokens
We’ve refactored and consolidated any styling related Sass functions, mixins, and variables into design tokens so that they can easily be referenced in one place and used for any platform we might want in the future. Currently, we’re translating the design tokens into CSS custom properties for the web. These token values are not final. In future releases we’re planning on rethinking our design vision and naming conventions for these tokens so they are specifically crafted to benefit and evolve the admin experience. Once we finalize these values we plan to create equivalent Figma styles for each so that teams will have one implementation of tokens to use.
Centralized token documentation
We’ve also created a new set of token documentation pages on polaris.shopify.com to make it easier to quickly reference token values without code and understand why they were created. Listing all tokens and their use cases will help us understand which values we should consolidate in future releases and help our product teams understand if they should use, extend, or customize values. In future releases, we’re interested in exploring how we could allow token value customization while building with the system.
What’s next?
What’s launching with v9.0.0 is only just the beginning of the work we want to do to Polaris this year.
We’ll be iterating on all the token values we’ve created in this first pass with v9.0.0. Now that we have a better sense of what tokens exist, we’ll be working on defining our new design vision for color, depth, layout, motion, shape, spacing, and typography.
We’re also working on efforts to increase our collaboration with product teams across Shopify, improve our tooling, overhaul our components, generate more system analytics, and redefine our underlying design language.
