Design System e Drupal CMS: l'anello di congiunzione tra designer e developer
Design System and Drupal CMS: the Link between Designers & Developers
34:32

User experience has evolved into a crucial distinctive factor in the digital world, and in this context, effective collaboration and synergy between designers and developers pose a primary challenge for organizations. The fragmentation of digital channels, the continuous evolution of user expectations, and the need to maintain visual and functional consistency across different touchpoints, as well as the need to adapt promptly to technological innovations and new regulatory requirements, have made the management of digital interfaces increasingly complex.

In this complex scenario, Design Systems emerge as a strategic solution, acting as a bridge between the world of design and that of development. When integrated with flexible and robust platforms like Drupal CMS, Design Systems can radically transform how organizations create, manage, and evolve their digital experiences.

In our talk presented at Talks on my Machine (available in Italian only), we explored this topic in depth. In this article, we delve further into the concept of Design Systems and their integration with Drupal CMS, highlighting how this synergy not only creates a common language among teams but also generates real and substantial value for organizations.

This article is part of our series dedicated to Drupal CMS: we invite you to read the previous articles for further insights, from its advantages to alternatives, security aspects, and architectural considerations.

What is a Design System and why is it important

A Design System is much more than a simple component library or a style guide. It is a complete and living ecosystem, a cohesive framework that includes guiding principles, interaction patterns, reusable components, and clear guidelines. These elements collectively define the visual and interactive language of a brand across all its digital products, ensuring consistency and scalability on a large scale.

The three pillars of an effective Design System

A well-structured Design System rests on interconnected elements that work in synergy to ensure consistency and scalability of digital experiences:

  1. Principles and guidelines: This pillar defines the design philosophy that guides every single decision. It sets the brand's tone of voice, its personality, and its approach to user interaction. It acts as a compass that guides every aesthetic and functional choice, ensuring that the design is not only aesthetically pleasing but also strategically aligned with business objectives.
  2. Component library: This is an organized collection of reusable user interface elements (such as buttons, forms, headers, and cards) and their variations. Each component is meticulously documented, including usage examples, implementation code, and specific use cases. This granularity facilitates reuse, ensures consistency, and reduces development time in every context.
  3. Design patterns: These define consolidated and tested solutions for common interaction scenarios (e.g., login flows, shopping carts, search systems). Patterns logically and functionally combine different components from the library, providing optimized schemes to solve specific user needs efficiently and consistently.

As Nathan Curtis, a Design System expert, effectively stated: "A Design System is not a project but a product, which serves other products." This vision highlights the evolutionary and service nature of a Design System, which must constantly grow and adapt to the evolving needs of the organization and the dynamics of a constantly transforming market.

The tangible benefits of a Design System

Implementing a Design System brings significant advantages at various organizational levels, directly impacting ROI and operational efficiency.

For the organization:

  • Up to 50% reduction in implementation time for new interfaces and functionalities. This translates into significantly accelerated time-to-market for new initiatives, allowing the company to react with greater agility to new market opportunities.
  • Greater consistency of user experience across different touchpoints. This strengthens brand identity, improves recognition, and contributes to building a perception of professionalism and reliability among the public.
  • Significant optimization of maintenance and update costs. Changes to a Design System component propagate to all instances that use it, reducing technical debt and simplifying the long-term management of a digital project.

For designers:

  • Less time spent on repetitive and manual tasks, freeing up time for innovation and creative problem-solving, which is the true added value of the design team.
  • Faster decision-making process due to pre-existing patterns, clear guidelines, and pre-validated components that reduce uncertainty.
  • Facilitated collaboration with developers, establishing a common language that reduces misunderstandings and review cycles, improving overall efficiency.

For developers:

  • Reusable and standardized code that accelerates development, reduces the likelihood of introducing bugs or inconsistencies, and increases software quality.
  • Reduced technical debt, keeping the codebase cleaner, more modular, and easier to maintain in the long run.
  • Faster implementation and fewer bugs thanks to pre-validated and documented components that minimize errors during development.

As observed during our talk, organizations that have adopted a mature Design System have seen improvements in development speed ranging from 20% to 50%, with a parallel reduction in user interface-related bugs. These results are not purely theoretical but translate into a direct impact on operational costs and the company's ability to innovate.

