Skip to main content

Truly Portable Design Patterns

By Jason Grigsby

Published on July 6th, 2022

Topics

Components are everywhere. On a past project, we had design system components, web components, JavaScript framework components, and CMS components. It was components all the way down.

That project spurred two thoughts:

  1. Using the word “component” without clarifying what type of component should be verboten.
  2. It sure would be nice to reuse these components in multiple places.

That second point spurred an experiment. Could we take one set of components and port them to multiple JavaScript frameworks, import them into design tools, and use them for the editing interfaces in content management systems?

A single web component with an arrow pointing to a section containing the logos for JavaScript frameworks Vue, React, Angular and Ember. That section has an arrow pointing to logos for design tools Sketch, Invision, Framer, and UXPin. A final arrow leads from the design tools to content management systems Bloomreach, Adobe Experience Manager, and Storyblok
Could we make this dream a reality?

For this experiment to work, we needed some components. We decided to start from a web page design and then pull components out of the design. My colleague Paul did a lot of the heavy-lifting on this experiment starting with designing a fake Cloud Four sock product page to use as our component inspiration.

Small screen version of our Cloud Four sock product page
Wide screen version of Cloud Four socks

Once the design was complete, Paul determined what portions of the design made the most sense as components. He then created web components that we could use for our experiment. The demo components are documented in a publicly accessible Storybook instance.

Demo button component and its variants documented in the Storybook instance

The full experiment is documented in a video I created for An Event Apart which you can view at the end of this article. The short summary is:

  • Converting to JavaScript frameworks was fairly straightforward
  • Importing into design tools was more challenging, but there were a couple of promising tools
  • Using web components as the building blocks of a content management system editor seems doable as well

Here is a short excerpt of my AEA talk demonstrating the reuse of components in all of these systems:

In this video, I demonstrate how making an edit to one of the demo web components flows into all of the different frameworks, design tools, and content management systems.

We recently started a new experiment focused exclusively on importing design system components into design tools. I’ll share what we’ve learned in the next installment (part 6) of my design tools for a design system world series.

If you want to see the sample components in various frameworks, we’ve put together a quick demo page. The entire research project is available on GitHub as well.

Finally, here is the full An Event Apart video:

Truly Portable Patterns Presented to An Event Apart

This experiment convinced me that there is real value for organizations in making sure design systems components can be reused as broadly as possible. It requires a little more work, but the benefits of reuse and adoption of the components make it worth the extra effort.