How to build a design system
- Mayya Geo
- March 20, 2022
- Time to read: 6 min.
Why build a design system?
We use design systems every day. Do you collect things—stamps, records, salt and pepper shakers? Or maybe you are a fan of keeping family photos? Then you know you need to have a system of organization to keep track of everything. With a photo album, you might organize pictures by year, season, or event. And after you’ve organized the album, you want to share what you did with the rest of the family so that they also know how to find the photos.
Organization and clarity
These are key elements in building design systems. Product teams building growing digital products will quite often find themselves struggling due to lack of consistency because of a badly organized design system. Often they will blame a poor collection of product requirements, lack of specifications and alignment, or a poorly documented development process.
This results in an unpleasant work process; and each time a new team member comes onboard, they need quite a while to find their way within the system. Moreover, the product lacks a shared vision, design patterns, and consistency.
Build for reuse and scale
In these cases, a design system can really help! When your team has a comprehensive design system, it will help to quickly develop and scale the product. This shared library, with the documentation of all components, visual factors, tokens, and brand language, will help keep everyone on the same page. Sounds perfect, right?
A design system issue
The problem with design systems is that they are quite difficult to maintain. And as someone once said, if everyone is responsible, no one is responsible. Many teams are struggling to create a plan, to find a design system master—an owner of this process—and, after that, to share the knowledge with everyone.
How to build a design system
Let’s define the different ways to build a design system, what should be part of the system, and how to maintain it afterward.
Ways to build a design system
Hey, luckily there are plenty of ways to kick-start or reinvent your design system process. We will now review the different possibilities based on your budget, status, and team capacity.
1. Use an open-source design system
This option is perfect for anyone who wants to kick-start their product but is unable to afford the allocation capacity to build a system. An open-source design system will allow you to begin the process; and later, when the product reaches maturity, it could be even customized.
This option is quite affordable for smaller teams that cannot afford to spend too much time on creating a custom design system themselves.
There are different open-source design systems, either free or paid solutions, that will offer a more comprehensive system and include lifetime support and updates.
2. Build your custom design system
The more mature any product is, the more of a customized design system it needs. That’s due to the product’s specific requirements. Custom design systems are great because they allow you to build the specific interface and elements in your unique way. Also, the chance that your product looks exactly like another one will be less likely.
However, when building a custom design system, you should establish a process to maintain, document, and share it with the rest of the team.
How to organize your design system
Design a system checklist
The two most important factors in any design system are the design repository and the team members that maintain the system.
A design repository often includes product vision, brand guidelines, design tokens—like colors and typography—and the component library, variants library, pattern library, etc.
Also, where could you maintain it? There are many software possibilities, like Sketch, Figma, Adobe XD, or even your own website like Carbon Design system by IBM.
Define your design system elements
With either a self-hosted or open-source design system, there should be some general rules guiding the elements used in the system.
- Style guide
This is a visual guideline based on your brand identity, product vision, and mission. It usually includes visual references and design principles.
- Design tokens
Design tokens are all basic parts of the design system. They are the foundation of your process—colors, typography, grid, layout, spacing, etc.
- Component library
Your team will organize all UI components and reuse the already created design tokens to build them. A component library is also called a design library, and it is the organization of all UI components that are used or needed in a system.
- Variants library
Variants are all possible states and versions of each component.
- Pattern library
A pattern library extends to layout and template design, and explains how the product uses components together in different scenarios.
- Plugins
Either paid or self-made, your team might use some plugins to simplify and optimize the process.
Structure of your design system
In order to keep the common language, your system will need a clear structure and documentation. Below is an example of what this structure might look like.
- Introduction
Begin with the basics. What’s your product strategy, vision, and mission. What is the purpose of the design system?
- Files
How are the files organized? Here is a great system organization that you can learn from and apply: Atomic Design by Brad Frost.
- Naming
Naming helps to find what you are looking for. Try to include context to the naming conversion. For example, NameOfComponent/State/Type
- Usage guidelines
Add additional descriptions to each component, and provide details of cases of usage as well as dos and don’ts.
- Accessibility
It’s important that you consider accessibility from the very early stages of building your system. You can always check out some additional plugins and use them to learn more about the topic.
- Component description and the definition of “done”
Set a basic principle inside of the team so everyone knows how the system is organized, who is responsible for what, and when one component is “done” and ready to be published.
Design system team and adoption
Design systems are highly dependent on the clarity and organization of the team behind them. As maintaining the system is often a difficult task, teams decide that everyone in the team is responsible for building and organizing it.
While this is true, the practice shows that there should always be one person who owns it and nourishes it. This person is the design system champion—the one who is passionate about it and is helping with the alignment of changes, with updates, and with organizing any new parts. Make sure you find someone on your team who can continue the growth and organization of the system and align everyone in the organization.
Conclusion
There are plenty of ways to begin the process of creating a design system or to improve your existing design system. By finding your own organizational personal touch, you will even enjoy the process in the long run. You’ll reduce the stress factors of the product team and set up your product for consistency and success.
Thank you for reading! 💜
We are GEOBO, a design studio specialising in branding for fashion and creative tech companies.
