My experience with design system
6 minutes
-
February 21, 2024
Design system might seem hard to grasp to people with no experience in the UX field. And it’s even hard to fresher or junior UX/UI designers. I’m lucky enough that through my 2 years working at this role, I had the chance to work on various design systems from different levels and can form an opinion about it.
A confusing start is not a good start. Let me simplified design system for you. A design system is a set of standards for design and code along with components that unify both practices. Like a lego set with instructions. Now let’s go into details.
Levels of Design system
To me, personally, I would divide design systems on 3 levels, based on how much time and effort each requires.
- UI Kit.
- Regular design system.
- Design token system.
A lot of designers would not list UI Kit as design system, but to me, UI Kit is a shorten design system and can still be categorized as one.
I will go through each one with their pros and cons.
UI Kit
A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons. UI kits can be fairly simple with a few buttons and design components, or extremely robust with toggles that change fonts, colors, and shapes on the fly.
This is what most web designers and web projects will use, since it’s not taking too much time and effort to set up one which is totally suitable to these kinds of quick projects.
1. Pros: Save huge time
UI Kit is a huge time-saver. With a proper built UI Kit, designer will not have to re-design or update every copies of the same component every single time. When you successfully sync with UI Kit, everything just flow while it keeps the branding and design consistent.
Most UI Kit is built based on a business’s branding with their typography, color and shapes as the base. So an established branding would tremendously benefit the UI Kit setup phase.
2. Pros: Consistency throughout
Using UI Kit will result in a look of consistency without a lot of effort on your part. Making sure every button, every input... the same so developer not having to ask you every time a pixel is off. Which happens a lot.
This also ensure your business’s branding is reflected on every parts of the design, nothing out of the already established style.
3. Cons: Restricting the customization
A lot of designers actually reject a UI Kit or design system because of this reason alone. By having consistency in your design, there is always the risk of it being boring. When everything is the same, nothing stands out which is a bad thing to projects like web design or product with heavy visual requirements.
That’s also the reason, I avoid building a too detailed UI Kit for my website projects as I want to keep everything flexible and more freedom for creative purposes.
4. Pros: Keeping it scalable and expandable
When I first come into UI/UX and received my first work which is building new components for an on-going project, it was a nightmare. Had to run around the file looking for the right component, living in constant fear of something out of branding.
With a UI Kit, your design would be much more friendlier for other designers who continue on your work. Not every business can afford many designers at the start but when they scale, the design team and the design itself need to scale and UI Kit would be the core to connect and expand on.
Levels of Design system
1. Pros: Save huge time
To be fair, design system is like UI Kit, but on steroid. If UI Kit helps reducing time for short projects or website design, Design system helps bringing time down for web app, long product projects that need more planning and execution.
Although, to set up a proper design system would take some time at the start. It is the later phases that Design system can shine the brightest. Which has been proven.
2. Cons: The various design system languages
Not everyone talk the same. And it is also true on design. I can set the name of a card like this “testimonial card”, another designer would think of it different “card-testimonial”. Hell, even on a weird day, I go out of my mind sometime and set it something totally different “review box”.
The language of a Design system varies and depends a lot on the designer creating it at the start, who defined it. But not only designer have the say, dev team also is a part of the force that affect the language of the design system.
This is one of the main reasons, a design system takes so much time and it’s hard to get it perfect.
3. Pros: Scalable and expandable
Same as UI Kit, a Design system helps connect design and development. Making your product team a close-knit system where everything is streamlined and easy to work on. Making sure that every new designer or developer who are new to the project can quickly learn, adapt and follow the same product structure.
Levels of Design system
This is the highest level of a Design system in which design and development is in absolute harmony. A design system with tokens is a way of creating and maintaining a consistent, scalable, and adaptable visual language for user interfaces. Tokens are named entities that store visual design attributes, such as colors, fonts, spacing, etc. Tokens can be used in place of hard-coded values to ensure that all components in the system follow the same design principles and can be easily updated or changed over time.
To be honest, I only have limited experience on this level. But one thing I can be sure of is a design system of this level would require great efforts from not only designers , but developers and QA team/tester team. Which make it only suitable to big big projects and products that are on later stable phases.
Some Design systems using tokens you might want to check out:
Conclusion
Whatever the level, Design system/UI Kit has huge benefits for design and I would totally recommend any designers and clients to take a shot at. But as stated, it also have downsides that we should always take into consideration and choose the level or modify a design system to work for us best.