Table of Contents
What exactly is a design system?
You’ve likely heard the term thrown around, or maybe you've even worked with one but still find it tricky to define. That’s understandable, as the concept has evolved over time. After doing a lot of reading and research, I’ve found several definitions that really stood out, and I think they help make sense of what a design system is and why it’s so valuable. Here are some that resonated most with me.
Brad Frost's Definition
Brad Frost, the author of Atomic Design, defines design systems as a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Nathan Curtis's Definition
Nathan Curtis, founder of Eight Shapes, defines design systems as 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.
The Interaction Design Foundation's Definition
The Interaction Design Foundation defines it as a comprehensive set of standards, documentation, and reusable components that guide the development of digital products within an organization.
Dan Mall's Definition
Dan Mall, creator of Design System University, describes a design system as a connected, package-managed, version-controlled software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently, and happily.
Design systems have become a vital part of building digital products. They ensure consistency, scalability, and efficiency throughout the design process. Over the past years, I’ve had several projects that required me to either work on design systems or incorporate them into the products I was designing. The goal was always the same: to create cohesive products and speed up the design workflow.
Types of Design Systems
In learning more about design systems, I found Dan Mall’s work particularly insightful. His courses helped me understand the different kinds of design systems and how to build them effectively. In this article, I’ll explore three of the six types of design systems Dan identifies, offering a practical perspective on their application.
1. Brand Identities/Visual Language as Design Systems
The concept of design systems has its roots in the early days of graphic design and print media. Back then, style guides and typographic standards were used to bring order and consistency to visual design. As branding became more important, especially during the mid-20th century, companies began to formalise their visual identities with comprehensive brand guidelines. These early brand identities and visual languages—such as the ones we see today in brands like Spotify or Coca-Cola—are essentially the oldest versions of what we now call design systems.
A design language refers to the collection of visual elements, like colours, typography, spacing, and layout, that come together to make a brand instantly recognisable. Over time, these principles evolved into what we now know as modern design systems, but the core idea remains the same: creating consistency and cohesion in visual communication.
2. Tools as Design Systems
Tools as design systems are some of the most common instances of digital design systems we see. UI kits are great examples and they can be found in design software such as Figma where designers can use premade UI kits to easily drag and drop elements into their designs and sometimes to build their own design systems.
These UI kits are essentially libraries of visual components that help speed up the design process by offering ready-made building blocks. There are tons of them found in the Figma community, allowing teams to share their work and demonstrate how components and symbols can be reused across different projects.
Similarly, in the world of code, component libraries serve the same purpose. Just like you can quickly add components in a design tool, a component library lets developers use small snippets of code to access larger, reusable blocks of code. Both UI kits and component libraries are powerful tools that make it easier to maintain consistency across designs and code.
3. Products as Design Systems
Talking about design systems as a product refers to comprehensive frameworks that function much like standalone products, complete with their own dedicated teams.
Take well-known design systems such as Material Design, Atlassian’s Design System and Polaris by Shopify. These are prime examples of design systems treated as products. They have specialised teams focused on their daily and weekly development, maintain a backlog of tasks, and have budgets allocated to sustain them—just like any successful product.
Consider how a startup operates when developing a product. There's usually a dedicated team led by a product manager, a clear backlog of features to work on, and frequent releases based on user feedback. This approach allows the product to evolve and improve continuously, responding directly to what users need and prefer.
A good design system within an organisation follows the same principles. By treating a design system as a product, it can grow and adapt organically in response to the organisation's evolving needs. This approach ensures that the design system remains relevant, effective, and a valuable asset as the organisation scales.
Conclusion
Design systems aren't just a passing trend—they’re key to creating efficient, consistent, and scalable products. By adopting them, teams can streamline their processes, ensure brand consistency, and deliver better user experiences. But remember, a design system is a living, evolving tool that should grow with your organisation’s needs. Whether you're a designer or developer, embracing these systems can revolutionise how your team collaborates and builds.
This article is just the beginning. Stay tuned for more in my design system series, where I’ll go deeper into different aspects and practical tips. Want to learn more? Follow me on LinkedIn and keep an eye out for the next post!
Top comments (0)