Design systems have shifted towards embracing composable elements as the fundamental building blocks for creating scalable, consistent, and versatile designs. This paradigm shift offers a holistic approach that fosters quality, flexibility, efficiency, and collaboration throughout the entire digital production operation.
In this post, we’ll share insights from Robin Cannon, Executive Director of Design Systems at JP Morgan and former design systems leader at IBM.
Composable Elements
Composable elements, rooted in universal principles, extend beyond mere components; they encapsulate the essence of flexibility and scalability. By leveraging them, design teams elevate both the quality and consistency of their creations.
The concept of modular components that can be assembled is not, in and of itself, revolutionary to most design system teams. However, it’s the balance between free-form flexibility and rigidity stemming from over-prescription that needs to be the focus to achieve a sustainable model.
Robin shared insights about the sheer quantity of components in systems he’s worked with. While not a standalone indicator of balance and composability, they hint at the journey to success that he’s witnessed.
"Stop building components. Composable elements and a pattern driven design system approach." Presentation by: Robin Cannon, October 2023
Successful product organizations are enabled with composable components at a relatively low level (perhaps “atomic” or “molecular” if you’re into that sort of thing) and then provided with guidance about how to use them (we like the term “recipes”) to solve user experience challenges.
Adoption and Collaboration
The beauty of embracing composable elements lies in the spectrum of adoption opportunities it offers. Teams can start with universal styling—like colors, typography, and basic elements—and gradually integrate more intricate components and patterns. Alternatively, a team taking on a total refactor of their UI should reasonably be able to support around 80% of their needs with the elements and recipes provided by the system team. This flexible adoption approach allows tailoring the design system to specific project needs, ensuring a smoother transition and empowering teams to align with their pace and requirements. This approach ensures that your design system strategy prioritizes accelerating existing product goals rather than introducing new ones. Everyone wins.
The synergy between design system teams and product teams is pivotal. While product teams hold ownership of their applications, collaboration with the design system team throughout the digital production operation is imperative. The design system must align with product goals, focusing on enhancing overall organizational outcomes. Involving stakeholders and executives fosters brand consistency across all touchpoints, ensuring a cohesive user experience. But if the design system’s priorities are viewed as counter, or even just additive to the product organization’s goals, that friction can be hard to overcome.
Value Proposition Beyond Adoption Metrics
The true value of a design system lies not just in adoption metrics but in efficiency gains and time savings. While tracking usage is valuable, it's equally essential to spotlight the transformative impact of composable elements. Demonstrating how these composable elements streamline workflows, foster innovation, and promote scalability becomes pivotal in garnering support from stakeholders and executives.
"Stop building components. Composable elements and a pattern driven design system approach." Presentation by: Robin Cannon, October 2023
Prescriptive Yet Flexible
Design systems walk a tightrope between code compliance and flexibility. They offer the fundamental guidelines and building blocks necessary for consistency, all while accommodating the diversity of product requirements. By providing a framework rooted in modular components with guidance on composition and assembly, design systems ensure coherence across the organization without stifling creativity or individuality. This delicate balance fosters a unified visual language while empowering teams to tailor and expand upon these elements as needed, ensuring both consistency and flexibility.
Overcoming Challenges and Sustaining Innovation
Maintaining a design system's momentum involves constant improvement. Revitalizing teams through the exploration and refinement of these modular elements reignites creativity and enthusiasm. Highlighting the direct impact on productivity and innovation, measured through the adaptability and reusability of these elements, helps make a clear case for ongoing funding and support. Presenting a comprehensive return on investment (ROI) that showcases how composable elements facilitate scalability and adaptability across various projects can solidify their indispensable role within the organization.
"Stop building components. Composable elements and a pattern driven design system approach." Presentation by: Robin Cannon, October 2023
The Value of Proper Tooling
Ultimately, design systems and the ROI we mention are about ways of working within your product organization. Those ways of working need to be supported by integrated, scalable infrastructure that enables your product and design system teams to focus on the most critical work unique to your business.
Platforms like Knapsack offer critical infrastructure to support and unify various aspects of your digital product operations. This includes brand guidelines, dynamic documentation of composable elements, design token management tools that democratize key workflows, and developer tools for real-time rendering and instant testing infrastructure. All designed to align your teams and stakeholders around share expectations, and accelerate the process of turning the Design team’s intent into the user’s reality.
Conclusion
The shift towards composable elements within design systems heralds a new era of agility, collaboration, and efficiency. Embracing this shift empowers teams to craft cohesive, scalable, and impactful digital experiences. By nurturing collaboration, demonstrating tangible value, and balancing flexibility with guidelines, organizations can propel themselves towards design excellence and sustained success.
