Skip to main content
7 March 2023

Drupal And Design Systems

Introduction

Design systems is a modern approach to building websites and keeping your visuals consistent. In this article we will talk about different ways you can integrate design systems in your theme.

Thanks to the Components (https://www.drupal.org/project/components) module you can inherit the twig templates from design systems. So now you can build a system outside of Drupal and as long as it is using twig you simply re-use the templates with compiled styles.

 

Storybook

Currently, one of the most promising design systems being used in Drupal is Storybook.

Some of the great features of it:

See the complete list of addons to Storybook.

 

Emulsify

Project is built and maintained by Four Kitchens. As a core it uses a Storybook components library.

According to documentation Emulsify is a project that governs the way you can use a design system (as Compound) in Drupal (other variants could be WP, React).

Emulsify Diagram

Great thing about Emulsify is that it has CLI that gets you started. System already designed with an idea of having external repo with the design system that you share between your projects. So you do not even have to pull in all components from upstream but to use only the ones you like.

The steps to get started are:

  • Install the CLI
  • Generate a starter theme
  • Specify the components library (Compound repo)
  • Pull in components you like
  • Start inheriting them in your theme

Here is a great walkthrough video about these steps.

The best guide about using components in your template we’ve found is a presentation at Drupal 4 Gov.

One additional tool being used in Emulsify is a module with a few twig extensions: BEM and attributes. These are being used widely in building twig templates.

Please also check the work towards creating a Figma to Code bridge with the UI Kit.

What is also great about Emulsify is that it is backed by a very prominent agency and it has a support slack channel. Here is a link to join.

As of February 2023 emulsify is used by 3,552 sites (statistics of emulsify_twig module).

 

UI Suite

Second approach to use design systems in Drupal is the UI Suite set of modules.

UI Suite is implementing all the artefacts of a design systems:

  • components and component library with ui_patterns
  • helpers, utilities and stytleguides with ui_styles
  • layout and grid systems with layout_options
  • theming and variables with ui_skins
  • example pages witch ui_examples

Read more about state of design systems to see what are the other components widely used.

Main feature of UI Suite is that you define your components as twig files but also describe them in separate yaml files (COMPONENT.ui_patterns.yml). The Drupal module itself then parses this yaml file and allows you to use the components in configuration of Display Suite, Field Group, core’s Layout, Views.

See the full ecosystem of UI Suite.

UI Patterns Ecosystem

There are a few great starter kits available for main frameworks: Bootstrap, Material Design, Mozilla Protocol, DSFR (French government)

In order to see your component library you can enable ui_patterns_library module (part of UI Patterns) that will display all your components on `/patterns` route.

There is a slack channel #ui-suite-initiative in the main Drupal slack to get support and follow the development. There are a monthly meeting attended by a dozen of people each time.

As of February 2023 UI Patterns module used by 4,180 sites.

 

Wingsuit

Another great approach to implementing design systems in Drupal is Wingsuit. It combines UI Patterns and Storybook.

Wingsuit comes with a Drupal kickstarter that we highly recommend to try.

Components defined with COMPONENT.wingsuit.yml that are pretty similar to UI Pattern’s COMPONENT.ui_patterns.yml files but with some additions used for Storybook (definitions of preview properties).

The set up is tightly coupled with Wingsuit Companion module that translate COMPONENT.wingsuit.yml into derivatives for COMPONENT.ui_patterns.yml.

Team behind the Wingsuit is working on a newer version with a lot of improvements. Webpack 5, Storybook 7, much faster and flexible and also on a new base Theme based on a Figma File which we also provide as open source.

At the moment of writing this Wingsuit companion module is reported to be used on 117 sites.

 

Component Libraries

This initiative is led by Lullabot. Here is a great article with details about it. Main idea is to keep all your styles, template in the same folder.

It is possible to render components either with twig’s include/embed approach or via renderable arrays.

What is very interesting is that CL components can be rendered by Drupal for Storybook. Please check Theme Server for more details.

As of February 2023 CL Components module used on 485 sites.

 

Conclusions

Design systems are really picking up in Drupal and definitively a way to go if budget allows. Now it is really a preference of how much you would like to expose to site builders. If you are looking for a really tied up system with less configuration (and less chances for site builders to break things) – Emulsify or Component Libraries are great choices.

If you are looking to build a system that allows site builders to reuse components – UI Suite is a great approach. I would definitely recommend taking a look at Wingsuit if you are comfortable with TailwindCSS.

 

Future

There are discussions on the Core level about Single Directory Components that will speed up adoption of design systems. So keep watching these too.

How to Avoid False Positives when Doing Visual Testing

The biggest pain point of fulll-page screenshot visual regression testing are false positives. They usually happen because of the dynamic nature of the content. There are few ways of handling this situation. First, you could mask or remove dynamic elements completely. But then you’ll miss testing them.
6 mins read read

Everything You Need To Know About Performance Testing and Its Types

The software testing process does not end with the segregation of functional and non-functional types. Therefore, to develop a thorough understanding of the SDLC, you need to dig deeper. One of the non-functional testing types is performance testing and this type is further segregated into 4 types.

4 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs