Developer tools

Often times, the source of truth in a system lies with the engineers, not the designers. Making sure devs can maintain the system is essential.

Linting for product correctness

Inspired by this tweet thread by Rafael Mendiola, where he describes the idea of creating custom ESLint pliugin to enforce rules that help developers adhere to a design system.

It cuminates in an example eslint-plugin-design-system:

And here’s a good article on how to write custom ESLint plugins:

Splash zones

In this case, a “splash zone” refers to the parts of a system affected by a change to the system. If I edit a component, what other components are affected?

Some devs at Shopify have built a yarn splash command that determines the splash zone of changes to their component library:

Their tools is conveniently open sourced: