In the book Atomic Design by Brad Frost, he says

” Ultimately, a project’s level of effort is much better determined by the functionality and components contained within those pages, rather than on the quantity of pages themselves. ”

Brad Frost

This is where a design system can help. Rather than building standalone pages one at a time, focus on creating reusable components that can be mixed and matched to create different layouts, whether it’s for presenting content on one or many pages. In addition to writing modular code, creating a design system also includes determining the process and workflows, writing documentation, creating style guides, and anything else required to make your product.

Throughout this article, I’ll be making an overview about all these different parts to help you decide what you need and how to get there.

The process

The process of implementing a design system may vary across projects and organizations, but the basic principles are: 

• Use a component-based approach to create reusable patterns
• Standardize the workflow
• Create a common toolkit
• Documentation for the whole team

It’s one thing to say that you want to create a design system, and it’s another to actually do it. To get the full advantages of a design system, organizations must be prepared to make it happen. Let’s talk about some of the benefits first.

Benefits :

• Design systems promote consistency by planning ahead and working towards one unified set of guidelines for your entire project. Consistency will improve user experience, and also help with design and development workflows, and team efficiency. 
• Design systems also reduce repetitive work. Creating a library of common patterns, writing modular code, and creating a framework means that elements can be reused, instead of recreated each time they’re used.
• For the developers on your team that don’t specialize in front-end, they can also benefit from having a customized front-end took kit, rather than relying on generic UI kits. 
• Having documentation makes it easier and faster to onboard new team members, and also provides a centralized reference for the whole team. 
• Team communication is improved, because everyone has to work together to think about how changes, updates, or revisions will affect the system as a whole. 
• A more thoughtful approach to building the product , planning, collaborating, and writing documentation also helps to clarify thought processes and reasoning behind the decisions made in the process of creating the website or product.

Challenges :

• Decisions are often based on time and budget. Building an intentional design system requires time and people, and there’s no way around it
• Depending on the skill set of your current team, you may need to hire some outside help to create and maintain the system, which can also affect the budget. 
• A design system is often a work in progress. If your product gets redesigned, updated, or changed in some way, then related materials should also be updated and maintained. If it isn’t, then all that effort may be wasted if the system gets neglected and out of date. 

Hopefully the many benefits that a design system provides can convince the powers that be to invest in this process.

Thanks for reading .

Resources :

• Lynda.com
• Uxdesign.cc