UI Kits and Design System Misconceptions, Failures, and Remedies

Josh Cusick, design systems expert with experience at Microsoft and Gusto, leads the Design Systems For Figma website and Beyond The Pixel Substack. Passionate about advancing design systems, he codes in React and TypeScript, exploring new possibilities in the dynamic intersection of design, product, and coding.

Design systems are getting more and more popular. As their popularity rises, so do their misconceptions. A common one is that a UI kit is a design system. Most of you reading this know this to be false, but for those who don’t, we need first to understand what UI kits are.

What is a UI kit?

A UI kit is a collection of design artifacts, like components and styles, that live inside a design tool such as Figma or Sketch.

Often, design systems are sold to leadership as a vehicle to save time, money, and resources. Unfortunately, the ones doing the selling are not always fully aware of what an actual design system is and requires. This results in underforecasting of what is needed to build and maintain a successful one. Sometimes, it is sold as a mere sticker sheet of components or UI kit that can be quickly constructed in Figma and then handed off to engineers without iteration, documentation, or future-proofing.

In other cases, a design system team might be staffed with designers but no engineers. The design team can do their best to design the components and build a UI kit, but as a result of engineering fragmentation and lack of engineering expertise, Figma is as far as those components ever go.

In the end, stakeholders might believe that they have a design system (which they don’t), leading to a host of problems and headaches. Alternatively, they may realize they don’t have an actual design system and potentially develop a negative perception of design systems as they approved countless hours to develop a failed concept. Both cases usually result in no real change and reverting to the way things were before.

If a UI kit is not a design system, what is?

Nathan Curtis puts it beautifully when he says, “A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”

A design system is a living, breathing product with full design and engineering support, as well as design and engineering artifacts.

A UI kit is a byproduct of a design system and a piece of the complete ecosystem. For a design system to be successful, it must be understood that it (the system) requires interpolarity between design and engineering. Design artifacts must have corresponding coded artifacts, and vice-versa. There should be a near-seamless interchange between the two pillars.

Addressing the root issues

A design system never gets past a UI kit and/ or fails for many reasons, but a few are quite common.

The Component Fallacy

Teams get excited about creating a design system and fall prey to what I call the “Component Fallacy.” This is the idea that a design system is deemed authentic merely by having a collection of components. Certain teams mistakenly believe that by designing all components in Figma and providing a UI kit to a couple of engineers, a design system will magically come into existence. Unfortunately, in my experience, having siloed teams using the Waterfall model to build a design system is rarely successful. The result is typically headache and frustration, and most notably, no design system.

No established design system team

You absolutely should have a dedicated design system team. A design system is viable and lucrative only if built and maintained properly by said team. A design system is a living product requiring infinite maintenance, not a feature. Stakeholders sometimes hop on the design system trend, thinking that they can churn one out in a few months and then be done with it, but this never works. You must have executive sponsorship and a funded and dedicated design system team. If you don’t, how do you expect your product to succeed?

Rushed process

The upfront cost of building a design system can be daunting to stakeholders. That anxiety can manifest as pressure on the newly-formed design system team to get sh*t done. Teams sometimes cave to this pressure to “prove value” to leadership. The result is more design and technical debt and sometimes unusable components.

Team fragmentation

I applaud companies for embracing design systems, but I wish more of them would embrace new ways of working together. A design system needs significant collaboration with all functions: design, engineering, product, copywriting, marketing, and more. Companies that do not move towards a collaborative model when building a design system, will fail in their efforts.

Remedies

Ultimately, It doesn’t matter how beautiful your UI kit is or how many components you’ve designed if you don’t have executive sponsorship and cultural buy-in. When pitching a design system to stakeholders, it's best to be well-educated on the matter and relay the specific problems you are aiming to solve.

Before you build a design system, there are a few things you should do to ensure success.

Define problems and goals

Every design system needs specific problems to solve and goals to achieve. For example, increased velocity, improved efficiency, and UI consistency. Documenting these problems and system goals will create a north star for the project and guide every decision you make. Without those, the system has no purpose and can never be successful.

Educate yourself

Do deep research on what companies with successful design systems are doing. Read their documentation and their code. Some design systems I love are Spectrum, Polaris, Workbench, Fluent, Material, and the Atlassian Design System. If you want to browse 50+ design systems and their UI kits, Design Systems For Figma is a great resource for you.

Hire experts and trust their judgment

Find designers and engineers who have had experience working on successful design systems. It’s not enough to just hire experts, you have to trust them.

Final thoughts

One of the wonderful results of the rise in the popularity of design systems is the growth of the community around them. There are many resources out there to help educate you, your team, and stakeholders about design systems.

Here are some great ones to get you started:

1. Design Systems For Figma
2. Design Systems Slack
3. DesignSystems.com
4. Eight Shapes
5. Awesome-design-systems
6. Invison: A comprehensive guide to design systems
7. The Design Systems Podcast
8. Design System Office Hours

Thank you for taking the time to read this article. For those seeking personalized guidance in the realm of design systems, I provide paid one-on-one coaching for designers or engineers aiming to enter the field or elevate their skills. Feel free to connect with me on LinkedIn.