Designing a design system to design, design systems
I know the title sounds like a tongue twister, however this is the exact journey we embarked upon when we worked on a flexible, adaptable design system for our design studio. As we religiously followed the atomic design system, we had to redo customized components and a new design system every time we started a new project. As a software consultation business, this was a major problem and a major time commitment.
So, I mean fight fire with fire right? A design system to design, design systems was the answer.
Research and solution design
We started with research and it was eye opening. People in the design team as well as the dev team had different opinions about working with design systems. However, they agreed on one thing. Flexibility. The main reason they didn’t like using existing component libraries were due to flexibility issues. They were just not “designer friendly”. Too much was set in stone for the designers to be creative. So we started scratching our heads and rubbing our chins. “Hmm” s were uttered in unison at crazy 8s and brainstorming sessions. Till we decided on the simplest solution ; “Template Components”.
Template components would be designed as component sheets with Figma Component Properties pre-set to customize essential properties as well as very simple micro interactions pre set. These sheets were to be copied to their own projects to be defined as their own source of truth. If the designer wants to customize the basic properties, they can do so through component properties. If the designer wants to customize further, they can edit their source of truth, just like you would, a developed component sheet. However, then we thought about the problem of accessibility. What if the designer using the system is not as familiar with component sheets? Would they need some guidance in customization? What if the designer wants to bypass developing their own system and use the central system due to time constraints? Well, we had to answer those problems as well.
Methods of access
Due to those problems we defined three ways of access.
- Quick Components and Direct Styling
- Setup Components and Layered Styling
- Direct Import
In quick components, the designer could directly copy and paste the quick component sheet to their own project and directly style the component to fit their style. This method is fairly straightforward. They can customize through component properties as well as style them directly. Thus, the name.
Setup components are designed to offer a easier customization experience in the beginning and for the styling to be layered. They are made out of two sheets, the “setup sheet” and the “component sheet”. The designer can copy both the sheets to their own project and go through the offered, step by step customization process to customize everything about the component in the setup sheet. At the end, there is a step to free customize everything as well. After these changes are done, the component sheet will automatically update according to the changes in the setup sheet as the component templates in the component sheet are build using layered instances of the setup sheet components. The designer can use a layered approach to further customize and fine tune the component as well.
The third and final type is extremely straightforward. If you are in a time constraint and want to whip up a quick wireframe or design, simply enable the Design System from the assets panel in Figma and import the quick components directly. Then a simple customization could be done through the component properties.
Templates
Atoms and molecules were fairly straightforward. Import, customize, done. However, when it came to more complex template level components, the level of flexibility and customizability offered by component properties were simply not sufficient. Not every card, or popup will be built the same. They could be drastically different depending on the product requirement. Thus, these required a new method of usage. Usually in the case of design systems, we discourage detaching the instance from the main component. However, with the main intention of the system in mind, we decided to go against the grain. Import, customize, detach, customize.
The designer can use the template component as a baseline to design their customized component on. Some basic settings are set as component properties for the user to customize. After the basic customization, they are encouraged to detach and import Atoms and Molecules into the layout. Then they can customize to their wits end and save the customized component to their own design system.
A System of designers, by designers for designers
As every good design, the system is designed to be a feedback driven, on going product. The system encourages the designers who use it to leave feedback on a Figjam board. You want a new component to be added? leave a sticky. You found a bug or a missing property? leave a sticky. We, the design system team is at your service.
The central design system is designed to grow over time, and to be nourished by all of us. So, we need as much feedback as possible from you!
How good was it exactly?
Before the system was fully launched, there were three types of testing done in order to test the increase in speed, ease of access and flexibility of the system. There was an overwhelmingly positive feedback on the metrics of flexibility and access. In terms of speed, the result was a whopping increase of 120% for building systems from scratch vs building systems using the design system. When it comes to using third party libraries vs the central design system, the increase in speed was over 25% across the design team. Given the fact that this offers, flexibility and customizability above all as well as a system to request components they desire, and the potential to grow into something bigger than ourselves, the product, I dare say, is a success.
