Design Systems: Avoiding Common Pitfalls

Design systems have become ubiquitous in the design world, sometimes to a fault. We know them and we love them, but there are many aspects — from the granular component level to the broader processes behind the system — that often go unnoticed or get overlooked.

When done right, design systems can provide a myriad of benefits to a team. By reusing atomic components, both design and development teams can become more efficient, avoiding unnecessary iterations and endless customizations. With that time saved, more effort can be spent on the bigger, often more critical pieces of the build, such as mapping out ideal user flows, information prioritization, or larger project strategy.

However, for all the positives, design systems are not end-all be-all solutions for products. In fact, there are some potential pitfalls that teams need to be aware of that can often lead to less effective implementations and frustrated design teams.

So what are the pitfalls?

It’s easy to see the benefits of a design system and be tempted to implement one into your project without a second thought. Leaning on an existing design system without looking critically at the existing artifacts and processes that go into it is frequently the path of least resistance. But, it’s important to see both the positives and negatives so you have a full understanding of what to avoid and potential solutions to these pitfalls. Some of these downsides include: reduced creativity and exploration, rigid ruling, lack of context, and consistent maintenance.

Reduced Creativity and Exploration

Creating a new design with an existing design system can be incredibly fast and efficient. Just plug in the components, and voilà! You’re done! In no time you now have a polished, functional design. The only problem is, with such a high-fidelity system, the temptation to iterate, explore, or discover is drastically reduced. The path of least resistance is just using what’s already in front of you.

Unfortunately, this plug-and-play mentality starts to break down when new features or functionality diverge from what’s included in the system, and even more so when the complexity of the problem requires creative thinking. In an effort to stick to the system, designers can get caught taking a component-first approach, rather than solving the problem at hand.

The Solution

Instead of jumping immediately into high-fidelity, take a step back from the design system components and give yourself time to iterate and explore without any constraints. The lower the fidelity, the better (I would even go so far as to recommend pen and paper). Doing so will allow for infinitely better designs, both visually and functionally. Push for changes that need to be made, and contextually diverge when necessary.

Flexibility is often seen as competing with consistency, but it’s important that both work together. Instead of rigid uniformity, strive for clarity. Clarity does require a degree of consistency, but not within predetermined rules. There’s room for deviation, within reason and depending on context. This requires a full-team understanding that the tools and resources in your system are dynamic and subject to change, and should be under regular review.

Rigid Ruling

I, for one, love routines. I love the consistency and the predictable nature of doing something day-to-day, unchanging. That same predictable nature is what is so alluring about design systems. In theory, we can set up rules to guide decisions and create consistency in the end product. The risk is that often the rules made months or years ago may still be dictating the decisions your team is making today. In most cases, strict rules become irrelevant as technology and the product changes, causing designs to become outdated quickly.

The Solution

Try shifting the nature of the design system being built and used from “rule-based” to “principle-based”. Design systems regulated by principles offer guidelines, not strict mandates, and are frequently based on the purpose and core values of the design system. Why are you building this to begin with? What are the fundamental goals of this product, project, or system, that all decisions can be measured against? A great example illustrating this concept is Spectrum, Adobe’s design system, which has a whole section dedicated to the principles they use to back up the decisions made across the system.

Such principles create opinionated standards agreed upon by the entire team that enables decisions to be made in a consistent manner. Design systems should be thought of as a toolbox, rather than an instruction manual.

Lack of Context

Take a component like an alert banner. It’s pretty easy to create: add a red background, an error icon, maybe a text style or two. What it’s missing, though, is context for when and how it will be used. What are the various error types? Will they all be urgent, or can some be easily dismissable? Who will be receiving these and why? Without knowing the broader context and use cases, at best you may have a mediocre design; in the worst case, you risk a poor user experience. Designing a component or larger system in a vacuum like this ignores all context, which is most typically a designer’s primary point of reference.

Alternatively, trying to design and solve for every possible scenario and future situation will cause a bloated design system where components and styles you created at the start may never end up being used.

The Solution

Start with the basics. Creating a design system before you know the larger project context is often unavoidable, but by beginning with the atomic styles like typography, color, and general spacing guidelines, you will create a foundation to be easily built upon. Avoid designing the more complex components (e.g., tables, global navigation, modals) until you have more information on which to base those decisions.

While you’ll most likely have to make educated guesses while creating this design system, doing as much initial research as possible will help you make those smaller design decisions. How rounded should the button corners be? Should the body text be 15pt or 16pt? Should the icons be filled or outlined? These are all questions that 1) can be easily modified down the road without major consequences and 2) have answers that can be guided by knowing minor details about the users and the use cases. Utilizing Figma’s new Variables feature may help mitigate some of the redundant work and save time and effort if you need to change a style.

Consistent Maintenance

There are so many starter kits out there that make creating design systems (at least on a smaller scale) seem like a more manageable task than it once was. But once created, they require a constant effort to maintain, update, and evolve. Without putting in time and resources, your design system may quickly become stagnant and obsolete.

For projects and products in active development, design and engineering become rapidly intertwined. Designers can feel discouraged from updating the system as development is now needed to change what already exists; and without a devoted design system team, developers are often whisked away to other needs, pulling focus away from updating built components.

The Solution

Communication is key. Don’t be afraid to make updates when you see the need, but be sure to work within your project team to make sure those changes are being implemented where necessary. Clients may not like hearing that design systems require such an investment, but a design system should be an ever-changing, always-evolving asset — it requires upkeep on the regular. Larger organizations may need entire teams devoted to help with maintenance and contribution.

What does this all mean?

While you should not ignore these pitfalls, they should not deter you from using a design system. In fact, I wholeheartedly recommend using design systems in some capacity on most projects, while understanding and mitigating the potential negatives and additional work they may require. When implemented and maintained well, design systems will create consistency, get the team on the same page, free up designers to tackle larger questions, and take your project from good to great.