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 have 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, mostly since reading long lists of guidelines is an activity most of us would rather avoid. It is tedious and tiresome but worst of all, it makes it very easy to make mistakes. There is no immediate feedback correcting you if you happen to “brake” one of the styling rules — you’re simply required to read the guidelines and implement them accordingly.

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 chunkto 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 does not 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.