Background
I joined General Magic back in 2021. At that time, we didn’t have a complete design system; we just had some UI elements, and since the project was moving so fast and no one was keeping an eye on those UI elements, there needed to be more consistency!
First, I started to clean up and fix the UI elements so we could continue the development. Still, on the side, we began to plan for a design system. from the very beginning, we were thinking about making our design system public so anyone, especially in the web-3 world, could use the design system.
Because I had previous experience creating a design system, I was appointed to lead the design system.
Since we had a working project, we had to consider that while defining everything in our design system.
But in some areas, we had to make some changes to ensure we would have a consistent design system and something that other people outside of our company could use.
Design system structure
A critical issue with most design systems is the way they are structured, and to ensure they are maintainable and flexible enough, we had to think twice about our design system structure.
We separate our design system into 3 main files, Foundation, Master, and Core.
Foundation file
The foundation file includes all ingredients, such as colors, elevation, Typography, spacing, icons, and Layout grids.
Design tokens
These design tokens will help maintain and keep the design system more consistent as we scale and update it.
Colors
After reviewing all colors that we used in the application and checking with the brand book, we finally defined the design system colors.
We group colors into two categories, Primary colors and semantic colors. The primary colors are the ones that we needed for the brand to use in our application.
Elevations
Mostly used to elevate elements more than other.
Master file
Every component in all design systems will change in its lifetime, and if too many variants exist, it will be harder to update that component.
To solve this issue, we use the master component.
A master component contains all different pieces, and then we build variants using the master components.
So each time we need to fix an issue with all variants or when we need to add a new piece to those components, we just need to update one component and then update the core file (the file that contains all variants); it will be updated everywhere at once.
Core file
Each component will have different styles and statuses. We create all variations on top of the master component that we have in our master file.
The core file is open to the public; anyone can duplicate it and start using it on Figma.
Maintaining the design system
Based on my prior experience, the key to our design system’s success is an excellent process to work with.
So we defined some rules for tackling the updates, changes, new components, etc.
As we use GitHub to host all of the codes behind this design system, we also use the GitHub project to manage all issues and ensure we won’t break things apart for no reason.
We also have a bi-weekly meeting to discuss anything we put on our agenda to ensure our design system is always polished and working..
