I have been reading and hearing a lot about Design Systems in the last few days. Maybe Twitter and Google algorithms are raising those article topics to me given my specialization. In any case, I have noticed that several authors are describing Design Systems as UI Libraries. I want to clear up any confusion that other writers and developers may generate with the terms.
From a high level, a Design System is the overall design guidelines for the entire organization for technology devices. It can include mobile, web, and IoT. The design system describes everything about how content needs to be presented to the user and guidelines on that presentation. It describes the feeling, intent, and experience elicited by design, along with what not do. Examples of design systems are Google Material, IBM Carbon, Adobe Spectrum, and Microsoft’s Fluent.
A UI library is the compilation of the design system into standardized code styles and components utilized by developers for the creation of digital products. Developers implement the features the product team has prioritized using the pieces described in the UI library. In essence, the UI Library is a deliverable of having a Design System. It is a subset of the overall design language.
So which comes first? Ideally, the design system would be produced first followed by the UI library; a top-down approach. The design system is a synthesis of what the company stands for and what marketing has deemed important to present to people who interact with your product. However, some organizations don’t have a marketing or creative design director to define a company’s overall design guidelines. When the leadership is not there, a UI library is a perfect way to start the conversation and creation of a design system; a bottom-up approach.
At the end of the day, what you want is documentation. A UI library is essentially your design guidelines codified and organized so that implementation is made easier. The documentation will help drive the messaging of the design system to developers who are not familiar with design concepts.
And even though the term “UI frameworks” is more ubiquitous, I am going to continue using UI libraries as they represent a coherent collection of styles and components output that stems from a companies design language. A UI framework does not necessarily have a design system behind it. So don’t be surprised if you continue seeing the term “UI library” show up in my articles. It’s as different as “democratic socialist” and “socialist.”
