Why Build a Design System?
Design Systems are quite a controversial topic for product designers and front-end developers. Every Product designer or developer should be aware or must have at least heard of it. If you currently don’t have one or are considering building one for your team, you might want to read this article.
Like I’ve always said, even if you aren’t a big team with a designated design team, if you’ve got a digital product, you have created a design system — indirectly or unknowingly maybe. In this article, I’d be explaining the PROs and CONs of building a Design System and Why you should build one.
I was privileged to pitch this at the just concluded DevFest GDG Gwagwalada to developers all around FCT Abuja. I made it a thing to write more design-related articles from my experience as a Product Designer.
Let’s jump in.
What’s a Design System
A Design system simply put, is a living and breathing product library of experiences design, and development resources. A collection of well-thought-out efficient resources for crafting interfaces. It consists of premade building blocks (like color schemes, grid definition, Icons, image assets, etc.), UI patterns (like templates, components, elements, etc.), and rules (Do’s and Dont’s, Guides, design principles, etc.)
PROs & CONs of Building a Design System
PROs
You’d want to build a Design System;
- To achieve consistency
The Design System is worth considering if you want a consistent look and feel to your product(s). - To promote pattern
The understanding of life begins with the understanding of patterns. You want to have a well-defined pattern. - Reusable elements
Why reinvent the wheel, when elements can be easily reused in your digital product? - Faster release
Having reusable elements save time in the feature release. - Scalability and update
CONs
- Takes time (and money)
Creating a Design system required a considerable amount of planning and execution time. Also, time is money. - Requires Maintenance
The Design System is to be treated as an actual product (more like a Baby)
Should you build a Design System?
YES, if you’re
- Designing large or multi-platform products
- Designing products that would have future updates
- Design products you hope would scale
- Working with other Designers or Developers
No, If you’re working
- On a small project
- With a tight budget
- With a short project timeline
When to Build a Design System?
I’d strongly advise that you consider building your design system while starting on a project as this gives a basis to build and update more in the future. However, if the product has been launched you can still build a Design System with the hope to update and upgrade the current launch.
We’ve launched, can we build a Design System?
If you’ve launched a Product without a Design System and you hope to create one, the following (not too easy) steps might be helpful.
- Understand the need for a Design System
- Gather all visual elements, components, and their respective variations
- Breakdown, classify and organize all that has been gathered
- Research on other Design Systems and understand what needs to be updated or upgraded
- (re)Define Tokens and update Atoms
- (re)Build components
- Test and document (with the team)
- Review, push updates, and repeat
I’m the only designer on the team, how do I go about building a Design System?
Lol. I get you. I completely do.
Okay, you'd want to consider the following
- Access the current product to understand if you truly need a Design System.
- Note required improvements and fixes (as per the product)
- Pitch the idea of the need for a Design System to a Lead. You want to be very objective, with facts and overall benefit for the team — all the PROs. You might also want to point out the CONs.
- Emphasize teamwork (while pitching) and await a response.
Team lead response could be;
Yes: You’d want to follow the steps I outlined earlier. Start somewhere, start small, and ship often.
or No: You’d want to follow the steps I outlined earlier. Start somewhere, start small, and ship often.
How long does it take to build a Design System?
It’s never done, but should always be ready 😂.
The design system is a process and therefore is simultaneously always ready and never done.
Marcin Treder — CEO UX Pin
We are thinking about dark mode and …
Thanks for reading this far, don’t forget to share and clap this article if you find it useful.
💗
Other useful articles —
DesignOps: Atomic Design
Building Design Systems
Reference:
Design Systems Are a Language. Product Is a Conversation Marcin Treder — CEO UX Pin
Design System for Developers Storybook
Storybook x Figma Figma
Atomic design Brad Frost, Brad Frost Web