Integrating Design System and Drupal CMS

Drupal CMS, with its flexible and composable architecture, stands as an ideal platform for implementing and managing a Design System over time. This integration can occur at various levels, each offering specific benefits.

1. Advanced theming with a Component-Based Approach

The evolution of theming in Drupal has seen a progressive and strategic shift towards a component-based model, perfectly aligned with Design System philosophy. This approach ensures greater flexibility, granularity, and reusability in the front-end.

  • Twig Components: The use of modular Twig templates allows for direct mapping to Design System components. This ensures that every visual element of your Design System has an exact counterpart in Drupal's code, guaranteeing design fidelity, aesthetic consistency, and ease of maintenance.
  • Single Responsibility: Each component has a specific and well-defined responsibility. This principle ensures that changes to one element do not have unintended side effects on other system components, improving development stability and predictability, and fostering resilience.
  • Cross-page reuse: Components can be easily reused in different contexts within Drupal, such as different pages, content types, or even across multiple sites within a multisite architecture. This maximizes efficiency and brand consistency, even at a large scale.

This approach, known as "Component-Driven Development," fosters a direct correspondence between the components defined in the Design System and their technical implementation in Drupal, significantly reducing the gap between design and code and optimizing the development workflow.

2. Deep integration with Layout Builder

One of the most significant innovations in Drupal CMS is the Layout Builder, which can be extended to natively integrate Design System components. This new Layout Builder enables greater autonomy for editors and marketing teams.

  • Custom Block Types: It allows the creation of custom block types that directly represent Design System components. This empowers non-technical users to assemble complex pages using an intuitive drag-and-drop functionality.
  • Layout Libraries: The definition of predefined layouts, based on Design System patterns, allows users to choose validated and accessible structural options, accelerating the creation of new pages or sections while promoting consistency.
  • Visual configuration: The drag-and-drop interface, combined with Design System components, enables highly intuitive visual page composition. This reduces reliance on technical resources for content creation and modifications, enabling a true no-code approach for editorial teams, without requiring code.

This integration opens up exciting possibilities for promoting the use of the Design System by any role, allowing editors and content managers to create consistent experiences without needing advanced technical skills, while streamlining publishing times and workflows.

3. Design Tokens as a single source of truth

Design Tokens represent a fundamental concept in modern Design System implementation, acting as a "single source of truth" for all visual and stylistic attributes of a brand. Their adoption is crucial to ensure consistency across all platforms:

  • Atomic values: Centralized definition of colors, typography, spacing, shadows, and other stylistic elements. For example, instead of defining a color as a hex code (#EB0000, also known as our own Spark Red), it is semantically labeled (e.g., primary-heading-color). This makes global changes quick and error-free, automatically propagating updates to all components that use that token.
  • Platform independence: Design Tokens are agnostic to the implementation platform. This means that Tokens can be used in both design tools (Figma, Sketch) and development environments (CSS, JavaScript, Twig), ensuring perfect stylistic consistency across all channels.
  • Single Source of Truth: They establish a unique and shared source for visual attributes. When it truly is a single source of truth, it eliminates inconsistencies that systematically arise from multiple, separate sources.

The implementation of Design Tokens in Drupal can occur through Sass variables, CSS custom properties, or more sophisticated systems that automatically synchronize tokens between design tools and code.

As demonstrated in our talk, this approach effectively manages "design drift," the tendency for technical implementations to progressively diverge from the original design, thus maintaining perfect design-to-code consistency.

Tools and workflows for effective collaboration

The integration of Design System and Drupal CMS requires an ecosystem of tools and workflows that facilitate collaboration between designers and developers, overcoming traditional operational silos. Here are some must-haves.

Storybook: the bridge between design and development

Storybook has become a de facto standard for UI component development, documentation, and testing, acting as a crucial link:

  • Isolated environment: Allows for independent component development from the application context, working on individual UI components in an isolated environment. This accelerates development, simplifies debugging, and ensures predictable functionality regardless of the usage context.
  • Living documentation: Generates interactive and always up-to-date component documentation, which is always accessible to foster understanding and alignment.
  • Visual testing: Automated verification of the visual correctness of components, helping to maintain high quality of the final product.

Integrating Storybook with Drupal allows for developing components in isolation, thoroughly testing them, and only then integrating them into the CMS platform. This approach significantly improves code quality and reduces overall development time, leading to a faster time-to-market for new implementations and features.

ZeroHeight: centralizing Design System documentation

ZeroHeight is an excellent and widely used solution for centralizing and sharing Design System documentation, making it easily accessible to all organizational stakeholders:

  • Single Source of Truth: Creates a centralized repository accessible to the entire organization, serving as a single source for all Design System documentation. Guidelines, principles, tokens, components... everything is consolidated in one place.
  • Integration with design tools: Automatically synchronizes with leading design tools like Figma, Sketch, and Adobe XD, maintaining alignment without manual effort.
  • Versioning and history: Advanced tracking of Design System evolution over time through versioning and history, which is particularly crucial for large organizations with multiple products and projects.

This type of platform greatly facilitates Design System adoption at the organizational level, providing a clear, always up-to-date, and accessible reference point for designers, developers, content managers, and other business stakeholders.

CI/CD for Design System

The application of Continuous Integration/Continuous Delivery (CI/CD) practices, typical of the DevOps field, to Design Systems creates an approach known as "DesignOps." This elevates the Design System to a higher operational level, ensuring unprecedented continuity, consistency, and speed in updates.

  • Automated testing: Automated verification of component compliance is integrated, not only in terms of quality standards but also crucial regulations like the EAA, which requires adherence to WCAG 2.1 AA standards.
  • Continuous integration of changes: Continuous integration of Design System changes into the codebase. Development teams can always access the latest valid component versions, resolving version conflicts.
  • Automated deployment: Once approved in CI/CD pipelines, Design System changes are automatically deployed to all products using it. The entire ecosystem can be consistently aligned, without manual intervention or delays.

This "DesignOps" approach extends the benefits of DevOps methodologies (such as speed, reliability, and automation) into the design world, guaranteeing quality, speed, and consistency in the evolution of the digital experience.

Successful Case Studies: Design System in action with Drupal CMS

To concretely illustrate the benefits of integrating Design Systems and Drupal CMS, we examine some real cases successfully implemented by the SparkFabrik team. These examples aim to inspire and demonstrate how the strategic adoption of a Design System is not just a theoretical best practice, but a strategic lever for achieving business objectives.

Zambon Group: brand consistency across multiple touchpoints

For Zambon Group, a pharmaceutical multinational with an extensive and complex digital presence, we implemented a Design System integrated with Drupal that allowed them to:

  • Ensure visual and functional consistency across their corporate website and dozens of product microsites. Before implementation, each new site required significant design and development effort and often led to inconsistencies. Today, the Design System ensures that every new initiative is immediately aligned with the brand.
  • Effectively support a complex multilingual and multicountry context. It is now possible to centrally manage content and design for over 40 corporate and product sites, available in more than 20 languages and countries, maintaining a unified global brand identity.
  • Significantly reduce implementation times for new digital initiatives, with resulting optimization of time-to-market and significant cost reduction.

The Design System created a unified visual language that globally reflects the Zambon brand identity, while allowing the necessary flexibility to meet the specific needs of different markets and product lines.

case study zambon

Caleffi: cohesive and scalable digital experiences

For Caleffi, a leading multinational player in the plumbing sector, implementing a Design System integrated with Drupal allowed them to:

  • Create a consistent user experience that integrates complex editorial content with a vast product catalog, comprising 12 catalogs and over 20,000 products.
  • Ensure responsiveness and consistency across all devices (desktop, tablet, mobile), in 12 countries, and 18 languages.
  • Significantly accelerate time-to-market for new digital initiatives.
  • Facilitate continuous evolution of the digital experience, rapid and efficient construction of new pages and sections, and timely response to market needs through new digital initiatives.

The Design System defined not only visual components but also specific interactive patterns for e-commerce and catalog management, creating an intuitive Browse experience that enhances both informational and product content and directly contributes to Caleffi's business objectives.

Bocconi University: a unified visual language

For Bocconi University, a prestigious international educational institution, implementing a Design System integrated with Drupal allowed them to:

  • Unify the digital experience across dozens of sites and microsites, from the university's main site to multiple departmental portals and microsites dedicated to events and initiatives.
  • Maintain brand consistency in a multilingual context, crucial for promoting the institution's international prestige, while supporting unified governance for all properties.
  • Reduce the implementation time for new sections by 40% and improve the consistency of institutional communication.

The Design System defined not only visual components but also specific interactive patterns for the educational context, such as course navigation, faculty presentation, and enrollment procedures, creating an intuitive and consistent user experience for all user types: students, faculty, administrative staff, and external stakeholders.

Our experience: lessons learned and value delivered

After years of implementing Design Systems and over a decade of experience with enterprise-grade Drupal platforms, we have gained a unique perspective on what truly works and how to maximize value for our clients. We would like to share some personal reflections that go beyond theoretical best practices.

When a Design System truly makes a difference

Our experience has taught us that not all projects benefit equally from a Design System. The value is maximized, and the investment most justified, when:

There is real multi-touchpoint and multilingual complexity. In Zambon's case, with dozens of product sites in different languages and a global presence requiring coordinated management, the Design System literally transformed their way of working. Before its implementation, each new product site required several weeks or months of work and inevitably led to visual and functional inconsistencies. Today, launching a new product site takes days or a couple of weeks, and consistency is guaranteed regardless of the involved team.

The client has a medium-to-long-term vision and a commitment to digital evolution. We have observed that clients like Bocconi University, with a strategic vision for their digital ecosystem and a willingness to invest in an asset like the Design System over time, have seen exponential benefits. The initial investment in the Design System is paying off not only in terms of operational efficiency but also in the ability to evolve their digital presence consistently and incrementally, reducing long-term costs and increasing scalability.

There are cross-functional teams that require fluid collaboration. With Caleffi, the presence of marketing, communication, and IT teams involved in platform management amplified the benefits of the Design System. This tool became a common language that improved internal collaboration, eliminating friction and misunderstandings, and accelerating decisions and operations.

What we learned in the field

Every implementation has taught us something new, and some lessons are particularly valuable for anyone approaching Design Systems, whether as a client or a professional:

Technical success does not guarantee actual adoption. We have learned, sometimes at our own expense, that even the most technically elegant Design System fails if it is not actually adopted by the organization. For this reason, today we dedicate at least 30% of our effort to change management, continuous training, and clear, accessible documentation. Facilitation, knowledge transfer, and active support are crucial for the widespread adoption of the Design System culture, ensuring it is effectively embraced and integrated into daily practices.

Governance is more important than individual components. Initially, our focus was primarily on creating beautiful and functional UI components. Today, we know that clearly defining roles, responsibilities, decision-making processes, and workflows for Design System evolution is even more critical. An imperfect but well-governed component will evolve over time; a perfect component without governance will quickly become obsolete and a source of inconsistency.

Value grows over time. Our most satisfied clients are those with whom we have collaborated for years, in a true partnership. The real value of a Design System emerges not just at go-live, but accumulates over time, as the effort savings multiply, and the organization develops true "fluency" in using the system. This allows for autonomous innovation, maintaining identity and consistency, and continuously optimizing the Total Cost of Ownership (TCO).

The tangible value delivered to clients

When we look at the concrete results our clients have achieved through the strategic adoption of a Design System implemented with Drupal, some stand out for their business impact:

Drastic reduction in time-to-market. For Zambon, the time required to launch a new product site decreased from 8-10 weeks to 2-3 weeks (if not days), a 70% improvement that transformed their ability to respond to market demands. This is a significant and tangible competitive advantage.

Operational autonomy. Caleffi's teams gained previously unimaginable operational autonomy. Today, 60% of modifications and new implementations (such as new landing pages or product sections) are managed internally, thanks to the Design System's clarity and ease of use. Marketing teams can finally experiment with speed and independence.

Organizational resilience and brand continuity. Bocconi University successfully navigated significant organizational and strategic changes (such as departmental reorganization or new course introductions) without impacting the consistency and quality of their digital presence. The Design System served as an "institutional memory" of interaction principles and patterns.

Investment optimization. All our clients with mature Design Systems report an average 30-40% reduction in implementation costs for new features and channels, with ROI typically turning positive within 12-18 months of initial implementation.

But perhaps the most gratifying feedback we receive is not about the numbers, but the quality of collaboration: designers, developers, and business stakeholders finally speaking the same language, with a shared understanding of problems and solutions. It is this cultural transformation that, in the end, generates the most lasting and profound value for the organization.

Best practices for implementation

Based on our extensive experience in numerous complex projects, we can identify several fundamental best practices for an effective Design System implementation with Drupal CMS. Adopting these guidelines transforms a potentially burdensome project into a strategic and enabling asset for the entire organization.

1. Start with a pragmatic and incremental approach

Attempting to build a complete and "perfect" Design System from the outset is an approach that does not work: it inevitably leads to significant delays, excessive costs, and team demotivation. Moreover, a "perfect" system does not exist, and indeed, it must constantly evolve to avoid becoming obsolete.

Instead, it is much more effective to adopt a pragmatic and incremental approach, focusing on rapid value and "quick wins" that consolidate adoption by teams:

  • Start with a core set of "essential" components, high-impact and frequently used in the user experience (e.g., buttons, form inputs, typography). This allows for obtaining initial benefits quickly.
  • Implement an MVP (Minimum Viable Product) and let it grow organically. Launching a minimal but functional Design System allows for gathering real feedback from internal users (designers, developers), and then letting it grow based on needs. This agile approach reduces risk and maximizes adoption and internal learning.
  • Clearly define priorities and an evolution roadmap, taking into account business needs and available resources. The introduction of a Design System is not an endpoint: it is essential to keep it alive, evolve it, and enrich it over time to prevent it from becoming obsolete.

This approach not only allows for obtaining value more quickly but also enables validating initial choices and evolving the Design System agilely, based on concrete feedback rather than hypotheses or initial requirements that might change.

2. Establish clear governance and ownership

A Design System is a "product that serves other products," and as such, it also requires continuous management and maintenance. Without clear governance, its effectiveness can quickly diminish, leading to inconsistencies, frustrations, errors, and, ultimately, obsolescence:

  • Define precise roles and responsibilities. Who is responsible for defining design principles, developing components, maintaining them, and promoting the Design System internally? Clear roles are essential to avoid overlaps or gaps in responsibility.
  • Establish processes for Design System evolution. How are new components proposed? How are existing ones modified? What is the review, approval, integration, and documentation process? Well-defined and documented workflows are crucial for consistency, quality, and scalability over time.
  • Create structured feedback loop mechanisms between Design System users (designers, developers, content editors, other stakeholders) and maintainers. This enables continuous improvement based on real needs and ensures the Design System remains relevant and useful within the organization.

As explained, governance is often the determining factor between a successful Design System (adopted, understood, valued) and one that is progressively abandoned.

3. Invest in documentation and continuous training

Documentation and training are not optional additions but integral parts of the Design System, crucial for its adoption and long-term effectiveness. Indeed, a Design System is only as useful as its documentation and the team's ability to use it effectively.

  • Document not only "what" but also "why" design decisions were made. Explaining the underlying principles, guidelines, and reasons helps users understand how and when to use components appropriately and autonomously.
  • Create specific usage guides for different roles (designers, developers, content editors). This way, each guide focuses on the most relevant information for each role, facilitating learning and adoption.
  • Organize practical training sessions and workshops regularly. As with any other area, active training is much more effective than simply distributing documents: it helps overcome initial resistance, transfers skills, and promotes the Design System culture.

As clearly emerged in our talk, even the best Design System, technically impeccable, has limited value if the organization does not know how to use it effectively or is not supported in practical adoption.

4. Measure and communicate value

To ensure continuous support for the Design System, it is essential to measure and communicate its impact at all levels of the organization:

  • Track quantitative metrics, key indicators such as development time for new functionalities (e.g., a new landing page), bug reduction, existing component reuse rates.
  • Collect qualitative feedback from stakeholders and users, understand challenges encountered and areas for improvement, ensuring the Design System and its evolutions effectively meet real needs.
  • Regularly communicate successes and lessons learned, such as results achieved, savings generated, successful implementations that demonstrate the tangible value of the Design System.

This data-driven approach, focused on transparent communication, helps solidify the Design System as a strategic asset within the organization and its culture. By positioning it as a strategic investment rather than a mere cost center, its sustainability and evolution over time are ensured.

The future of Design System integration with Drupal CMS

Looking ahead, we can identify several emerging trends that will further shape the integration between Design Systems and Drupal, innovations that will make the CMS platform even more powerful, flexible, and responsive to business needs.

1. Advanced design-to-code automation

Tools that automatically transform design components created in platforms like Figma into functional code implementations in Drupal are becoming increasingly sophisticated. This progress promises to further reduce the gap between design and code and is inherently linked to the concept of low-code/no-code that Drupal CMS is increasingly embracing.

2. Multi-Experience Design System

The evolution of Design Systems is extending beyond mere web development to new digital experiences. The inclusion of voice user interfaces (Voice UI), augmented reality, chatbots, IoT devices, and other emerging channels will require greater flexibility in Drupal implementations. The Design System will become an even more central hub for ensuring aesthetic and functional consistency across all touchpoints.

3. AI-Assisted Design System

Artificial intelligence is beginning to play an increasingly pervasive role in Design System creation and maintenance. Advanced AI functionalities are expected to offer intelligent suggestions for optimal component combinations, proactively identify stylistic and functional inconsistencies, and even generate component variations based on specific parameters or styles. This will further optimize the design and development process, always under human governance, increasing efficiency and speed.

4. Cross-Platform Design System

With the emergence of standardized technologies like Web Components, Design System implementation can become increasingly platform-independent. This finally allows for true cross-platform reuse, not only within the Drupal ecosystem but also across other services. This interoperability will further maximize the Design System investment.

5. UX: a leading role in Drupal Core

A recent and highly significant piece of news for the Drupal ecosystem is the creation of the new UX Manager role within the Drupal.org core leads team. This represents an important step towards an intrinsically UX-driven development, where user experience is not an afterthought but is integrated from the ideation and design phase.

This further strengthens Drupal's commitment to creating more intuitive, cohesive, and accessible experiences for all users, an aspect that perfectly aligns with the goal of Design Systems to ensure consistency and usability at scale, and demonstrates the maturity and long-term vision of the Drupal ecosystem.

Conclusions

The strategic integration of Design Systems and Drupal CMS is much more than a mere technical evolution: it is a fundamental shift in how organizations manage and innovate their digital experiences. This synergy offers a common language that breaks down communication barriers between designers and developers, significantly accelerates development cycles, and ensures impeccable consistency across all digital touchpoints.

As we have extensively demonstrated in real case studies and in our direct field experience, the tangible benefits of this integration go beyond mere technical efficiency. Design Systems, when implemented with a strategic vision and supported by a solid platform like Drupal CMS, profoundly transform how organizations create, manage, and evolve their digital presence, with positive and lasting impacts at the cultural, operational, and strategic levels.

At SparkFabrik, we combine advanced strategic design skills, high-level Drupal development, and cutting-edge Cloud Native architectures. We implement Design Systems with a real strategic impact, which are not only technically robust but also perfectly aligned with organizations' business objectives. Our Design Services is specifically designed to guide organizations on this digital transformation journey: from the initial definition of design principles, through component library construction, to technical implementation and continuous system evolution.

If your organization is considering implementing or optimizing a Design System with Drupal CMS, we invite you to:

  1. Explore our complete talk on Design Systems and Drupal for in-depth and practical insights (in Italian only).
  2. Consult our case studies illustrating successful implementations in various complex sectors and contexts.
  3. Contact our team for a personalized assessment of your specific context and objectives.

This article is part of our series on Drupal CMS. To explore other aspects of the platform, we invite you to consult our previous articles on Drupal CMS features and advantages, comparison with main alternatives, migration strategies, security and compliance aspects, ecosystem innovation roadmap, and composable architecture.

Want more information about our services dedicated to Drupal?