Design Systems: Embedding UI Design Patterns in React Components

Using React propTypes to bring design and development closer together

Image by Bishnu Sarangi from Pixabay

In recent years we’ve seen an explosion of tools that aim to bridge the gap between designers and developers (Bit, Sketch, Zeplin, etc.). Design systems, nowadays, are much more than a static and verbose list of guidelines — they are living systems with actual code components at their core. They are much closer to the product itself and to those who develop it.

This progression towards a code-oriented design system is a real blessing, largely since reading long lists of guidelines is an activity most of us would rather avoid. It is a tedious task that too often fails in preventing design errors. It doesn’t provide immediate feedback to alert you if you happen to violate one of the styling rules — you are simply left on your own.

With today’s component design systems, following the rules is much easier. As a developer, you find abstract design rules embedded in your UI component library, stacked with reusable components that have been built according to your organization style guide and approved by all relevant decision-makers.

But, the story is not over yet. There are many things that are not found in the components themselves. In his blog post “Patterns ≠ Components”, Nathan Curtis makes the distinction between patterns and components:

“Components are how something DOES work, inclusive of tradeoffs and constraints realized through a build process. Patterns describe how something SHOULD work under preferred conditions and suggestions of how to cope with tradeoffs. Components are an interface chunk to be added to an overall layout. whereas patterns may be UI or a variety of other things, like a behavior, flow, application motif or something else.”

For example, your component library may have an accordion component but it doesn’t tell you how it should or shouldn’t be used. You may use the component in a perfectly valid way, code-wise, but fail to follow best practices regarding UI/UX.

Your design team may have strongly advised against using the accordion component to present pieces of content that differ too much in length but nothing in the component itself suggests that.