Design Systems

INTRODUCTION

I find standardization deeply fascinating. Just as the Bauhaus movement revolutionized product and industrial design through standardization, design systems bring the same structure to a brand’s digital presence. While some may worry that this approach stifles creativity, I see it differently. By standardizing frequently used components, you provide designers with a sense of reliability and consistency, while freeing up mental space to focus on truly innovative and creative conceptual work.

Instagrid Design System

Instagrid lacked a proper design system—its only framework was a set of vague design guidelines that fell short of meeting the team’s needs. With the brand redesign underway, we saw an opportunity to establish a comprehensive design system for Instagrid. The goal was to create a system that not only enabled designers to easily adjust and utilize components in Figma but also allowed developers to seamlessly extract tokens and integrate them into code. To achieve this, we built a robust development pipeline centered around tools like Token Studio, Style Dictionary, GitHub, and Storybook, ensuring a streamlined and efficient workflow for both designers and developers.

Documenting in Frontify

A design system is only as strong as its documentation"—a principle I firmly believe in. A solid design system relies on a well-structured foundation, and comprehensive documentation is at the heart of that foundation. To ensure clarity and accessibility, we chose to document every detail of our design system within our brand hub, Frontify. This platform allowed us to organize and present all the components, tokens, and guidelines in a way that was intuitive and easily accessible for both designers and developers, ensuring consistency and efficiency across the board.

Storybook

Before our website relaunch, the components in use were nearly impossible to inspect or manage effectively, creating significant challenges for both developers and designers. To address this, we introduced Storybook into our design system—a powerful open-source tool specifically designed for building, testing, and documenting UI components in isolation. Storybook provides a sandbox environment where developers can not only view each component in various states but also interact with and test its behavior without needing to integrate it into a full application. This approach improved collaboration by giving developers and designers a shared space to explore components, ensuring consistency, and making it easier to identify and resolve issues early in the development process. By incorporating Storybook, we streamlined workflows and enhanced the overall efficiency and transparency of our design and development pipeline..