A headless Design System
The challenge we faced when we started this project of creating a headless design system was to create a design system that would serve as the foundation for any digital product or design system project. To achieve this, we interviewed designers to learn about their experiences using and designing design systems. Some of the most common points we heard were:
Design systems are often difficult to use and maintain.
They can be rigid and difficult to adapt to new product requirements.
Design components can be hard to document and use effectively.
There are no clear contribution guidelines.
With these opportunity areas in mind, we explored the possibility of creating a headless design system, designed and implemented to be the starting point for different design system projects.
To create our design system, we benchmarked different design systems out there to bring the best practices:
Fluent 2
Materials 2 and 3
Ant
Carbon Design
Atlassian
Goldmann Sachs
Polaris
And other design libraries…
Then we began using the atomic design systems approach, which helped us to create a simpler design library. We started defining our design tokens, such as typography, color, and spacing, which were the subatomic components of our design system and then we moved to our atom components and so on with, molecules, organisms, templates..
Tokens were a key component of this project since they allowed programmers and designers to communicate effectively by speaking the same language, and they also allowed us to switch between color themes with ease.
Figma recently released "Figma variables," which make it easier to create design systems. We began using these new updates to create and manage tokens more easily than before.
We hope this flexible approach to design systems will serve as a foundation for any design system or product delivery project. As designers, we don't want to get bogged down in the details. We want to design systems that enable collaboration between teams and focus on user-centered design. We hope that every designer, regardless of their level of experience can use this powerful tool to elevate their creativity.
