What is Component Driven Design?

Component-driven development means accepting components as the new primitive of the web and leveraging their modular power to improve web application development speed, scalability, and standardization.

All across the world big companies, small companies, individuals are building websites and web apps using virtually all of the same design patterns - but building them all from scratch each time. This is insane.

Not only are the developers building these over and over, in many cases the designers are designing the same things over and over. Again, insanity!

What's a component

A component is an element that displays something on a website / webapp / or native app. It could be a button, a header, a drop-down menu, or even an entire App layout. The goal with these components is to reuse them as much as possible, resulting in a consistent and predictable design for our end users.

Material Components

Take the image above, here we have a complex Bottom Navigation component, that contains a Button, Label, and Emoji component.

Components become your Front-end Design Contract

Once we have all our Components designed, we now can all agree upon the elements that construct our web app. These components can be built in the front-end design tool like Figma or Adobe XD, and the same components can be built in the front-end framework - like Vue, React, Svelte or Angular.

Meaning that as long as the designers are creating layouts and page designs using only the components, then the developers should have no problem matching the design. No surprises for anyone - which is what we want when building software.

Advantages of using component-based design:

It forces everyone on the team to think in terms of components - aka, work already completed.
Minimizes design decisions.
Allows the front-end developers to know exactly what they're building.
It produces a much more consistent user experience.

Component Driven Design Systems

Design systems are pre-built design frameworks that contain components, rules, and specific front-end development methodologies that are required when developing rich web applications.