Design Systems: From Atomic Design to a Global Solution

In the fast-paced world of design, creating a seamless and efficient user experience is crucial. Design systems have emerged as a powerful solution, marrying art and science to ensure consistency and cohesiveness. In this episode, we explore the complexities of successful design systems and how they bridge the gap between product and consistency.

1. Atomic Design

Atomic design is a methodology with a corresponding book created by our guest, Brad Frost. It involves breaking down user interfaces into fundamental building blocks, enabling the creation of more complex components. Serving as a mental modal for crafting The five hierarchical levels of atomic design — atoms, molecules, organisms, templates, and pages — build upon each other, enabling the formation of more sophisticated elements. By adopting this methodology, organizations can seamlessly scale their products while ensuring a consistent approach throughout the development process. As the importance of implementing design systems becomes increasingly recognized, additional complexities emerge for organizations to navigate.

2. Design System Complexities

As organizations grasp the importance of design systems, new complexities surface. The challenges of maintaining consistency and scalability are often underestimated. The conventional perspective on a design system oversimplifies the connection between the design system and the product or products it impacts. The digital product landscape has evolved significantly and as organizations scale, the complexity of design systems increases.

Consistency and Standardization

The significance of maintaining consistency within user interfaces cannot be overstated. This involves adhering to a set of design principles and visual elements to ensure a cohesive and intuitive user experience. Additionally, standardizing components is essential for achieving a unified look and feel across different aspects of a product or platform.

Collaboration and Communication

Efficient collaboration and communication between design and development teams are crucial for successful product implementations. Bridging the gap between these disciplines enhances understanding, fostering a streamlined development process.

Scalability and Efficiency

Design systems serve as powerful tools for scalability in product development. Implementing efficient design systems streamlines workflows, saving time and resources. Balancing the challenge of scaling design systems to meet a growing organization’s needs is critical for long-term success. Successful design systems deliberately move at a slower pace than the products they support, acknowledging that quality cannot be rushed. Build only what is needed and avoid complexity for the sake of complexity. While products often prioritize speed to meet business goals, design systems, as critical infrastructure, require a more deliberate and thoughtful approach to design and technical aspects.

• Ship faster by building design systems slower

Unpacking Complexity

Navigating these intricate challenges, organizations witness the expansion of design systems’ responsibilities, tooling matures, processes and organizational structures evolve. A design system ecosystem can become a complex web of dependencies within a modern organization.

3. The Layer Cake Approach

The layer cake approach is a more accurate representation of the relationship between design systems and products. The design system ecosystem is a complex web of dependencies within a modern organization. Unpacking the layers of this ecosystem is essential for understanding the intricacies of design systems.

• The design system ecosystem

  • Core Design System: At the foundation lies the core design system—a comprehensive set of design principles, guidelines, and components. This serves as the bedrock, providing a standardized framework for the entire organization.

  • Technology-Specific Implementation: Building on the core, this layer involves the translation of design principles into technology-specific implementations. It encompasses the adaptation of design components to fit the technological landscape, ensuring seamless integration.

  • Recipes: Recipes represent predefined solutions or patterns that encapsulate best practices. These are ready-made solutions derived from the core design system, offering efficiency and consistency in design and development.

  • Smart Components: Smart components are dynamic elements that intelligently adapt to different contexts within products. They leverage the design system’s principles and technology-specific implementations to enhance flexibility and responsiveness.

  • Product: At the top layer sits the product—the tangible manifestation of the design system in action. Products draw from the layers below, incorporating design principles, technology-specific implementations, recipes, and smart components.

It’s crucial to note that these layers are not universally applicable to every organization. Instead, this visual representation illustrates a mature enterprise design system, influenced by real-world experiences with some of the world’s largest companies. Each layer adds depth, and organizations may find value in implementing only a fraction of the depicted layers. Flexibility is key, allowing organizations to tailor their design system to their specific needs and growth trajectories.

4. Looking Ahead to a global Design System

A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, A Global Design System Addressing the existing problem of incompatible design systems, a global design system is proposed as a solution. The aim is to improve the quality and accessibility of web experiences, save time for designers and developers, and harness collective human potential. The proposal involves creating an open-source system governed by a community of designers and developers, emphasizing collaboration on a global scale.

The Problem

Despite the widespread adoption of design systems, compatibility issues persist, creating friction for designers and developers. The proposal advocates for the creation of a global design system to enhance the quality, accessibility, and usability of web experiences.

The Proposal

Advocating for a united effort to create a global design system, the proposal suggests making the system open source and governed by a community of designers and developers. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration.

• Centralize common UI components
• Layer on top of HTML
• Accessible and front-end best practices baked in
• Unstyled and easily themeable
• Intuitive and easy to use
• Interoperable with other systems
• Internationalized and localized
• Composable and extensible

Where

Establishing the infrastructure for the global design system involves elements such as a code repository, code packages, a design library, and comprehensive documentation on a reference site.

How

The process of building a global design system includes initiating conversations, forming a working group, conducting research, planning the implementation, designing and building, releasing, iterating based on feedback, governing the system, and maintaining support for integration into the HTML specification.

Who

The initiative is open for contributions from individuals and is not owned by a specific company or organization. It is sponsored by various entities and supported by the community, including organizations like Open UI, W3C, and the Design Tokens Community Group.

5. Conclusion

Design systems are powerful tools for achieving consistency and scalability in product development. As organizations grow, the complexities of design systems increase, and the challenges of maintaining consistency and scalability are often underestimated. The layer cake approach provides a more accurate representation of the relationship between design systems and products, illustrating the intricate web of dependencies within a modern organization. A good baseline is to start with a solid foundation, using the layer cake approach, and scaling a design system as an organization grows. Start small and only add in complexity when needed. The proposal for a global design system aims to address the existing problem of incompatible design systems, advocating for a united effort to create a global design system. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration.