Your Component Library is not a Design System

Pattern Libraries like Storybook are excellent for aligning production teams, or in Brad Frost’s words, for making a great workshop. But they are missing what he calls the storefront - the Style Guide - whose audience is not just the production team but the whole organization. A successful Design System contains both, and in this talk we will discuss why this is necessary and how to implement it for your projects using the new Emulsify Design System.

The first part of this session will begin by defining the differences between Pattern Libraries, Style Guides, and Design Systems. It will then go into detail about why a full Design System is crucial for long-term project success, including real-world examples where a Pattern Library alone failed and where Design Systems succeed. It will talk about the details of what a full Design System should include and how to implement and support it across multiple teams.

The second part of this session will focus on the experience of using the Emulsify Design System. We will first discuss the developer experience when using it on a Drupal project, including creating fully accessible Twig or React components in Storybook and sharing that work with other teams. Then, we will walk through the experience of maintaining the Style Guide content in Gatsby including the ease-of-use of developing the component/code documentation.

Background on Emulsify

With over 100,000 downloads, Emulsify has become an important open source release both internally at Four Kitchens and in the Drupal community, helping to propel the component-driven development movement forward. The latest version - Emulsify Design System - provides an exciting new direction that can help deliver a truly flexible Design System regardless of technology. High points include:

• Custom flexible Style Guide driven by Gatsby

• Storybook-powered Pattern Library

• Full support for Twig and React out of the box (and other languages possible)

• Full support for parent/child organizations