The Five Most Common Mistakes When Building Design Systems
By now, most product designers have heard of the benefits of a design system. If your team doesn’t have one, you’re missing out on enormous gains in efficiency and quality of your design and product development.
But not all design systems are created equal. Simply having a design system doesn’t bring much benefit unless it’s built the right way. Make sure you avoid these mistakes!
Mistake #1: Not Accounting for Real Content
Far too often, designers use placeholder content to fill in vital aspects of a design system. While the components in a design system need to be composed to accommodate variable content, the design system needs to have a point of view about the right kind of content to be used.
By using real content inside of your example components, you force designers to always think about realistic content dimensions and give them a perspective on the appropriate kind of content to use for the component.
While design systems should be flexible, you don’t want the same component being used in wildly different ways between products, as that would undermine the benefits of consistency in a user’s experience.
Mistake #2: Having No Component Hierarchy
Design systems become infinitely more useful when you build an intelligent component architecture that combines components when appropriate. The most common way to think of this principle is called “Atomic Design”.
Far too often, I’ve seen design teams forgo this work in favor of a flat component architecture. While a flat architecture might seem more attractive (because it’s easier to maintain), it becomes maddening to understand the relationship between components.
Can a Button be put inside of a Card? How about a Card inside of a Button? If you don’t have any atomic structure for your components, it’s hard to say.
Mistake #3: Not Creating Small Enough Components
The best design systems have very small components. In fact, so small that it would be hard to break them down any further. Small components, like a Button or a Title, are the building blocks of your design system. Even if you don’t see a clear path towards using them in different ways, maintaining them as unique components gives you incredible flexibility as your design system inevitably evolves.
Of course, taken to the extreme, you could use this principle to break a component all the way down to its smallest parts: shape, color, type, etc. While it’s often tempting to do so, that level of granularity goes too far. It’s helpful to remember that a developer will need to understand this design system as well.
What’s our rule? Break down your component structure until you’ve reached the point that the component is no longer self-sufficient in a design. Or rather, only create components that could be independently used.
Mistake #4: Not Creating Large Enough Components
It’s equally reckless to maintain too many disparate atoms without finding opportunities to recombine them into useful molecules or organisms. As a rule, only create molecules or organisms that solve a specific problem your users are facing. It’s tempting to create arbitrary combinations of atoms that look good together, but basing those decisions on real use-cases grounds your design system in reality.
Large components establish the strong paradigms in your system. As a rule, if you use a combination of smaller components more than once, it should be its own molecule or organism.
Mistake #5: Creating a Design System Independent of Your Product
Perhaps the biggest mistake we see, and it’s the one most propagated by UI templates, is the idea that great design system can be constructed from a generic UI template.
Certainly, boilerplate design systems like Bootstrap serve a useful purpose in getting a product off the ground. But too many companies invest in a design system they think looks awesome independent of whether or not it understands their users’ needs.
Instead, create real designs for real use-cases and then harvest your design components from that. You’ll end up with purpose-built components that give you all of the benefits of a design system without the drawbacks.
Need to keep track of your team’s improvements to your design system? Use Trino, the only task manager built just for design teams.
