OVERVIEW

Plugin’ Polaris into Figma ✨

As a part of the Polaris team, there are various channels the team builds tools for and they are all conveyed to various crafters (designers, developers, etc.), but we wanted to change our approach. Whether crafters used the API, website, VS code, or Figma - we wanted them all to be exposed to the same concept of tools. What this would do is spark interest in different segments of crafters rather than just one aspect of the team. As a result, we decided to build across the board and initially create tools focused around tokens, and introduce these across all the channels simultaneously.

As a part of this shift, our team also created a Polaris for VS Code extension that auto completes suggestions for the Polaris Design Tokens in CSS and Sass files. While that extension is primarily focused towards developers, our Figma plugin took care of designers with the goal to ease the handoff between designers and developers. They both pull in the same direction, thus, give crafters the same set of tools simultaneously. One functionality at a time, across all tools.

These tools in conjunction allow the Polaris team to make big design changes across the design system by just adjusting the token value and ensure consistency and scalability for the design system. Thus, accelerating product development and letting designers focus on unique design challenges.

Our Figma plugin will be an essential tool for Shopify UX to build great designs and stay on mainline Polaris. It brings designers context-aware documentation, starter templates, design file QA, developer hand-off help and more — right inside Figma. It optimizes designers time, helps craft coherent experiences and makes collaboration with engineers a breeze.

Check out this stellar presentation at Figma Config 2022 by our very own highly talented Staff Product Designer, José Torre. He touches on why we should approach design systems like gardening, instead of architecture in a very insightful talk on misconceptions about a design system's role in the world of product design.