Polar Analytics

September 2024 - Now|Design System Cleaning, Product Design

The product and dev teams at Polar Analytics had a dream:
Cleaning their design system to make it more flexible, performant, easy to use, and easy to maintain.

To do this, we worked hand in hand with the lead design system and lead developer at Polar.

We came up with a Figma design system file containing the following:

  1. Scoped variables and styles w/ with a purpose and use cases.
  2. Scoped variables and styles w/ helpful descriptions.
  3. Components w/ descriptions, READMEs, and links to storybook.
  4. Templates that use these components and are ready to be copy-pasted.
  5. Examples that show on a larger scale how the components are combined in practice.
  6. Guidelines on how to use the main features and concepts of the design system.

Each component:

  • is documented
  • uses local variables and styles from the DS
  • has meaningful and well-defined properties
  • has a set of maintenance test frames to visualize and maintain all the possible combinations

Polar had 862 components in their previous design system.
Now, they have 116 components.
Everything works better than ever with an 86.543% percent decrease in component quantity.

Here are screenshots of the resulting DS file: