Building Decoupled, Interoperable Design Systems for Drupal

In theory, design systems can have a profoundly positive impact in how teams work. They can make designers, developers, and content creators more efficient. They can prevent rework and reduce technical debt. They can improve collaboration and keep different teams on the same page.

In practice, however, things are a bit more complicated… especially when teams decouple their frontend from the backend, or work on multiple Drupal sites, or work on different platforms altogether.

These were the main hurdles our team hit three years ago. Today we have a battle-tested approach, serving half a dozen internal departments and millions of site visitors… but following best-practices of the time, our first design system was a failure. In this session you’ll learn why — and how that fundamentally shifted our approach to handling component-driven development.

We’ll dive into:

• Difficulties integrating Drupal with Twig-based components in Pattern Lab.
• Decoupling your design system from Pattern Lab and from Drupal for scale and resiliency
• Insurmountable scaling issues with Composer — and how to switch over to publishing everything via NPM
• Automating component documentation & schema validation in Pattern Lab.
• Using web-component-powered React/Vue.js components in Drupal and other platforms.

After this session, you'll have a deeper understanding of the challenges involved when scaling a design system across multiple Drupal sites,. Additionally, you'll have a better grasp on the techniques to build more resilient cross-platform components. No prior knowledge or experience is necessary, however participants familiar with design systems, Pattern Lab, or modern JavaScript frameworks will get the most out of this talk.