On design systems

A series of articles.

Design systems bring a novel approach to UI/UX design and development — to solve its inherent consistency and scalability problems.

As of today, dedicated companies — with resources — can afford their own custom design system. Others copy or innovate.

The series walks-through the problem in-depth, from the viewpoint of all stakeholders.

And proposes a solution — of recent origin — to help companies with less resources to roll their own.

1. Workflow, practices and deliverables

The first article takes a look at existing systems and defines the workflow, practices and deliverables for all stakeholders.

2. Design tools and processes

The second article examines design systems from the designer viewpoint.

Offers novel ideas — design systems as database (code), pair designing — to reduce the cost of rolling out design systems.

It presents an ideal and working use case where a rare species — a developer who designs — creates a design system, and more, in the browser.

3. Consistent user interfaces in web context

The third article examines design systems from the developer viewpoint.

It presents past and current front-end development paradigms and examines why they lead, or not, to consistent user interfaces.

And comes to the conclusion: to end fragility in front-end development — standard software development patterns and practices should replace the current hacking mindset and non-programming languages.

4. Implementing a design system in React and Typescript

A work in progress. A complete example for developers where the findings above merge into a real-life project.

And for the fun, for a more compact experience, please enjoy the previous iteration on the subject, in a mini-book format.

To React with best practices. Written by @metamn.