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.
Take the image above, here we have a complex
Bottom Navigation component, that contains a
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.
Component Design Systems
- Alfa Bank
- Ant Design
- Aragon UI
- Auth0 Design System
- Backpack - by Skyscanner
- Carbon Design System - by IBM
- Circuit UI - by SumUp
- cf-design - by Cloudflare
- Ionic Framework - Material and HIG
- Lightning Design System
- Material Design
- Office UI Fabric
- Pivotal UI
- Pluralsight Design System
- Polaris - by Shopify
- Priceline One
- Seek Style Guide
- Semantic UI
- Vue Design System
- Elastic UI framework